# Installation

How to install GIN Design components into your project.

> 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).



## Prerequisites [#prerequisites]

Your project needs **Tailwind CSS 4** and **shadcn** configured. If you're starting from scratch:

```bash
npx shadcn@latest init
```

Supports Next.js, Vite, Remix, Astro, and any other React framework.

## Install a Component [#install-a-component]

Pick a component from the sidebar and run the install command shown on its page:

<CommandBox className="mt-2" />

The component files are copied directly into your project — you own them completely and can customise as needed. Dependencies are installed automatically.

## Components, Elements, Blocks, Charts, and Icons [#components-elements-blocks-charts-and-icons]

The registry has five types of installable items, each with its own naming convention:

| Type      | Prefix   | Example        | Description                                |
| --------- | -------- | -------------- | ------------------------------------------ |
| Component | *(none)* | `button`       | UI primitives — buttons, inputs, dialogs   |
| Element   | `e-`     | `e-data-table` | Data-driven components — tables, calendars |
| Block     | `b-`     | `b-login`      | Pre-assembled page sections                |
| Chart     | `c-`     | `c-bar`        | Data visualization components              |
| Icons     | `i-`     | `i-social`     | Icon sets beyond the default Lucide set    |

```bash
# Component
npx shadcn add https://gin-design.vercel.app/r/button

# Element
npx shadcn add https://gin-design.vercel.app/r/e-data-table

# Block
npx shadcn add https://gin-design.vercel.app/r/b-login

# Chart
npx shadcn add https://gin-design.vercel.app/r/new-chart

# Icons
npx shadcn add https://gin-design.vercel.app/r/new-icon
```

## Install Multiple [#install-multiple]

You can install several items at once:

```bash
npx shadcn add https://gin-design.vercel.app/r/button https://gin-design.vercel.app/r/input https://gin-design.vercel.app/r/dialog
```

## Manual Installation [#manual-installation]

If you prefer to copy the code yourself, every component page has a **Manual** tab with the full source ready to paste. Copy it into `components/ui/` and install the listed dependencies manually.

## After Installing [#after-installing]

Components are added to `components/ui/` by default. Import and use them directly:

```tsx
import { Button } from "@/components/ui/button";

export function Example() {
  return <Button variant="default">Click me</Button>;
}
```

Elements and blocks follow the same pattern:

```tsx
import { DataTable } from "@/components/ui/e-data-table";
```

## CSS Variables [#css-variables]

All components use CSS variables for theming. Your `globals.css` needs the standard shadcn token set — `shadcn init` adds these automatically. If you're adding GIN Design to an existing project, make sure these variables are defined:

```css
:root {
  --background: ...;
  --foreground: ...;
  --primary: ...;
  --primary-foreground: ...;
  --secondary: ...;
  --secondary-foreground: ...;
  --muted: ...;
  --muted-foreground: ...;
  --accent: ...;
  --accent-foreground: ...;
  --destructive: ...;
  --border: ...;
  --input: ...;
  --ring: ...;
  --radius: ...;
}
```

## Dark Mode [#dark-mode]

Components support dark mode via CSS variable overrides. Use [next-themes](https://github.com/pacocoursey/next-themes) to handle theme switching:

```bash
npm install next-themes
```

Wrap your app in a `ThemeProvider` and add `suppressHydrationWarning` to the `<html>` tag:

```tsx
import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}
```

## Environment Variables [#environment-variables]

Some features require environment variables in your `.env.local`:

```bash
# Required for Figma integration and Figma Diff
FIGMA_ACCESS_TOKEN=your_figma_token_here

# Required for Discord sharing
DISCORD_WEBHOOK_URL=your_webhook_url_here

# Optional — set your production URL for correct absolute URLs
SITE_URL=https://your-domain.com
```

Get your Figma access token from **Figma → Account Settings → Personal access tokens**.
Get your Discord webhook URL from **Discord channel settings → Integrations → Webhooks**.