Build Anantya products with one design system

Packages

Apps install @anantya/uix and @anantya/icons. The other two come with them.

• @anantya/uix

  Every component, the hooks and helpers, and the theme.

• @anantya/icons

  SVG icons as React components, one export per icon.

• @anantya/tokens

  Colors, type, spacing and motion for web and native. Apps use them through the theme in @anantya/uix.

• @anantya/core

  Hooks shared by web and native, with no styling.

What you can count on

• Accessible by default

  Every component is checked with the keyboard and with axe, in light and dark, against WCAG 2.2 AA.

• Built on the browser

  Dialogs use the browser's own dialog element instead of an extra library, so there is less code to load.

• Only what you import

  Each component is its own entry with a size budget, so your bundle gets only what you use.

• Light and dark

  Every color is a token with a light and a dark value, and the Theme Provider remembers the reader's choice.

Quick start

In a Next.js app with Tailwind CSS v4, once you have access to the UIX registry. Installation covers access and each step in full.

1. Install the packages:

   pnpm add @anantya/uix @anantya/icons

2. Import the theme after Tailwind, in the CSS file your root layout imports:

   @import "tailwindcss";
   @import "@anantya/uix/theme.css";

3. Wrap the app in Theme Provider, in the root layout:

   import { ThemeProvider } from "@anantya/uix";
   
   <body>
     <ThemeProvider>{children}</ThemeProvider>
   </body>

4. Use a component:

   import { Button } from "@anantya/uix";
   
   export function SaveButton() {
     return <Button>Save changes</Button>;
   }

Status badges

Every component, foundation, hook and utility page shows one of these beside its title, with the version it first shipped in.

• Beta

  Released and ready for your app. Until UIX 1.0.0, a minor release can still change its API, with migration steps in the release notes.

• Stable

  From UIX 1.0.0. Its API changes only in a major release, with migration steps in the release notes.

• Deprecated

  Still works for at least one more minor release, then is removed. Its page links to what replaces it.

Next steps

• ComponentsEvery UIX component by kind, each with a live preview and a link to its page once written.
• IconsEvery icon in the set by name, ready to import as a React component.
• Release notesEvery release of every UIX package, newest first, with its changes and the command to update.