Vinyaas

Source you can own

Install components as files — not black-box packages — then rewrite them like the rest of your app.

The typeset playground exists so measure and leading feel inevitable before you commit tokens to globals.css.

Sarang Kumar

Maintainer · Vinyaas

Building a registry you can fork without fighting the framework — Tailwind utilities first, Radix-free primitives where possible.

Ships docs, CLI, and the new-york style catalog.

Relative luminance

For body text on a solid surface, aim for:

Large headings may use 3:1. Semantic tokens should already clear AA when you stick to foreground on background.

On shipping source

If you cannot delete half the file, it was never really yours.

What vinyaas init promises

1. Theme tokens land in your stylesheet once.
2. Aliases resolve @/components/ui/….
3. Re-running init stays idempotent.

Init is a handshake with Tailwind v4 — not a second design system.

Before you merge

• ☐Phone width: one column, no horizontal scroll
• ☐Copy code sits bottom-right on phones
• ☐Charts clip inside their cards
• ☐No Calendar / missing registry fakes

Playgrounds are discovery tools¹ — they preview tokens, they do not replace vinyaas add.

¹ Same idea as the homepage masonry: compositions over isolated knobs.

Themes & Typeset land in v1.1

Playgrounds for presets and Markdown rhythm — still not registry components.

Discover them from the navbar, then copy CSS when a combination feels right.

Muscle memory

Open search with ⌘K, then install what you need:

npx vinyaas init
npx vinyaas add button dialog chart
npx vinyaas search drawer --json

Copy-ready CSS

Shuffle until the page sings, then paste:

:root {
  --typeset-measure: 70ch;
  --typeset-heading: Georgia, ui-serif, serif;
  --typeset-body: ui-sans-serif, system-ui, sans-serif;
  --typeset-leading: 1.6;
}

Vocabulary

Preset

A curated ThemeConfig — not a free-form color picker.

Measure

Line length in ch for long-form Markdown.

Registry item

Something vinyaas add can install. Playgrounds are not items.

GET /r/new-york/button.json

Registry payloads are plain JSON. Docs playgrounds never appear in that index.

{
  "name": "button",
  "type": "registry:ui",
  "files": [{ "path": "ui/button/index.tsx" }]
}

Colophon

Set in system UI fonts by default. Shuffle to Georgia for editorial drafts. Mono falls back to Menlo / Consolas.

Built with the Vinyaas docs app · Tailwind CSS v4 · no Calendar component required.