# Introduction A component library for teams building with multiple brands — registry-based, Figma-connected, and built for AI workflows. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). **GIN Design** is a component library for teams building with multiple brands — built by [Nuno Santos](https://github.com/nunosantoswebdesigner). ## The Registry [#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. ```bash npx shadcn add https://gin-design.vercel.app/r/button ``` 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 [#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: ```bash FIGMA_ACCESS_TOKEN=your_token_here ``` ## AI Integration [#ai-integration] Every component page is built to work as AI context, not just documentation. ### Copy Page [#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 [#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 [#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](https://llmstxt.org) convention and make the entire library indexable by any tool that supports it. ## Themes [#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](/docs/themes) section of the sidebar. ## What's Inside [#whats-inside] ### Components [#components] UI primitives — buttons, inputs, dialogs, and more. Built on Radix UI for accessibility, styled with Tailwind CSS 4. ### Elements [#elements] Complex, data-driven components: data tables, calendars, auth forms. Designed to drop into real product pages with minimal setup. ### Blocks [#blocks] Pre-assembled page sections: login, signup, featured layouts. Built from the component library and ready to adapt. ## Copy Page and Share [#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 [#faq] Why copy/paste instead of an npm package? Packages version-lock you and make customisation a fight. The shadcn approach copies the source directly into your project — you own it, you control it, and you can change anything without waiting for an upstream update or opening a PR. How do brand themes work? Each brand theme is a CSS variable override. The base component (e.g. Button in Mint) uses variables like `--primary` and `--radius`. A brand theme redefines those variables — sharp red for Berries, soft warm brown for Cinnamon — and the component adapts automatically. No code duplication. Can I use this in multiple projects? Yes — that's the point. Install the same component across every project under your brand umbrella. Each project gets its own copy that inherits the brand theme and can be customised further from there. Which frameworks are supported? Any React framework: Next.js, Vite, Remix, Astro, and others. The components are plain React + Tailwind — no framework-specific assumptions.