Shavin Studio

Assemble full screens without writing layout code.

A visual canvas for composing production interfaces from @shavin/ui primitives. Every block you drop already obeys the token engine, concentric radius math, and accessibility contract — so what you arrange is what ships.

Launch Studio Browse block library

What you arrange is what ships

shavin-studio

Live canvas

Button

Badge

TextField

The canvas renders actual @shavin/ui primitives — theme changes propagate instantly, and what you arrange is exactly what ships.

studio.shavin.cc

The Workflow

From blank canvas to production JSX.

Four steps. No design-to-code translation layer, no handoff friction, no token drift.

01Drag blocks onto canvas

Pick from 54+ pre-built, token-compliant blocks — heroes, pricing tables, dashboards, auth flows. Every block already satisfies the concentric radius contract.

02Preview live in real time

What you arrange is what ships. The canvas renders actual @shavin/ui primitives, not static mockups — theme changes propagate instantly.

03Nest and compose sections

Stack blocks into full-page layouts. The builder engine enforces spatial rhythm, spacing zones, and container/control radius separation automatically.

04Export clean JSX

Hand off 100% token-compliant @shavin/ui JSX straight into your repository. No inline styles, no hardcoded colors, no manual cleanup.

What Studio gives you out of the box.

The visual builder is powered by @shavin/builder-engine — the same engine that enforces token purity in your codebase.

54+blocks

54+ Block Library

Community and Pro tier blocks spanning heroes, features, pricing, auth, dashboards, navigation, and content sections.

24accents

Live Theme Engine

Switch accent colors, gray scales, radius presets, and scaling on the canvas. Every block re-renders with the active theme tokens.

100%compliant

Token Compliance Built-in

The builder engine rejects non-token colors, literal radii, and broken contrast before they reach your codebase.

0cleanup

One-Click Export

Generate production-ready TSX files with proper imports, CVA variants, and semantic token utilities — paste directly into your app.

Clean Export

The JSX you get is already production-ready.

No inline styles. No hardcoded hex values. No literal radii. Just semantic tokens, CVA variants, and proper imports.

HeroBlock.tsx

100% token-compliant

// Exported from Shavin Studio — 100% token-compliant
import { Card, Badge, Button, Heading, Text } from "@shavin/ui";
import { ArrowRight } from "lucide-react";

export function HeroBlock() {
  return (
    <Card className="mx-auto max-w-2xl p-8 text-center">
      <Badge color="accent" size="sm">New Release</Badge>
      <Heading as="h1" size="3xl" className="mt-4 text-fg">
        Ship faster with tokens
      </Heading>
      <Text color="subtle" size="md" className="mt-3 max-w-xl">
        Every block from Studio is token-pure by construction.
      </Text>
      <Button size="lg" className="mt-6">
        Get started <ArrowRight className="ml-2 h-4 w-4" />
      </Button>
    </Card>
  );
}