Introduction

GIN Design is a component library for teams building with multiple brands — built by Nuno Santos.

The Registry

Components are not an npm package. When you install a component, the shadcn CLI copies the source file directly into your project — you own the code and can change anything, without waiting for an upstream release.

npmpnpmviteyarn
$ npx shadcn add https://gin-design.vercel.app/r/button
Copy

The /r/ path is the registry endpoint — a shadcn convention. The CLI fetches https://gin-design.vercel.app/r/button.json, reads the component manifest (source files, dependencies, install targets), and copies everything into your project. You never interact with that URL directly; it's what the CLI calls behind the scenes.

Every component page shows the exact command to install it. Pick what you need, leave what you don't.

Figma Integration

Each component can be linked to a Figma frame. When a Figma URL is declared on a component page, a View in Figma shortcut appears alongside the component preview — opening the exact frame or section in your design file.

Beyond linking, the library includes a Figma Diff feature: connect your Figma file via API token and get a structured diff of what changed in your designs since the last sync — useful for keeping code and design in step when the design evolves.

To use it, set your Figma access token:

CopyFIGMA_ACCESS_TOKEN=your_token_here

AI Integration

Every component page is built to work as AI context, not just documentation.

Copy Page

The Copy Page button fetches the full page content as markdown and copies it to your clipboard. Paste it directly into Claude, ChatGPT, or any local model as structured context for the component you're working with.

The dropdown extends this into one-click actions:

• Open in Claude / Open in ChatGPT — opens the AI tool with a pre-built prompt that points to the page's markdown URL and tells the model which brand theme is active. The model reads the full documentation before you type a single word.
• Open in v0 — opens the component in v0's sandbox using the registry JSON, with CSS variables pre-loaded so the preview renders correctly in your brand's colours.
• View as Markdown — opens the raw .md version of the page in a new tab. Every docs page is available at its .md URL (/docs/components/button.md) for programmatic access, MCP tools, or custom AI pipelines.
• Open in JSON — opens the raw registry entry, useful for inspecting what gets installed or feeding it to an agent.

Specs Block

Every component page ends with a ## Specs section — a structured block designed to be pasted into any AI prompt. It contains:

• Component name, file path, install target, and dependencies
• Full CSS design tokens (light and dark mode values)
• Variant and size reference with their exact Tailwind classes
• Prop definitions with types and defaults
• Code conventions: cn, cva, Slot, focus ring, disabled state

When you open a page in Claude or ChatGPT via the toolbar, the Specs block is already included — the model gets exact token values and variant names, not generic shadcn assumptions.

LLM Index

The library exposes two machine-readable endpoints for AI crawlers and custom pipelines:

• /llms.txt — lists all documented pages
• /llms-full.txt — includes the full markdown content of every page in one file

These follow the llms.txt convention and make the entire library indexable by any tool that supports it.

Themes

Components are built on a base theme (Mint) and support multiple brand themes — each a set of CSS variable overrides. Available themes are listed in the Themes section of the sidebar.

What's Inside

Components

UI primitives — buttons, inputs, dialogs, and more. Built on Radix UI for accessibility, styled with Tailwind CSS 4.

Elements

Complex, data-driven components: data tables, calendars, auth forms. Designed to drop into real product pages with minimal setup.

Blocks

Pre-assembled page sections: login, signup, featured layouts. Built from the component library and ready to adapt.

Copy Page and Share

Each component page has two toolbar buttons:

Copy Page copies the full page content as markdown to your clipboard — ready to paste into any AI tool as context. The dropdown also lets you open the component directly in Claude, ChatGPT, or v0, or jump to the Figma frame, the raw JSON registry entry, or the markdown URL.

Share (the icon button) copies the page link, lets you copy the raw registry JSON, or posts the component directly to your team's Discord channel.

FAQ