Installation

@azmr/ui is a React component library styled with Tailwind CSS v4. Adding it to an app is the same four steps in every framework. What differs is how each one runs Tailwind, so there is a guide for each.

Pick your frameworkCopy Anchor Link

If you would rather own the code than depend on a package, copy the components with the shadcn CLI: see Copy the source with the shadcn CLI. New to the library? Why @azmr/ui says what it is for and what it does not have yet.

The four stepsCopy Anchor Link

1. Install the packages. @azmr/ui and @azmr/core together with React:

   Copy Text

   pnpm add @azmr/ui @azmr/core react react-dom
   # or
   npm install @azmr/ui @azmr/core react react-dom

   @azmr/core is a peer dependency. Install it yourself so your app and @azmr/ui share one copy: two copies give incompatible Signal types. motion is an optional peer, needed only for the @azmr/ui/motion entry.

2. Set up Tailwind CSS v4 with your framework's plugin. @azmr/ui does not install Tailwind for you. See Tailwind CSS setup for what it needs and why.

3. Import the stylesheet and the class lists after Tailwind, in your global CSS. Add one class list for each entry you use:

   Copy Text

   @import "tailwindcss";
   @import "@azmr/ui/styles.css";
   @import "@azmr/ui/classes/button.css";

   Each list tells Tailwind exactly which of the package's classes to generate, so you add nothing to a Tailwind config and get CSS only for the components you use. @import "@azmr/ui/classes.css" generates every component's classes instead. Without a class list, components render unstyled. Tailwind CSS setup explains them.

4. Use a component. Import it from its own entry, for example import { Button } from "@azmr/ui/button". Every component's import path is at the top of its component page.

What you needCopy Anchor Link

• React 18 or 19.
• Tailwind CSS v4. Version 3 does not work: the stylesheets use v4 directives.
• A Node.js version your framework supports. The package itself supports Node 18 and newer. The guides below are built in CI on Node 24.

Dark mode and densityCopy Anchor Link

The page follows the operating system's light or dark setting with no setup and no JavaScript. To let people choose, wrap the app in ThemeProvider and read the choice with useTheme(); each guide shows how. Density (compact, comfortable, spacious) works the same way. See Theming for everything the theme can do.

How these guides stay correctCopy Anchor Link

Each framework guide shows the real files of a small app, not snippets written for the page. CI packs @azmr/ui into a tarball, installs it into each of those apps as a new project would, type-checks and builds them, and then checks the output: the Button is rendered, the colour tokens are there, and Tailwind generated the package's classes from the class lists the app imports. A change that breaks a guide fails the build, and the guide always shows the files that were tested.

Working on the packages themselvesCopy Anchor Link

To clone the repository and run the docs site locally, see Set up the monorepo.