Library
Components
49 Tier 1 primitives — shadcn/ui in the new-york style, retuned so that colour resolves through a Comitor role token and follows whichever palette is in use, the default one or data-contrast="high". The API stays shadcn-shaped: cva variants, asChild where it makes sense, and data-slot hooks to target the parts.
Everything below is imported from @comitor/ui unless a card names another entry.
Actions
Controls that commit something, each one focusable and operable from the keyboard. Kbd is the odd one out: it only renders the keys a shortcut is spelled with.
Trigger an action or navigate. Seven variants, seven sizes, plus loading and icon props.
Join buttons, inputs and selects into one connected control, horizontal or vertical.
Two-state button for toolbars. Default and outline variants, three sizes.
Segmented set of toggles; variant and size cascade to every item through context.
Render keyboard keys, and KbdGroup for a full shortcut combination.
Inputs
Form controls. Resting, hover, focus and error borders all go through role tokens, so they stay legible in both colour palettes.
Single-line text entry. Optional label, hint, error and inline addon slots.
Wrap an input, textarea or button with leading and trailing addons.
Segmented input for one-time passcodes and 2FA flows.
Multi-line text entry that grows with its own content.
Accessible caption associated with a form control.
Label, control, description and error in one group. Vertical, horizontal or responsive.
Binary choice with optional label and description, plus a real indeterminate state.
Choose a single option from a mutually exclusive set.
Toggle a setting on immediately. Two sizes, optional label and description.
Drag to select a value or a range. One or many thumbs, horizontal or vertical.
Dropdown for choosing one value. Two trigger sizes; empty values need a sentinel.
The bare react-day-picker calendar. DatePicker adds the text input and presets.
Display
Surfaces and status. Every tonal variant speaks through the -ink step, but not always the same way: Badge sits ink text on a tint of its own colour, while Alert keeps the plain card behind it because the filled step drops the text to 1.59:1.
Container with four variants and four padding steps. CardHeader takes an actions slot.
Tonal label for status, count or category metadata. Two sizes.
User image with a graceful initials fallback.
Rows with headers, striping and footers. Sorting and selection live in DataTable.
Visual divider between content groups.
Constrain content to a fixed width-to-height ratio.
Neutral muted placeholder shown while content loads — never the brand tint.
Indeterminate loading indicator with a status role.
Determinate bar in four tones; the warning tone adds hazard stripes, not just colour.
Placeholder state for empty lists and results.
Flexible list row with media, content and actions.
Callout for important, contextual messages. Default, warning and destructive.
Overlays
Everything that floats above the page, from a one-line tooltip to a full modal.
Modal overlay in four sizes, with a scrollable DialogBody between header and footer.
Modal that interrupts to confirm a critical action and cannot be dismissed by a click outside.
Panel that slides in from any edge of the screen.
Drag-to-dismiss panel with a handle and momentum, for touch screens.
Floating panel anchored to a trigger, with free-form layout inside.
Rich preview shown on hover — supporting detail only, never the sole path to an action.
Brief label revealed on hover or focus. Brings its own provider.
Menu of actions from a button, with destructive and inset item variants.
Right-click menu of actions for a target element.
Desktop-style menu bar with nested menus, for editor screens.
Filterable command list. CommandDialog wraps it for a Cmd/Ctrl+K palette.
Navigation
Moving between views. Tabs keep state on one page; a tab set where each item is a real route is RouteTabs.
Stateful tabs in two variants, sharing tabsListVariants and tabsTriggerVariants with RouteTabs.
Hierarchical trail showing the current location. Renders in a server component.
Link-based page controls. The version that counts pages for you is TablePagination.
Top-level navigation with expandable panels, for marketing and public pages.
Vertically stacked sections that expand and collapse.
Toggle a single region of content open and closed. Unstyled by design.
Layout
Containers that shape a region rather than fill it.
Other entries
Documented alongside the primitives, but not part of Tier 1 at the main entry — each card names where the import comes from.
Comitor line, area and bar charts over the shadcn Recharts layer.
@comitor/ui/chart
The react-hook-form binding. Its FormField is the Controller wrapper, not the composite.
@comitor/ui/form
Stacked toasts with Comitor status icons. SonnerToaster in the shell entry is the next-themes one.
@comitor/ui
The application sidebar. There is deliberately no Tier 1 sidebar — this one ships with the shell.
@comitor/ui/shell
The NavGroup / NavItem data contract and the helpers that drive shell navigation.
@comitor/ui/shell
Beyond the primitives
The package ships two more tiers on top of this one. Tier 2 composites are the patterns that repeat in every Comitor app, assembled from the primitives above and exported from the same @comitor/ui entry. Tier 3 is the application frame, which needs Next and next-themes and therefore lives behind @comitor/ui/shell.