Prerequisites
Your project needs Tailwind CSS 4 and shadcn configured. If you're starting from scratch:
Supports Next.js, Vite, Remix, Astro, and any other React framework.
Install a Component
Pick a component from the sidebar and run the install command shown on its page:
GIN Design Plugin$ npx shadcn add https://gin-design.vercel.app/accordionThe 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
The registry has five types of installable items, each with its own naming convention:
# 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-iconInstall Multiple
You can install several items at once:
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
Components are added to components/ui/ by default. Import and use them directly:
import { Button } from "@/components/ui/button";
export function Example() {
return <Button variant="default">Click me</Button>;
}Elements and blocks follow the same pattern:
import { DataTable } from "@/components/ui/e-data-table";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:
:root {
--background: ...;
--foreground: ...;
--primary: ...;
--primary-foreground: ...;
--secondary: ...;
--secondary-foreground: ...;
--muted: ...;
--muted-foreground: ...;
--accent: ...;
--accent-foreground: ...;
--destructive: ...;
--border: ...;
--input: ...;
--ring: ...;
--radius: ...;
}Dark Mode
Components support dark mode via CSS variable overrides. Use next-themes to handle theme switching:
Wrap your app in a ThemeProvider and add suppressHydrationWarning to the <html> tag:
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
Some features require environment variables in your .env.local:
# 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.comGet your Figma access token from Figma → Account Settings → Personal access tokens. Get your Discord webhook URL from Discord channel settings → Integrations → Webhooks.