React component library for building Alien miniapps. Ships accessible, themeable UI primitives with tree-shakeable ESM + CJS output.
Browse every component and its variants in the live Storybook:
📚 https://main.dlgfhi9w9fg6u.amplifyapp.com
bun add @alien-id/ui-kit-react
# or
npm install @alien-id/ui-kit-reactImport styles once in your app entry:
import "@alien-id/ui-kit-react/styles.css";| Component | Description |
|---|---|
| Buttons | Primary, Secondary, Tertiary, and Tinted variants |
| Input | Basic text input |
| FloatingLabelInput | Input with animated floating label |
| Textarea | Accessible textarea with character counter and scroll fade |
| BottomSheet | Draggable bottom sheet built on vaul-base |
| PriceChart | Interactive area chart with period selection (separate subpath — see below) |
Imported from a separate subpath so the rest of the kit stays importable in any environment:
import { PriceChart } from "@alien-id/ui-kit-react/chart";
import "@alien-id/ui-kit-react/chart.css";Its @unovis dependency uses extensionless directory imports that Node's strict ESM rejects, so the chart must be consumed through a bundler (Vite, webpack, Next, esbuild) — raw Node ESM / non-transpiled SSR is unsupported. Quarantining it here keeps the main entry safe to import everywhere.
Theming is driven by CSS custom properties. See styles/global.css for the full list of available variables.
bun install
bun run storybook # run Storybook locally at :6006
bun run test # run the Vitest suite
bun run build # build ESM + CJS + styles