Components

@azmr/ui is a component library for React 18 and 19, built on Base UI primitives, styled with Tailwind v4 and a small set of design tokens. Every component page has live demos you can preview in light and dark and at each density, the source of each demo, a props table generated from the TypeScript types, and an accessibility section with the keyboard map.

Set up

/* global.css */
@import "tailwindcss";
@import "@azmr/ui/styles.css";

Use @azmr/ui/tokens.css instead if the app already has global styles. See the package page for the tokens, theming and locale.

Or copy the source with the shadcn CLI

If you would rather own the code than import a package, the same components are published to a shadcn-compatible registry. Add the namespace to your components.json:

{
  "registries": {
    "@azmr": "https://platform.azmara.io/r/{name}.json"
  }
}

Then, in a project that has run npx shadcn@latest init:

npx shadcn@latest add @azmr/button

This copies button.tsx and the components it needs (spinner.tsx) into components/ui, installs @base-ui/react and class-variance-authority, and adds a small tokens item to your globals.css: density, motion and elevation tokens, plus colours a standard shadcn setup lacks (--destructive-foreground, --success, --warning, --info). It never changes the tokens you already have, so your palette stays yours. The copied source is generated from the package source with only the import paths rewritten, so it behaves identically. Available now: button, spinner, tokens; more arrive with each component.

What every component guarantees

• Tokens only. No raw colours; a test enforces it, so a theme change reaches every component.
• Accessible by default. Each component is tested with axe, by keyboard, and under reduced motion.
• Server-safe where it can be. Stateless components such as Spinner and Icon are Server Components; the rest carry "use client" on their own entry only.
• Tree-shakeable, with budgets. Each entry has a size budget checked in CI.
• className merges last, and ref is the real DOM element.

Components

• Typography: a type scale with semantic elements, plus Heading, Text, Link, Code, Kbd
• Button: variants, density-aware sizes, loading, icon-only
• Input: the real input element, works with react-hook-form
• Spinner: indeterminate progress, a Server Component
• Icon: Lucide, Tabler or your own SVG