@verta/ui (0.2.0)
Installation
@verta:registry=npm install @verta/ui@0.2.0"@verta/ui": "0.2.0"About this package
@verta/ui
The shared Verta component library — shadcn-style components built on Radix
primitives + CVA variants + cn (clsx + tailwind-merge), themed entirely
from @verta/tokens. One library instead of every repo keeping its
own src/components/ui.
Components
Button (primary/secondary/ghost/danger/accent · md/sm/icon), Card, Table,
Input / Textarea / Label / Hint / Field, Select, Dialog, Tabs, Badge / Pill,
StatusDot, Toast, AppShell (frosted sticky header + nav), ThemeToggle. Icons via
lucide-react.
Install (package model)
pnpm add @verta/ui # pulls @verta/tokens; requires the @verta registry in .npmrc
Consumer entry CSS (Tailwind v4):
@import "@verta/ui/styles.css"; /* = @verta/tokens fonts + tokens + theme */
@import "tailwindcss";
@source "../node_modules/@verta/ui/dist"; /* scan component classes */
import { Button, Card, ThemeToggle } from "@verta/ui";
Registry model (own the source)
Components are also emitted as a shadcn-style registry under dist/registry/
(@verta/ui/registry), so you can copy a component's source into your repo and
own it instead of importing the package.
Develop
pnpm --filter @verta/ui build # tsup (ESM + d.ts) + styles + registry
pnpm --filter @verta/ui test # Vitest + Testing Library (jsdom)
pnpm --filter @verta/ui typecheck
Gallery (Ladle)
The live component catalogue runs on Ladle — a Vite-native
Storybook alternative. Stories are co-located next to each component
(src/components/<name>.stories.tsx); the whole gallery is wired in .ladle/.
pnpm --filter @verta/ui ladle # dev server → http://localhost:61000
pnpm --filter @verta/ui ladle:build # static build → ladle-dist/ (deployable to nginx/preview)
The gallery reads @verta/tokens straight from workspace source (aliased in
.ladle/vite.config.ts), so it runs on a clean checkout with no prior build.
The toolbar theme toggle (bottom-left) drives the .light class via
@verta/tokens — every component is shown in both dark and light. Key props
(variant, size, disabled, tone, status) are exposed as interactive
controls on each component's Playground story.
Add a story for a new component
Drop a *.stories.tsx next to the component — no other wiring needed:
// src/components/widget.stories.tsx
import type { Story, StoryDefault } from "@ladle/react";
import { Widget, type WidgetProps } from "./widget";
export default { title: "Components / Widget" } satisfies StoryDefault;
export const Playground: Story<{ variant: WidgetProps["variant"] }> = ({ variant }) => (
<Widget variant={variant} />
);
Playground.args = { variant: "primary" };
Playground.argTypes = {
variant: { options: ["primary", "secondary"], control: { type: "select" } },
};
Ladle does not infer controls from TS types — declare them via args /
argTypes. For components that portal into document.body (Dialog, Select,
Toast), add meta = { iframed: true } so the overlay doesn't cover the Ladle
navigation. *.stories.tsx files are excluded from the published bundle and the
shadcn registry.
Dependencies
Dependencies
| ID | Version |
|---|---|
| @radix-ui/react-avatar | ^1.1.11 |
| @radix-ui/react-checkbox | ^1.3.3 |
| @radix-ui/react-dialog | ^1.1.15 |
| @radix-ui/react-dropdown-menu | ^2.1.16 |
| @radix-ui/react-label | ^2.1.8 |
| @radix-ui/react-popover | ^1.1.15 |
| @radix-ui/react-select | ^2.2.6 |
| @radix-ui/react-slot | ^1.2.4 |
| @radix-ui/react-switch | ^1.2.6 |
| @radix-ui/react-tabs | ^1.1.13 |
| @radix-ui/react-toast | ^1.2.15 |
| @radix-ui/react-tooltip | ^1.2.8 |
| @verta/tokens | 0.2.0 |
| class-variance-authority | ^0.7.1 |
| clsx | ^2.1.1 |
| echarts | ^6.1.0 |
| lucide-react | ^1.17.0 |
| tailwind-merge | ^3.6.0 |
Development dependencies
| ID | Version |
|---|---|
| @ladle/react | ^5.1.1 |
| @tailwindcss/vite | ^4.1.13 |
| @testing-library/jest-dom | ^6.9.1 |
| @testing-library/react | ^16.3.2 |
| @testing-library/user-event | ^14.6.1 |
| @types/react | ^19.2.15 |
| @types/react-dom | ^19.2.3 |
| jsdom | ^29.1.1 |
| react | ^19.2.6 |
| react-dom | ^19.2.6 |
| tailwindcss | ^4.1.13 |
| tsup | ^8.5.1 |
| typescript | ^5.6.2 |
| vite | ^6.3.6 |
| vitest | ^2.1.3 |
Peer dependencies
| ID | Version |
|---|---|
| react | ^18 || ^19 |
| react-dom | ^18 || ^19 |