Accessible React components you install as source.

What Vinyaas is

Vinyaas publishes a registry of independently installable UI primitives. Each item is a source file (or small set of files) plus the npm dependencies it needs. Documentation covers preview, CLI install, API, accessibility notes, and the exact source that lands in your project.

It is not a hosted design system you import from node_modules forever. After install, the components are yours.

Catalog and releases

The current catalog has 60 components. v0.1 ships 1 component (Button). v1.0.0 is the major production-focused release and adds 33 more. v1.5.0 adds 4 components. Components are composable, theme-aware in light and dark, and documented with production-oriented examples.

Docs pages include API reference, installation, usage and composition examples, accessibility notes, and syntax-highlighted source with TSX/JSX switching, line numbers on registry source, and expandable long snippets. Installation commands stay bash. Search opens with Cmd/Ctrl+K.

Why it exists

Product UI usually needs local edits: spacing, copy, variants, and domain-specific behavior. Copy-paste gists drift. Locked packages fight customization. Vinyaas keeps a shared starting point while leaving the source in your tree so you can change it without forking a library.

Core philosophy

How the components work

Components are React functions styled with Tailwind utilities and cn for class merging. Props stay close to the underlying element. Composition is ordinary JSX: labels wrap fields, buttons sit in forms, dialogs host other primitives.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function SaveName() {
  return (
    <form className="grid gap-3">
      <div className="grid gap-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" defaultValue="Ada Lovelace" />
      </div>
      <Button type="submit">Save</Button>
    </form>
  );
}

Installation and usage flow

1. Create a supported React, Next.js, or Vite project with Tailwind CSS v4.
2. Run vinyaas init to configure theme CSS, aliases, components.json, and utilities. Init is idempotent. Optionally run vinyaas doctor to validate the setup.
3. Discover components with vinyaas list, search, and info when you need the catalog from the terminal. Filter by --category when useful.
4. Install one or more components with vinyaas add …, or a category with vinyaas add --category …. Files land at components/ui/<name>/index.tsx.
5. Import from your local path (for example @/components/ui/button) and compose like any other React code.

npx vinyaas init

npx vinyaas add button

Full steps live on the Installation page, including multi-component adds, skip/force behavior, discovery commands, categories, and doctor. The CLI page is the detailed command reference.

Customization

Change class names, variants, and structure in the installed files. Theme colors come from CSS variables in your stylesheet; update those tokens once and every component that uses semantic utilities follows. There is no patch layer and no private API to keep in sync.

Registry and CLI model

The public registry exposes one JSON item per component. That item is the source of truth for file contents and dependencies. components.json is local project configuration: aliases, style, and paths. The CLI reads both to write files into your app.

See components.json and the CLI docs for details.

Component composition

Prefer small primitives over monolithic widgets. A settings page is usually Label + Input + Switch + Button. Dialogs, dropdowns, and command palettes host other components rather than re-implementing them. The homepage playground shows these combinations in realistic product surfaces.

Accessibility and design principles

• Visible focus rings for keyboard users.
• Labels associated with controls; never rely on placeholder alone.
• Disabled state stays in the accessibility tree when native.
• Color contrast comes from theme tokens; destructive actions use the destructive palette.
• Motion respects prefers-reduced-motion where animation exists.