# Frontic UI > Vue components for commerce storefronts, built for teams where an AI agent writes most of the code. `add` copies an item's source into the project, shadcn-style, and keeps the look out of it: no colour, radius or type style sits in a component. Items wear recipe classes, recipes live in `library/DESIGN.md`, tokens in `library/brand.json`, and `build` compiles both into `frontic.css`, so a change to a token or a recipe restyles every component that wears it. Interactive items build on Reka UI, so keyboard, focus and ARIA come with them. Frontic UI is not a React library, and not a package components are imported from: after `add` the source is the project's own. Its components start from shadcn-vue's, but it is not a theme over them: the look changes in two files, never through a class on a component. `check` lints a project against its brand, failing by default on classes outside the brand's theme, such as `bg-blue-500` or `text-[13px]`, colour pairs below contrast, and recipe tokens the brand lacks. Needs Vue 3 and Tailwind CSS 4.3 or newer, in Nuxt or Vite; no account or backend. MIT; the CLI is at 0.13.0, before 1.0. An optional Frontic account syncs one company's library across projects. Terms the list uses: an *item* is one installable folder. *Components* are the building blocks, such as `button` or `dialog`; *sections* are commerce blocks built from them, such as `cart-summary`; *templates* are larger compositions, such as `checkout-page`, a header or a mini cart. A *part* is one Vue component in an item, such as `DialogContent`. A *recipe* is the named look a part wears, such as `button`, built from tokens. A *colour role* such as `primary`, `buy` or `promo` is a token named for what it does. A *Field* wraps a form control with its label, description and error; a control that *joins a Field* is placed inside one and takes its id, name and errors from it. The source shown in an item's file imports other items as `@library/components/...`; `add` rewrites those to the project's aliases. Each item below links to one markdown file with everything needed to build with it: install command, examples, the API of every part (props, events, slots, data attributes), the recipes it wears, and the source of every file it installs (re-export barrels left out). It is the same text the MCP server and `npx @frontic/ui docs ` return. An item's file sits where `add` installs the item, plus `.md`, so `components//.md`: Button installs to `components/ui/button/`, so its file is https://ui.frontic.com/components/ui/button.md. ```sh npx @frontic/ui create my-store # a new Nuxt or Vite project, MCP and skills set up npx @frontic/ui init # or add Frontic UI to a project you have npx @frontic/ui add button dialog card # items, the items they are built from, and their recipes npx @frontic/ui build # after editing library/brand.json or library/DESIGN.md npx @frontic/ui docs button # the same markdown as below, in the terminal ``` ## Start here - [README](https://ui.frontic.com/README.md): What Frontic UI is, how items, recipes and tokens hold the look, and every CLI command. - [AGENTS.md](https://ui.frontic.com/AGENTS.md): The rules for an agent working in a project's components: read an item's API before using it, pick a variant instead of styling, take colour only from the brand. - [frontic-ui skill](https://ui.frontic.com/skills/frontic-ui/SKILL.md): The skill `skills` installs: how to find, install, compose and restyle items in a project. - [design-system skill](https://ui.frontic.com/skills/design-system/SKILL.md): Builds a brand's tokens and recipes from a storefront URL, a Figma library or a codebase. - [MCP server](https://mcp.ui.frontic.com/mcp): Streamable HTTP, no key. Tools: `search_registry_items`, `get_item_docs` (the item markdown below), `get_item_examples`, `get_add_command`; the prompt `build_with` builds a goal from named items. Set up with `npx @frontic/ui mcp --client claude`, or cursor, vscode, codex, opencode. - [.mcp.json](https://ui.frontic.com/.mcp.json): The MCP config `mcp --client claude` writes. ## Base components - [Accordion](https://ui.frontic.com/components/ui/accordion.md): Stacked sections the shopper opens and closes, one or several at a time, such as shipping and returns on a product page. - [Alert](https://ui.frontic.com/components/ui/alert.md): A short message in neutral, info, success, warning or error, with an optional icon, title, description and an action such as dismiss. - [Alert Dialog](https://ui.frontic.com/components/ui/alert-dialog.md): Asks the shopper to confirm or cancel an action before it happens, such as removing an address, and keeps focus inside until they choose. - [Aspect Ratio](https://ui.frontic.com/components/ui/aspect-ratio.md): Keeps its content at a fixed width-to-height ratio, such as a square product image or a 16:9 video. - [Autocomplete](https://ui.frontic.com/components/ui/autocomplete.md): An input with suggestions that accepts free-form text; the value is the text itself. - [Avatar](https://ui.frontic.com/components/ui/avatar.md): A person's picture with initials or an icon as fallback and an optional status badge; a group overlaps several and shows how many more there are. - [Badge](https://ui.frontic.com/components/ui/badge.md): A short label such as new or sale, in the status colours and the commerce roles promo, discount, new and price, at three sizes. - [Breadcrumb](https://ui.frontic.com/components/ui/breadcrumb.md): Shows where the current page sits, such as Home / Jackets / Rain jackets, with links up the trail and an ellipsis for steps it hides. - [Button](https://ui.frontic.com/components/ui/button.md): Triggers an action such as adding to the cart: solid, outline, soft, ghost or link, in primary, neutral, destructive, inverse and the commerce colours buy and checkout. - [Button Group](https://ui.frontic.com/components/ui/button-group.md): Joins related buttons into one connected row or column, with separators and text labels between them. - [Calendar](https://ui.frontic.com/components/ui/calendar.md): Lets the shopper pick a date from a month grid, within a minimum and maximum, starting the week where the locale it is given does, one or several months side by side. - [Card](https://ui.frontic.com/components/ui/card.md): Frames related content such as a product or an order, with header, title, description, action, image, content and footer parts. - [Carousel](https://ui.frontic.com/components/ui/carousel.md): Scrolls slides sideways or up and down, with previous and next buttons, dots that jump to a slide and a bar that shows how far the shopper has scrolled. - [Checkbox](https://ui.frontic.com/components/ui/checkbox.md): Lets the user tick an option on or off, with an indeterminate state drawn as a minus and a hit area wider than the box. - [Collapsible](https://ui.frontic.com/components/ui/collapsible.md): Content that opens and closes with a height animation under an unstyled trigger, which takes any element through as-child. - [Combobox](https://ui.frontic.com/components/ui/combobox.md): Searchable single-choice list behind a trigger, with headed groups and an empty state; the list is as wide as its trigger, and the trigger joins a Field as its control. - [Context Menu](https://ui.frontic.com/components/ui/context-menu.md): A menu that opens on right-click, with actions, checkbox and radio items, labelled groups and destructive entries. - [Date Field](https://ui.frontic.com/components/ui/date-field.md): A date typed one segment at a time, in the order and format of the user's locale; joins a Field around it. - [Date Picker](https://ui.frontic.com/components/ui/date-picker.md): A date typed segment by segment or picked from a calendar the button beside it opens; joins a Field around it. - [Date Range Picker](https://ui.frontic.com/components/ui/date-range-picker.md): A start and an end date typed segment by segment or picked from a calendar the button beside them opens; joins a Field around it. - [Dialog](https://ui.frontic.com/components/ui/dialog.md): A modal window over the page, with a header, a body that scrolls when it outgrows the screen, and a footer for actions such as save and cancel. - [Drawer](https://ui.frontic.com/components/ui/drawer.md): A panel that slides in from any edge and closes with a swipe, with snap points for a half-open state, such as filters or a mini cart on a phone. - [Dropdown Menu](https://ui.frontic.com/components/ui/dropdown-menu.md): A menu that opens from a button, with actions, checkbox and radio items, labelled groups and destructive entries, such as account or sort options. - [Empty](https://ui.frontic.com/components/ui/empty.md): Fills the space when there is nothing to show, such as an empty cart or a search without results, with an icon, a title, a hint and actions. - [Field](https://ui.frontic.com/components/ui/field.md): Wraps one form control with its label, description and error, wires their ids and validates the value; most form controls join a Field placed around them. - [Filter](https://ui.frontic.com/components/ui/filter.md): The parts of a storefront filter: option lists with counts and search, swatches, a price range, ratings and switches, in groups that open in place or as a popover and reset together. - [Form](https://ui.frontic.com/components/ui/form.md): Validates its fields on submit, against their own rules or one Standard Schema such as Zod 4, hands over their values, and shows server errors on the field they name. - [Hover Card](https://ui.frontic.com/components/ui/hover-card.md): A card that opens on hover or focus to preview what a link points to, such as a product with its image, price and rating. - [Image](https://ui.frontic.com/components/ui/image.md): Shows an image with a loading effect and a placeholder while it loads, and a fallback when it fails, such as a product shot. - [Input](https://ui.frontic.com/components/ui/input.md): Lets the user enter a single line of text, joining a Field. - [Input Group](https://ui.frontic.com/components/ui/input-group.md): An input or textarea with addons beside, above or below it, such as a search icon, a unit or a button that submits. - [Input OTP](https://ui.frontic.com/components/ui/input-otp.md): Lets the user type or paste a one-time code across several slots, such as the code a sign-in email sends. - [Item](https://ui.frontic.com/components/ui/item.md): Groups the media, text and actions of one entry, such as a list row or a link to a page. - [Kbd](https://ui.frontic.com/components/ui/kbd.md): Shows a keyboard key or shortcut, such as the key that focuses the search. - [Label](https://ui.frontic.com/components/ui/label.md): Names a control that sits outside a Field, such as a sort select in a toolbar, and moves focus to it on click. - [Mega Menu](https://ui.frontic.com/components/ui/mega-menu.md): Store navigation whose flyouts span the bar's full width, for link columns and featured tiles; panels slide between categories and the height follows. - [Native Select](https://ui.frontic.com/components/ui/native-select.md): The browser's own select, for choices autofill or the phone's picker should fill, such as a country in an address; mutes the empty option as a placeholder. - [Navigation Menu](https://ui.frontic.com/components/ui/navigation-menu.md): A row of site links where some open a panel of further links, shown in one shared panel below the row that resizes to each; set viewport to false to open each panel under its own trigger. - [Number Field](https://ui.frontic.com/components/ui/number-field.md): Lets the shopper type a number or step it up and down with buttons at either end, within a minimum and maximum, such as a quantity. - [Pagination](https://ui.frontic.com/components/ui/pagination.md): Lets the shopper move through numbered pages of results, with Previous and Next and, when there are many pages, the first and last page around an ellipsis. - [Payment Card](https://ui.frontic.com/components/ui/payment-card.md): A card's number, expiry and security code: spaced as typed, brand shown and checked, each joining a Field; or a payment provider's hosted fields framed in the same look. - [Popover](https://ui.frontic.com/components/ui/popover.md): A small panel that opens from a trigger and stays until dismissed, with a title and description, such as delivery details or a size guide. - [Price](https://ui.frontic.com/components/ui/price.md): Shows a price in the shopper's locale, with the original price and the percentage saved when it is reduced, and a hint such as tax and shipping. - [Progress](https://ui.frontic.com/components/ui/progress.md): Shows how far a task has progressed, as a share of the whole; slides a segment while that is unknown. - [Radio Accordion](https://ui.frontic.com/components/ui/radio-accordion.md): Radio options where the picked one reveals its details, for checkout choices like a card form under the card option or a delivery window under express shipping. - [Radio Group](https://ui.frontic.com/components/ui/radio-group.md): Lets the user pick exactly one of a few options; joins the Field around it for its label, description and errors. - [Range Calendar](https://ui.frontic.com/components/ui/range-calendar.md): Lets the shopper pick a start and an end date from one or more months, within a minimum and maximum and up to a set number of days. - [Rating](https://ui.frontic.com/components/ui/rating.md): Shows a rating as stars or dots in the brand's rating colour, with an optional score and review count, at three sizes. - [Rating Input](https://ui.frontic.com/components/ui/rating-input.md): Lets the user give a rating by picking a mark, drawn with the Rating item's stars or dots, joining a Field. - [Scroll Area](https://ui.frontic.com/components/ui/scroll-area.md): Holds content that scrolls inside a fixed area, vertically, horizontally or both, with a slim bar that shows on hover. - [Search](https://ui.frontic.com/components/ui/search.md): A search field whose panel offers products, categories and suggestions while the shopper types, with a "Search for" row that submits; inline under the field or in an overlay. - [Select](https://ui.frontic.com/components/ui/select.md): Lets the user pick one option from a list that opens below the trigger at its width, joining a Field. - [Separator](https://ui.frontic.com/components/ui/separator.md): Draws a thin horizontal or vertical line between groups of content, hidden from screen readers unless it carries meaning. - [Sheet](https://ui.frontic.com/components/ui/sheet.md): Slides a panel in from a screen edge over the page, with a header, a scrolling body and a footer, for carts, filters and menus. - [Sidebar](https://ui.frontic.com/components/ui/sidebar.md): Side panel on the start or end of the page, with groups, menus, badges and actions, that collapses off-screen or to icons and opens as a sheet on phones. - [Skeleton](https://ui.frontic.com/components/ui/skeleton.md): Placeholder block that pulses where content is still loading, sized and shaped by its classes; holds still for reduced motion. - [Slider](https://ui.frontic.com/components/ui/slider.md): Picks a value or a range by dragging thumbs along a track, with a label, a legend and values formatted like prices; joins a Field. - [Spinner](https://ui.frontic.com/components/ui/spinner.md): A turning loader that tells screen readers what is loading; inside a button it takes the icon slot and size. - [Stepper](https://ui.frontic.com/components/ui/stepper.md): Numbered steps through a flow such as checkout, marking done, current and upcoming, joined by a line that fills as each step is done; spans its row, and on a narrow screen names only the current step. - [Swatch](https://ui.frontic.com/components/ui/swatch.md): A colour or picture of one product option, such as a jacket's colour, that the shopper presses to choose it; can be marked unavailable. - [Swatch Group](https://ui.frontic.com/components/ui/swatch-group.md): A row or column of swatches for choosing one option, such as a colour, or several, as in a filter; joins a Field around it. - [Switch](https://ui.frontic.com/components/ui/switch.md): Turns one setting on or off the moment it is pressed, such as order emails; sits beside its label in a Field and mirrors in a right-to-left page. - [Table](https://ui.frontic.com/components/ui/table.md): Rows and columns of data such as orders, with header, footer, caption and an empty state; a wide table scrolls in its box and takes keyboard focus to do so. - [Tabs](https://ui.frontic.com/components/ui/tabs.md): Switches between panels of related content, such as a product's description and details; a filled or underlined list, in a row or a column, mirrored in a right-to-left page. - [Tag Group](https://ui.frontic.com/components/ui/tag-group.md): Tags the shopper moves through with the arrow keys, such as active filters to remove or options to pick; selection and removal are both optional. - [Tags Input](https://ui.frontic.com/components/ui/tags-input.md): An underlined field that collects several short values as removable tags, such as materials or interests; joins a Field around it. - [Textarea](https://ui.frontic.com/components/ui/textarea.md): An underlined field for longer free text, such as a gift message, that grows with its content; joins a Field around it. - [Toast](https://ui.frontic.com/components/ui/toast.md): Short messages that confirm an action, like adding to the cart, with an optional action button; mount Toaster once and call toast() anywhere. - [Toggle](https://ui.frontic.com/components/ui/toggle.md): A button that stays pressed until pressed again, such as saving to a wishlist; plain or outlined, with square icon sizes. - [Toggle Group](https://ui.frontic.com/components/ui/toggle-group.md): Toggles the shopper presses one or several of, such as jacket features to filter by; joined into one control, or spaced apart. - [Tooltip](https://ui.frontic.com/components/ui/tooltip.md): A short label that appears beside an element on hover or keyboard focus, such as naming an icon button; announced as the trigger's description. ## Sections: Account - [Account Access](https://ui.frontic.com/components/sections/account-access.md): Sign-in and security settings card: a pending-change notice, email and password with change actions, a two-factor switch, and account deletion. - [Settings](https://ui.frontic.com/components/sections/settings.md): Settings card: switches in titled groups, each with a hint, disabled where an option is not available, and reset and save actions. - [Sign In](https://ui.frontic.com/components/sections/sign-in.md): Passwordless sign-in card: the email the code went to, a one-time code that enables the submit once complete, and passkey or password alternatives. - [Team Members](https://ui.frontic.com/components/sections/team-members.md): Team management card: a seat count, an invite row with email and role, and each member with a role select and a menu to resend, revoke or remove. ## Sections: Cart - [Cart Summary](https://ui.frontic.com/components/sections/cart-summary.md): Cart card with an item count, product lines with images and line totals, subtotal, shipping and savings rows, the total with its tax note, and a secure checkout button. ## Sections: Checkout - [Delivery Slot](https://ui.frontic.com/components/sections/delivery-slot.md): Delivery card with standard and express tabs, a calendar of bookable days, a row of time windows, the chosen slot with its price, and a confirm button. - [Order Summary](https://ui.frontic.com/components/sections/order-summary.md): Order summary card with an item count, product thumbnails with variant and quantity, and a subtotal, shipping, tax and total breakdown. - [Payment Method](https://ui.frontic.com/components/sections/payment-method.md): Payment card with a radio stack of methods; card number, expiry, security code and 3-D Secure code fields that open for card payment; and a pay button showing the total. - [Promo Code](https://ui.frontic.com/components/sections/promo-code.md): Voucher card with a code field and apply button, removable chips for applied promo codes and gift cards, a confirmation notice, and the order total after deductions. - [Shipping Address](https://ui.frontic.com/components/sections/shipping-address.md): Checkout address card with a step badge, name, street, postcode, city and country fields, a same-as-billing checkbox, and a continue button. ## Sections: Filter - [Filters](https://ui.frontic.com/components/sections/filters.md): Filter card with a price range slider, collapsible category, size and colour groups that count their selections, an in-stock switch, a live result count, and clear and show-results actions. ## Sections: Footer - [Footer Brand](https://ui.frontic.com/components/sections/footer-brand.md): Footer led by a logo and tagline block spanning two columns, with a newsletter, social links and four link groups. - [Footer Minimal](https://ui.frontic.com/components/sections/footer-minimal.md): Single-row footer with the logo, a few links and social icons under a rule. - [Footer Rich](https://ui.frontic.com/components/sections/footer-rich.md): Footer with a newsletter signup, social links and link columns over a dark legal bar. - [Footer Trust](https://ui.frontic.com/components/sections/footer-trust.md): Footer with four trust points, payment method badges and legal links. ## Sections: Navigation - [Navigation Shop](https://ui.frontic.com/components/sections/navigation-shop.md): Store navigation whose categories open full-width flyouts of link columns and featured tiles, laid out beside, above or captioned, and fold into a tabbed menu sheet on narrow screens. ## Sections: Order - [Order Tracking](https://ui.frontic.com/components/sections/order-tracking.md): Order status card led by the arrival estimate, with the delivery steps as a timeline, each with its date and a one-line note, the carrier's tracking number with a copy action, and track and reschedule actions. - [Recent Orders](https://ui.frontic.com/components/sections/recent-orders.md): Order history card: a table of orders with date, items, status and total, a per-order menu to view, track, get the invoice or start a return, and pagination. - [Return Request](https://ui.frontic.com/components/sections/return-request.md): Return form card that picks the items to send back, skipping final-sale ones, with a reason, a note, where the refund goes, the refund total and a request action. ## Sections: Product - [Product Card Basic](https://ui.frontic.com/components/sections/product-card-basic.md): Product tile with sale and stock badges, rating, price, colour swatches that switch the image, and an add-to-cart button that confirms the add. - [Product Card Featured](https://ui.frontic.com/components/sections/product-card-featured.md): Large product card with a wishlist toggle and a feature badge on the photo, the brand above the title, a description, swatches that switch the image, and a prominent price beside a compare toggle. - [Product Card Gallery](https://ui.frontic.com/components/sections/product-card-gallery.md): Image-led product tile with a wishlist toggle, variant thumbnails that switch the image, badge, rating and price. - [Product Card Horizontal](https://ui.frontic.com/components/sections/product-card-horizontal.md): Product card that lays its image beside the details once its container is wide enough, with description, rating, swatches, price and add to cart. - [Product Card Hover](https://ui.frontic.com/components/sections/product-card-hover.md): Linked product tile whose quick-add button slides up over the image on hover or focus, with name, price, rating and colour dots. - [Product Card Minimal](https://ui.frontic.com/components/sections/product-card-minimal.md): Quiet linked product tile with colour pills, name and subtitle, rating, colour count and price. - [Product Options](https://ui.frontic.com/components/sections/product-options.md): Product buy box with the product shot, price and rating, colour swatches, size choice with sold-out sizes, a quantity stepper, and add-to-cart and wishlist actions. ## Sections: Review - [Review Cards](https://ui.frontic.com/components/sections/review-cards.md): Review section with the average score, distribution bars, a write-a-review prompt, and dated reviews marked when the purchase is verified. - [Review List](https://ui.frontic.com/components/sections/review-list.md): Review list with avatars, author and date, star ratings, a verified-purchase mark, and the review text. - [Reviews](https://ui.frontic.com/components/sections/reviews.md): Review summary card with the average rating, a star distribution, the latest reviews with verified-purchase marks, and read-all and write-a-review actions. ## Sections: Search - [Search Suggestions](https://ui.frontic.com/components/sections/search-suggestions.md): Storefront search with products, categories and brands while the shopper types, and suggested searches and curated picks before; inline under the field or in an overlay. ## Templates: Cart - [Cart Compact](https://ui.frontic.com/components/templates/cart-compact.md): A mini cart in a side sheet, with quantity controls, free-shipping progress, the subtotal and checkout. - [Cart Full](https://ui.frontic.com/components/templates/cart-full.md): The cart page: editable lines with quantity controls, an order summary and a checkout button. - [Cart Item Compact](https://ui.frontic.com/components/templates/cart-item-compact.md): Cart lines with a quantity field and a remove button. - [Cart Item Detailed](https://ui.frontic.com/components/templates/cart-item-detailed.md): Cart lines with large thumbnails, the line total with any saving, quantity buttons and a remove action. - [Cart Item Minimal](https://ui.frontic.com/components/templates/cart-item-minimal.md): Read-only cart lines with a small image, the variant, quantity and price, such as in an order review. - [Cart Minimal](https://ui.frontic.com/components/templates/cart-minimal.md): A mini cart in a popover with the first few items, the subtotal and checkout. ## Templates: Checkout - [Checkout Page](https://ui.frontic.com/components/templates/checkout-page.md): A one-page checkout: contact, delivery, shipping method and payment cards, with the order summary card on a brand-coloured half that folds into a bar on narrow screens. ## Templates: Filter - [Category Filter](https://ui.frontic.com/components/templates/category-filter.md): A category's products with filters in collapsible sidebar sections, sorting, badges for the active filters, and a load-more button. - [Filter Sheet](https://ui.frontic.com/components/templates/filter-sheet.md): A product list whose filters open in a sheet that slides in, with sorting, search, option lists, price ranges, switches and ratings. - [Filter Sidebar](https://ui.frontic.com/components/templates/filter-sidebar.md): A product list with its filters in a collapsible sidebar beside it, plus sorting and search. - [Filter Toolbar](https://ui.frontic.com/components/templates/filter-toolbar.md): A product list with its filters as popovers in a toolbar above it, plus sorting and search. ## Templates: Header - [Header Centered](https://ui.frontic.com/components/templates/header-centered.md): Store header with a centred logo between a search slot (inline on wide screens, an overlay button on phones) and account and cart actions, over a full-width navigation slot. - [Header Checkout](https://ui.frontic.com/components/templates/header-checkout.md): Checkout header with the logo and a secure-checkout note, and the checkout steps in a band below: every step named on a wide screen, the current one and its position on a narrow one. - [Header Shop](https://ui.frontic.com/components/templates/header-shop.md): Store header with an announcement bar, logo, a navigation slot, a search slot that sits inline on wide screens and behind a button that opens an overlay on phones, and account and cart actions. ## Templates: Product - [Category Grid](https://ui.frontic.com/components/templates/category-grid.md): Category page under the shop header: breadcrumb, title and description, result count and sort, a filter sidebar that becomes a sheet on small screens, a product gallery grid and pagination. ## Helpers - [Cart](https://ui.frontic.com/lib/cart.md): A cart line and an applied discount, with the cart's count, subtotal, savings, line totals, discounts and free-shipping rule in the lines' currency and precision. - [Filter Model](https://ui.frontic.com/lib/filter-model.md): A filter, its options and sort orders, with the applied values, the active-filter count and colour swatches read from them. - [Format](https://ui.frontic.com/lib/format.md): Formats prices in minor units, dates, ratings and shares in a locale, on @internationalized's formatters. - [Product](https://ui.frontic.com/lib/product.md): A product and its colour or style siblings, the shape every product card takes. - [Text](https://ui.frontic.com/lib/text.md): Initials from a name, `{key}` placeholders filled in a label, and the first and last result on a page. - [Use Field Control](https://ui.frontic.com/composables/use-field-control.md): Joins a control Reka does not join to the Field around it: id, name, disabled, aria and the value the Field validates. - [Use Filter State](https://ui.frontic.com/composables/use-filter-state.md): A filter panel's local filters, sorting and search, kept in step with its props, with the handlers that emit each change. - [Use Product Sibling](https://ui.frontic.com/composables/use-product-sibling.md): The sibling a product card has selected and the image that goes with it. ## Design system - [brand.json](https://ui.frontic.com/brand.json): A project's `library/brand.json` in the default brand: colour roles such as `color.action.primary` and `color.commerce.buy` with their `-foreground` and `-hover` pairs, text styles, radius, shadows and fonts as W3C design tokens. Recipes name them as `{colors.buy}` (the role in any group under `color`), `{rounded.md}` (`radius.md`) and `{typography.heading}` (`text.heading`). Edit a token, run `build`, then `check` holds every colour pair to AA contrast by default. - [DESIGN.md](https://ui.frontic.com/DESIGN.md): A project's `library/DESIGN.md` with every item added, in the default brand: per recipe a base, variant axes and defaults, each value naming a token, never a colour. - [frontic.css](https://ui.frontic.com/frontic.css): The stylesheet `build` compiles from the default brand and every recipe: the tokens as Tailwind theme variables, each recipe as classes. - [components.json](https://ui.frontic.com/components.json): The project config `init` writes: aliases, icon library, where the library lives and which `check` rules fail. ## Optional - [Live examples](https://ui.frontic.com): Every item with its example, variant matrix, API and recipes, in an editor laid out like the project. Needs JavaScript; every page here is also served as markdown.