# opencommerce design system

> Components, tokens and instructions for building opencommerce interfaces.

## Start here

- [Agent instructions](https://opencommerce-ds.vercel.app/agents.md): setup, choosing components, composing pages and verification.
- [Registry JSON](https://opencommerce-ds.vercel.app/r/index.json): complete inventory including dependencies.
- [Complete reference](https://opencommerce-ds.vercel.app/llms-full.txt): guide, examples and source for every item. Prefer individual references when possible.

## Components and tokens

- [opencommerce theme](https://opencommerce-ds.vercel.app/r/theme.md): The opencommerce tokens and the Tailwind names that read them.
- [About page](https://opencommerce-ds.vercel.app/r/about-page.md): About page template with the header, the page's opening, team directories and the footer.
- [Accordion](https://opencommerce-ds.vercel.app/r/accordion.md): Expandable questions or sections with keyboard navigation.
- [Avatar](https://opencommerce-ds.vercel.app/r/avatar.md): A square photo or store mark with 6px corners and an initials fallback.
- [Badge](https://opencommerce-ds.vercel.app/r/badge.md): Mono chips for counts and tags, small pills for an order or route status.
- [Banner](https://opencommerce-ds.vercel.app/r/banner.md): Notice with a title, message and optional actions.
- [Button](https://opencommerce-ds.vercel.app/r/button.md): Flat keys for primary, secondary and toolbar actions.
- [Card](https://opencommerce-ds.vercel.app/r/card.md): Container for related content, with default and raised variants.
- [Checkbox](https://opencommerce-ds.vercel.app/r/checkbox.md): Checkbox with checked, unchecked, indeterminate and disabled states.
- [Code window](https://opencommerce-ds.vercel.app/r/code-window.md): Code in a window: the file name in the bar, Copy at the right, light or on ink, with banded lines.
- [Collapse](https://opencommerce-ds.vercel.app/r/collapse.md): Expandable content area that animates its height.
- [Command](https://opencommerce-ds.vercel.app/r/command.md): Searchable command list or dialog with keyboard navigation.
- [Copy button](https://opencommerce-ds.vercel.app/r/copy-button.md): A small Copy key that swaps to Copied in place, on white or on ink.
- [CTA](https://opencommerce-ds.vercel.app/r/cta.md): The closing card: mist, a hairline and 16px corners, the headline, two keys and the install box, glyphs gathering at its edges.
- [Dialog](https://opencommerce-ds.vercel.app/r/dialog.md): Modal dialog with a title bar, focus trap and close control.
- [Docs link](https://opencommerce-ds.vercel.app/r/docs-link.md): External documentation link with an arrow.
- [Dropdown menu](https://opencommerce-ds.vercel.app/r/dropdown-menu.md): Action menu with white and frosted glass panels, submenus and selection controls.
- [Empty state](https://opencommerce-ds.vercel.app/r/empty-state.md): Message and optional action for an empty list or search result.
- [FAQ](https://opencommerce-ds.vercel.app/r/faq.md): Centered questions with native expandable answers, one open at a time, on hairlines.
- [Feature rows](https://opencommerce-ds.vercel.app/r/feature-rows.md): Features as windows two to a row (picture, title, line), or one to a row beside their window; pictures play when first seen.
- [Field](https://opencommerce-ds.vercel.app/r/field.md): Label, help text, error message and accessibility attributes for a form control.
- [Glyph field](https://opencommerce-ds.vercel.app/r/glyph-field.md): A faint canvas field of *s and @s in clumps, with a few blue runs, that flickers while on screen.
- [Hero](https://opencommerce-ds.vercel.app/r/hero.md): White, centered page opening: a pill, the title, a line, two keys, the strip of marks and a code window over a field of glyphs.
- [Hold button](https://opencommerce-ds.vercel.app/r/hold-button.md): Button that confirms an action after a continuous hold.
- [Home page](https://opencommerce-ds.vercel.app/r/home-page.md): Home page template: header, hero, features, steps, live status, pricing, closing card, questions and footer.
- [Input](https://opencommerce-ds.vercel.app/r/input.md): Single-line text field with standard and search variants.
- [Install tabs](https://opencommerce-ds.vercel.app/r/install-tabs.md): One install line on ink, a tab per package manager and a Copy key.
- [Integrations](https://opencommerce-ds.vercel.app/r/integrations.md): Integration sections with selectable tools and matching previews.
- [Kbd](https://opencommerce-ds.vercel.app/r/kbd.md): Keyboard key or shortcut label.
- [Label](https://opencommerce-ds.vercel.app/r/label.md): Accessible label for a form control.
- [Logo strip](https://opencommerce-ds.vercel.app/r/logo-strip.md): The stores or customers as bare grey marks drifting left in one row under the hero's keys.
- [Logo](https://opencommerce-ds.vercel.app/r/logo.md): The typeset opencommerce lockup with its byline, and the [*] mark.
- [Marquee](https://opencommerce-ds.vercel.app/r/marquee.md): A slow strip of grey marks or names drifting left, fading at both ends, paused under the pointer.
- [Nav dock](https://opencommerce-ds.vercel.app/r/nav-dock.md): The header's tray of links in frosted glass, with a lit pill that slides to the current section.
- [Outline wordmark](https://opencommerce-ds.vercel.app/r/outline-wordmark.md): The name set as wide as the page in a faint outline, lit in blue under the pointer.
- [Page header](https://opencommerce-ds.vercel.app/r/page-header.md): Title, optional label and introduction for an inner page.
- [Popover](https://opencommerce-ds.vercel.app/r/popover.md): Anchored panel for contextual details or controls.
- [Pricing page](https://opencommerce-ds.vercel.app/r/pricing-page.md): Pricing page template with the plans, billing questions and the footer.
- [Pricing](https://opencommerce-ds.vercel.app/r/pricing.md): Plans side by side in windows, with the figure, compared rows and a full-width key; one plan featured.
- [Product grid](https://opencommerce-ds.vercel.app/r/product-grid.md): Product overview cards with text, actions and media.
- [Progress](https://opencommerce-ds.vercel.app/r/progress.md): Progress bar with a value, maximum and accessible progress state.
- [Prose](https://opencommerce-ds.vercel.app/r/prose.md): Typography and layout for long-form content.
- [Scroll area](https://opencommerce-ds.vercel.app/r/scroll-area.md): Scrollable container with overflow indicators and a scroll control.
- [Secret field](https://opencommerce-ds.vercel.app/r/secret-field.md): Masked value with reveal and copy controls.
- [Section](https://opencommerce-ds.vercel.app/r/section.md): Page section with generous air above, the centered section heading and an optional label.
- [Segmented control](https://opencommerce-ds.vercel.app/r/segmented-control.md): Single-value selector with radio semantics and arrow-key navigation.
- [Select](https://opencommerce-ds.vercel.app/r/select.md): Single-choice select with field, compact, ghost and chip treatments.
- [Separator](https://opencommerce-ds.vercel.app/r/separator.md): Horizontal or vertical divider.
- [Sheet](https://opencommerce-ds.vercel.app/r/sheet.md): Side panel with a title, close control and focus management.
- [Site footer](https://opencommerce-ds.vercel.app/r/site-footer.md): White footer under a hairline: the name and a line, three link columns, the small print and the outlined wordmark.
- [Site header](https://opencommerce-ds.vercel.app/r/site-header.md): Fixed header of three glass trays: the wordmark, the links with their pill, and one blue key.
- [Skeleton](https://opencommerce-ds.vercel.app/r/skeleton.md): Placeholder that reserves space while content loads.
- [Toast](https://opencommerce-ds.vercel.app/r/sonner.md): Toast notifications with optional actions.
- [Spinner](https://opencommerce-ds.vercel.app/r/spinner.md): Loading indicator that inherits the surrounding text color.
- [Status table](https://opencommerce-ds.vercel.app/r/status-table.md): A live table in a window: a live dot and filter, rows with marks, mono figures and day bars, a legend.
- [Steps](https://opencommerce-ds.vercel.app/r/steps.md): How it works: steps listed down the left, each with its code in a dark window, playing through on a timer.
- [Surface](https://opencommerce-ds.vercel.app/r/surface.md): Background and text context shared by a section and its overlays.
- [Switch](https://opencommerce-ds.vercel.app/r/switch.md): Toggle for a setting that takes effect immediately.
- [Table](https://opencommerce-ds.vercel.app/r/table.md): Responsive table that stacks row content on phones.
- [Tabs](https://opencommerce-ds.vercel.app/r/tabs.md): Tabbed views in the header's glass tray: a white pill glides to the selected tab.
- [Tag filter](https://opencommerce-ds.vercel.app/r/tag-filter.md): Searchable tag picker with removable selected filters.
- [Tags input](https://opencommerce-ds.vercel.app/r/tags-input.md): Editable list of values with add, remove and validation states.
- [Team directory](https://opencommerce-ds.vercel.app/r/team-directory.md): Responsive directory of people with photos, roles and optional links.
- [Testimonials](https://opencommerce-ds.vercel.app/r/testimonials.md): Customer quotes with names, logos and optional context.
- [Textarea](https://opencommerce-ds.vercel.app/r/textarea.md): Resizable multi-line text field.
- [Tooltip](https://opencommerce-ds.vercel.app/r/tooltip.md): Short contextual label shown on hover or keyboard focus.
- [Updates feed](https://opencommerce-ds.vercel.app/r/updates-feed.md): Dated release notes grouped by change type.
- [useHold](https://opencommerce-ds.vercel.app/r/use-hold.md): Confirms after a continuous pointer or keyboard hold and cancels when interrupted.
- [useTabGlide](https://opencommerce-ds.vercel.app/r/use-tab-glide.md): Moves a selection indicator between tabs, respecting reduced motion.
- [cn](https://opencommerce-ds.vercel.app/r/utils.md): Class-name utilities that understand the design token scales.
- [Window](https://opencommerce-ds.vercel.app/r/window.md): A white card with a quiet title bar: file name centered, the [*] mark or an action at the right.