Introduction

Learn about adn-ui, a shadcn-compatible component registry built on top of Base UI, React 19, and Tailwind CSS v4.

adn-ui is an open-source collection of accessible, styled, copy-and-paste UI components built for React 19 (framework agnostic), styled using Tailwind CSS v4 and OKLCH color design tokens.

Key Features

Base UI Powered

Built on top of @base-ui/react, offering accessible primitives with keyboard navigation and focus management.

Tailwind CSS v4 & OKLCH

Leverages Tailwind v4 CSS variables and OKLCH color spaces for dark mode and dynamic theme tokens.

Single-File Slots

Clean multi-file architecture with compound object exports, type safety, and tailwind-variants (tv()).

Copy & Paste Registry

Integrates with registry.json allowing quick component installation into your own codebase.

AI-Friendly JSDoc

Every component includes JSDoc @see annotations pointing directly to raw markdown docs (/llms.mdx/docs/...) for AI context.

Tech Stack

Framework: Framework Agnostic (React 19)
Primitives: @base-ui/react
Styling: Tailwind CSS v4
Variants: tailwind-variants (tv())

Next Steps

Check out the Usage guide to set up adn-ui in your project, or explore the Theming guide to customize design tokens.

Using the `@adn-ui` namespace (shadcn CLI)

You can install adn-ui components via the shadcn CLI using a namespace alias. First initialize shadcn, then configure the single canonical registry in components.json to point to ui.awaiden.com.

Initialize shadcn (run first):

npx shadcn@latest init

Default components.json (single canonical registry):

{
  "registries": { "@adn-ui": "https://ui.awaiden.com/r/{name}.json" }
}

Install with the CLI (no global install required):

npx shadcn@latest add @adn-ui/button

View the manifest before installing:

npx shadcn@latest view @adn-ui/button

Keep manifests private if they include internal resources. Use ui.awaiden.com as the single canonical registry source.