JSPM

  • Created
  • Published
  • Downloads 34
  • Score
    100M100P100Q61074F
  • License MIT

Accessible, themeable React UI components built on Radix UI and Tailwind CSS v4.

Package Exports

  • @adn-ui/react

Readme

@adn-ui/react

npm GitHub

The core component library for adn-ui — accessible, themeable React components built on Radix UI and Tailwind CSS v4.

Installation

npm install @adn-ui/react
# or
bun add @adn-ui/react

Setup

Import the stylesheet in your app entry point:

import "@adn-ui/react/styles";

Usage

import { Button, Dialog, Accordion } from "@adn-ui/react";

function App() {
  return (
    <Button variant="primary" size="md">
      Click me
    </Button>
  );
}

Components

30+ components across several categories:

  • Layout — Surface, Group, Separator, AspectRatio, ScrollArea
  • Forms — Button, Input, Textarea, Checkbox, RadioGroup, Select, Slider, Switch, Label, Field
  • Feedback — Alert, Badge, Progress, Skeleton, Tooltip
  • Overlay — Dialog, AlertDialog, Drawer, Popover, DropdownMenu, ContextMenu
  • Navigation — Accordion, Breadcrumb, Tabs, Collapsible
  • Data Display — Avatar, Card, Table, Toggle

Theming

Override CSS custom properties to customize the look:

:root {
  --primary: oklch(55% 0.25 150);
  --radius: 8px;
}

Supports light/dark mode via .dark class on <html>.

Development

# Build (watch mode)
bun run dev

# Production build
bun run build

# Storybook
bun run storybook

# Tests
bun run test

Exports

Export Description
@adn-ui/react All component exports
@adn-ui/react/styles Component CSS + default theme

Peer Dependencies

  • react >= 19.0.0
  • react-dom >= 19.0.0
  • tailwindcss >= 4.0.0

Author

awaidengithub.com/awaiden

License

MIT