@cosmema/ui

Radix-first UI library with sharp-edge visual defaults, shadcn-style exports, and framework starter examples.

Highlights

• Full component surface including overlays, forms, navigation, data display, layout, and feedback primitives.
• Shadcn-style API names (Dialog, DropdownMenu, ToggleGroup, etc.).
• Backward-compatible Ui* aliases preserved.
• Sharp design defaults: square borders, strong contrast, #ff5d05 primary accents.
• Nuxt-ready theme/recipe CSS classes (cm-*) for non-React rendering.

Installation

npm install @cosmema/ui radix-ui react react-dom

Peer requirements:

• react ^19.2.4
• react-dom ^19.2.4
• radix-ui ^1.4.3

Usage

import {
  Button,
  Dialog,
  DialogContent,
  DialogTrigger,
  Input,
  ToastProvider,
  ToastRoot,
  ToastViewport,
} from "@cosmema/ui";
import "@cosmema/ui/styles";

export function Example() {
  return (
    <div className="cosmema-theme p-6 space-y-4">
      <Input placeholder="Email" />
      <Dialog>
        <DialogTrigger asChild>
          <Button>Open</Button>
        </DialogTrigger>
        <DialogContent>Dialog content</DialogContent>
      </Dialog>

      <ToastProvider>
        <ToastRoot>
          <p>Toast body</p>
        </ToastRoot>
        <ToastViewport />
      </ToastProvider>
    </div>
  );
}

Style Exports

• @cosmema/ui/styles
• @cosmema/ui/styles/cosmema-theme.css
• @cosmema/ui/styles/cosmema-recipes.css

Framework Examples

• Next preview app: examples/next-preview
• Nuxt starter app: examples/nuxt-starter

Run from repo root:

npm run build
npm run typecheck
npm run dev:next-preview
npm run dev:nuxt-starter

Package Entrypoints

• @cosmema/ui
• @cosmema/ui/primitives
• @cosmema/ui/shell
• @cosmema/ui/icons
• @cosmema/ui/styles

Development

npm run typecheck
npm run build
npm run build:next-preview
npm run build:nuxt-starter