@vagarylabs/ui

The shared frontend system used across Vagary Labs products and integrations: primitives, design tokens, and layout components built on React 19, Tailwind CSS 4 and Radix UI.

MIT licensed. Trademarks are not included in that grant — see LICENSE.

Install

npm install @vagarylabs/ui

react, react-dom and tailwindcss are peer dependencies you already have in a React app.

motion is an OPTIONAL peer. Nothing in the package root imports it, so install it only if you use the @vagarylabs/ui/motion entry point:

npm install motion

Use

import { Button, Card, StatusPill } from '@vagarylabs/ui';

export function Example() {
  return (
    <Card>
      <StatusPill status="healthy" />
      <Button variant="primary">Continue</Button>
    </Card>
  );
}

Add the stylesheet after Tailwind in your own CSS, so the tokens and component styles are present and Tailwind scans this package for the utility classes it uses:

@import "tailwindcss";
@import "@vagarylabs/ui/styles.css";

Entry points

| Import | Contents | |---|---| | @vagarylabs/ui | components and hooks | | @vagarylabs/ui/motion | motion presets, Reveal, Presence, the reduced-motion config, and the components that animate — needs the optional motion peer | | @vagarylabs/ui/tokens | brand token presets and applyBrandTokens | | @vagarylabs/ui/cn | the cn class-merge helper | | @vagarylabs/ui/styles.css | design tokens and component styles | | @vagarylabs/ui/registry.json | the component registry, for copying source instead of importing |

Animated components

motion is an optional peer: nothing in the root entry point reaches it, so you only install it if you import @vagarylabs/ui/motion.

npm install motion

import { AnimatedOTPInput } from '@vagarylabs/ui/motion';

Every animated component honours prefers-reduced-motion.

Copy the source instead

Some teams would rather own the file than import it. registry.json is a shadcn registry whose items carry the component source inline as files[].content, so you can copy a component into your own codebase and change it freely — it is MIT either way. llms.txt is the same catalogue in plain text, for agents.

Each item's meta records where the component came from: whether it was written here or adapted from an upstream project, and for adapted ones the upstream URL, the exact commit, its licence and what we changed. THIRD_PARTY_NOTICES.md carries the upstream licence texts.

Versioning

Pre-1.0: the public surface is still settling, and minor versions may change it. Each release records its provenance in provenance.json and third-party attribution in THIRD_PARTY_NOTICES.md.