Desktop only

Hex Studio is desktop-only for v0. Open this page on a screen ≥ 768px to use the editor. URL state still loads — you're welcome to bookmark, share, or paste into Claude — but the sidebar controls aren't laid out for phones yet.

Hex UIv1Studio
← Back to editor
In scope

Nothing selected yet. Open the editor's Components tab and toggle In scope on the components your app needs.

Items here drive the install line in the LLM payload (pnpm dlx @hex-core/cli add ...).

Hex UIv1Studio

Copy for LLM

Paste the markdown below into Claude, ChatGPT, or any LLM. It already includes the resolved globals.css, the Tailwind config, the install line, and a project-context prompt — the model writes your files from this single blob.

For agent workflows: @hex-core/mcp serves this same blob via the emit_app_context tool, and @hex-core/cli reads the install line directly.

markdown
# App context — Hex Core

Generated by `emit_app_context`. Paste this into your LLM chat as project context.

## Theme

**Default** (`default`) — A modern, elegant minimalism — restrained cool-hue grayscale (~222 family) with a graphite primary and tight 0.375rem radius. Designed to recede so content leads; the cool slate carries identity across light + dark.

| Token | Value |
|---|---|
| `--background` | `210 20% 98%` |
| `--foreground` | `222 30% 11%` |
| `--primary` | `222 25% 18%` |
| `--primary-foreground` | `0 0% 98%` |
| `--destructive` | `0 65% 43%` |
| `--radius` | `0.375rem` |

_Values are raw — wrap in `hsl(...)` when consuming via Tailwind v4 `@theme`._

## globals.css

Replace your `app/globals.css` (or paste this into it) so every component reads the tokens above.

```css
@layer base {
  :root {
    --background: 210 20% 98%;
    --foreground: 222 30% 11%;
    --card: 210 20% 98%;
    --card-foreground: 222 30% 11%;
    --popover: 210 20% 98%;
    --popover-foreground: 222 30% 11%;
    --primary: 222 25% 18%;
    --primary-foreground: 0 0% 98%;
    --secondary: 222 5% 95.9%;
    --secondary-foreground: 240 10% 3.9%;
    --muted: 222 5% 95.9%;
    --muted-foreground: 222 8% 38%;
    --accent: 222 5% 95.9%;
    --accent-foreground: 240 10% 3.9%;
    --destructive: 0 65% 43%;
    --destructive-foreground: 0 0% 98%;
    --border: 222 8% 90%;
    --input: 222 8% 90%;
    --ring: 222 25% 18%;
    --radius: 0.375rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 50%;
    --chart-4: 43 74% 49%;
    --chart-5: 280 65% 60%;
    --chart-6: 340 75% 55%;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --gap-xs: 0.25rem;
    --gap-sm: 0.5rem;
    --gap-md: 1rem;
    --gap-lg: 1.5rem;
    --gap-xl: 2rem;
    --container-sm: 33rem;
    --container-md: 40rem;
    --container-lg: 50rem;
    --container-xl: 66rem;
    --control-height-sm: 2.25rem;
    --control-height-md: 2.5rem;
    --control-height-lg: 2.75rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
  }

  .dark {
    --background: 210 15% 2%;
    --foreground: 222 22.5% 89%;
    --card: 222 12% 14%;
    --popover: 222 12% 14%;
    --primary: 222 30% 60%;
    --secondary: 222 8% 12%;
    --muted: 222 8% 12%;
    --accent: 222 8% 12%;
    --destructive: 0 48.8% 68%;
    --border: 222 12% 24%;
    --input: 222 12% 24%;
    --ring: 222 30% 60%;
    --radius: 0.375rem;
    --card-foreground: 222 22.5% 89%;
    --popover-foreground: 222 22.5% 89%;
    --primary-foreground: 210 15% 8%;
    --secondary-foreground: 222 22.5% 89%;
    --muted-foreground: 222 8% 65%;
    --accent-foreground: 222 22.5% 89%;
    --destructive-foreground: 0 0% 8%;
    --chart-1: 12 76% 65%;
    --chart-2: 173 58% 55%;
    --chart-3: 197 37% 60%;
    --chart-4: 43 74% 60%;
    --chart-5: 280 65% 70%;
    --chart-6: 340 75% 65%;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --gap-xs: 0.25rem;
    --gap-sm: 0.5rem;
    --gap-md: 1rem;
    --gap-lg: 1.5rem;
    --gap-xl: 2rem;
    --container-sm: 33rem;
    --container-md: 40rem;
    --container-lg: 50rem;
    --container-xl: 66rem;
    --control-height-sm: 2.25rem;
    --control-height-md: 2.5rem;
    --control-height-lg: 2.75rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
  }
}
```

## tailwind.config.ts

Add to your `theme.extend` so utility classes like `p-4` resolve to your tokens:

```ts
export default {
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        card: "hsl(var(--card))",
        "card-foreground": "hsl(var(--card-foreground))",
        popover: "hsl(var(--popover))",
        "popover-foreground": "hsl(var(--popover-foreground))",
        primary: "hsl(var(--primary))",
        "primary-foreground": "hsl(var(--primary-foreground))",
        secondary: "hsl(var(--secondary))",
        "secondary-foreground": "hsl(var(--secondary-foreground))",
        muted: "hsl(var(--muted))",
        "muted-foreground": "hsl(var(--muted-foreground))",
        accent: "hsl(var(--accent))",
        "accent-foreground": "hsl(var(--accent-foreground))",
        destructive: "hsl(var(--destructive))",
        "destructive-foreground": "hsl(var(--destructive-foreground))",
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        "chart-1": "hsl(var(--chart-1))",
        "chart-2": "hsl(var(--chart-2))",
        "chart-3": "hsl(var(--chart-3))",
        "chart-4": "hsl(var(--chart-4))",
        "chart-5": "hsl(var(--chart-5))",
        "chart-6": "hsl(var(--chart-6))",
      },
      borderRadius: {
        radius: "var(--radius)",
      },
      spacing: {
        "1": "var(--space-1)",
        "2": "var(--space-2)",
        "3": "var(--space-3)",
        "4": "var(--space-4)",
        "6": "var(--space-6)",
        "8": "var(--space-8)",
        "12": "var(--space-12)",
        "16": "var(--space-16)",
        xs: "var(--gap-xs)",
        sm: "var(--gap-sm)",
        md: "var(--gap-md)",
        lg: "var(--gap-lg)",
        xl: "var(--gap-xl)",
      },
      fontSize: {
        xs: "var(--text-xs)",
        sm: "var(--text-sm)",
        base: "var(--text-base)",
        lg: "var(--text-lg)",
        xl: "var(--text-xl)",
        "2xl": "var(--text-2xl)",
        "3xl": "var(--text-3xl)",
      },
      transitionDuration: {
        fast: "var(--duration-fast)",
        normal: "var(--duration-normal)",
        slow: "var(--duration-slow)",
      },
      height: {
        "container-sm": "var(--container-sm)",
        "container-md": "var(--container-md)",
        "container-lg": "var(--container-lg)",
        "container-xl": "var(--container-xl)",
        "height-sm": "var(--control-height-sm)",
        "height-md": "var(--control-height-md)",
        "height-lg": "var(--control-height-lg)",
      },
    },
  },
};
```

## Components (0)

## Install

```bash
npx @hex-core/cli@latest init
```

## Context prompt

You are building a Next.js 16 (App Router, Turbopack) app using @hex-core components.

Rules you must follow:

1. Use the exact tokens defined in `globals.css` above. Do not introduce new colors or spacing values that aren't in the token set.
2. Use `@hex-core/components` imports for all UI primitives — never re-implement Button / Card / Dialog / etc. in plain HTML.
3. For layout, prefer the layout primitives (`Stack`, `Cluster`, `Container`, `Grid`); fall back to Tailwind utilities mapped to spacing tokens (`p-4`, `gap-2`, etc.) when a primitive isn't a fit.
4. Honor the AI guidance in each component's `.schema.ts` — `whenToUse`, `whenNotToUse`, `commonMistakes`, `accessibilityNotes`.
5. Default to React Server Components; only add `"use client"` when needed (event handlers, hooks, browser APIs).
6. All interactive elements get `transition-all duration-normal ease-out` and `focus-visible:ring-2`.

Components in scope for this app: (none selected — pull components on demand via `npx @hex-core/cli@latest add <slug>`).

Now: <your ask here, e.g. "build me a pricing page with three tiers">.

## Packages

- `@hex-core/components` — `pnpm add @hex-core/components` — 164 Radix + CVA components incl. layout primitives + ColorPicker, Tailwind v4 entry.
- `@hex-core/tokens` — `pnpm add @hex-core/tokens` — HSL design tokens, theme presets, and CSS/Tailwind transformers.
- `@hex-core/themes` — `pnpm add @hex-core/themes` — Premium theme catalog — midnight, ember, and future presets.
- `@hex-core/registry` — `pnpm add @hex-core/registry` — Zod schemas + TypeScript types for components, themes, and recipes.
- `@hex-core/payload` — `pnpm add @hex-core/payload` — Pure-function builders for the canonical LLM context markdown.
- `@hex-core/cli` — `pnpm dlx @hex-core/cli init` — The hex binary — init, add, list, theme apply, recipe add.
- `@hex-core/mcp` — `pnpm dlx @hex-core/mcp` — Stdio MCP server: emit_app_context, emit_figma_tokens, resolve_spec, and more.
- `@hex-core/preview` — `pnpm add @hex-core/preview` — DemoSurface wrapper for showcasing components on flat-white pages.