Accessible UI Primitives & Composable Design Tokens

CosmoUI provides unstyled, WAI-ARIA 1.2 compliant component primitives alongside a zero-runtime OKLCH CSS token architecture inspired by Radix Primitives, shadcn/ui, and Ariakit.

Quick Installation

Install the headless primitive runtime or initialize the token stylesheet in your project root:

npm install @cosmoui/primitives @cosmoui/tokens
# Or scaffold individual components into src/components/ui:
npx @cosmoui/cli@latest init --tokens oklch --css-vars

Interactive Primitive Preview

All overlay primitives manage focus restoration, aria-modal attributes, and escape/outside-pointer dismissal out of the box.

Composition Architecture

CosmoUI primitives follow a compound component contract with polymorphic asChild slot forwarding, allowing seamless composition with Tailwind CSS, CSS Modules, or vanilla style sheets:

import * as Dialog from '@cosmoui/primitives/dialog';

export function TokenPreferencesModal() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button className="cui-btn cui-btn-primary">Edit Workspace Tokens</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="cui-overlay" />
        <Dialog.Content className="cui-dialog-surface">
          <Dialog.Title>Surface & Contrast Scale</Dialog.Title>
          <Dialog.Description>
            Adjust perceptual lightness and chroma stops across dark and light themes.
          </Dialog.Description>
          <Dialog.Close className="cui-btn">Save Changes</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

Accessibility & Runtime Matrix