Load {% render 'ui' %} before theme overrides and Shopify’s content_for_header. Keep your store’s custom.css last. The library uses the shared semantic tokens, such as --background, --foreground, --primary, --radius and --font-sans.
Tokens
Override tokens in your theme’s color-scheme rules or custom stylesheet. The neutral palette is generated from the shared source used by Astro and React. Theme settings own merchant choices. Light and dark modes use the same semantic roles.
Component rules
Every component has its own readable file in liquid/components/. Most use Shopify’s {% stylesheet %} tag. Global class rules, such as typeset, live in liquid/styles/ and install as separate CSS assets.
Use data-slot for the shared parts, data-variant for variants and data-size for sizes. Keep a behavioral slot, such as dialog-trigger, and add data-button for its button styling. Put store-specific adjustments in your own CSS.
Presets
Liquid supports Vega styling. The docs switcher can share theme colors and fonts with the native previews, but Astro/React Tailwind style presets do not transform Liquid CSS. There is no Tailwind dependency or build step in the consuming Shopify theme.