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.

All componentsCopy Anchor Link

Grouped by purpose. Each badge shows the component's maturity: stable, new or beta.

Set upCopy Anchor Link

/* global.css */
@import "tailwindcss";
@import "@azmr/ui/styles.css";
@import "@azmr/ui/classes.css";   /* or one list per component: @azmr/ui/classes/button.css */

Use @azmr/ui/tokens.css instead of styles.css if the app already has global styles. Importing only the class lists for the components you use keeps the CSS small; Tailwind CSS setup explains them. See the package page for the tokens, theming and locale.

Or copy the source with the shadcn CLICopy Anchor Link

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. The shadcn CLI guide has the details.

What every component guaranteesCopy Anchor Link

• 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.