# ============================================================
# COPY THIS AND PASTE IN ANY AI TOOL
# ============================================================

# GIN Design

> GIN Design is a custom component library and shadcn registry built by Nuno Santos. It ships base components, data-driven elements (e- prefix), pre-assembled blocks (b- prefix), charts (c- prefix), and icon sets (i- prefix) — all copy-owned via npx shadcn add. Apply brand themes through CSS variable overrides, compare tokens against Figma with the built-in diff tool, and share to Discord with one click. Built with Next.js, React, Radix UI, and Tailwind CSS. Use this index to discover the available documentation pages, markdown mirrors, and registry resources before browsing.

## Docs

- Get Started
  - [Introduction](https://www.gindesign.online/docs.md): A component library for teams building with multiple brands — registry-based, Figma-connected, and built for AI workflows.
  - [Installation](https://www.gindesign.online/docs/installation.md)
  - [Documentation](https://www.gindesign.online/docs/documentation.md)
  - [Libraries](https://www.gindesign.online/docs/libraries.md)
  - [Themes](https://www.gindesign.online/docs/themes.md)
- Components
  - [Components](https://www.gindesign.online/docs/components.md): Browse the components available in this registry.
  - [Accordion](https://www.gindesign.online/docs/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
  - [Alert](https://www.gindesign.online/docs/components/alert.md): Displays a callout for user attention with support for icons, titles, and descriptions.
  - [Alert Dialog](https://www.gindesign.online/docs/components/alert-dialog.md): A modal dialog that interrupts the user with important content and requires a response before continuing.
  - [Aspect Ratio](https://www.gindesign.online/docs/components/aspect-ratio.md): Displays content within a desired ratio, preventing layout shift as media loads.
  - [Attachment](https://www.gindesign.online/docs/components/attachment.md): A file or image attachment card with media, metadata, upload states, and actions.
  - [Avatar](https://www.gindesign.online/docs/components/avatar.md): An image element with a fallback for representing a user.
  - [Badge](https://www.gindesign.online/docs/components/badge.md): Small status indicators and labels for categorizing, tagging, or highlighting content.
  - [Breadcrumb](https://www.gindesign.online/docs/components/breadcrumb.md): Shows the user's current location within a site hierarchy and provides navigation links to parent pages.
  - [Bubble](https://www.gindesign.online/docs/components/bubble.md): A chat message bubble with 7 variants, alignment, grouping, and reactions.
  - [Button](https://www.gindesign.online/docs/components/button.md): Triggers an action or navigates. Supports multiple visual variants and sizes.
  - [Button Group](https://www.gindesign.online/docs/components/button-group.md): Connects multiple buttons into a single visual unit, sharing borders and aligned corners.
  - [Calendar](https://www.gindesign.online/docs/components/calendar.md): A date picker calendar built on react-day-picker with support for single, multiple, and range selection.
  - [Card](https://www.gindesign.online/docs/components/card.md): A container that groups related content and actions with a consistent visual frame.
  - [Carousel](https://www.gindesign.online/docs/components/carousel.md): A swipeable slideshow for cycling through content — images, cards, or any elements.
  - [Chart](https://www.gindesign.online/docs/components/chart.md): A Recharts wrapper with themed tooltips, legends, and CSS variable color config.
  - [Checkbox](https://www.gindesign.online/docs/components/checkbox.md): A control that allows users to toggle between checked, unchecked, and indeterminate states.
  - [Collapsible](https://www.gindesign.online/docs/components/collapsible.md): An interactive section that expands and collapses to show or hide content.
  - [Combobox](https://www.gindesign.online/docs/components/combobox.md): An autocomplete input combining a trigger button with a searchable dropdown list.
  - [Command](https://www.gindesign.online/docs/components/command.md): A fast, composable command palette for searching, navigating, and triggering actions.
  - [Context Menu](https://www.gindesign.online/docs/components/context-menu.md): A menu that appears on right-click, providing contextual actions for the target element.
  - [Date Picker](https://www.gindesign.online/docs/components/date-picker.md): A date input that combines a popover calendar with a trigger button for selecting single dates, ranges, and presets.
  - [Dialog](https://www.gindesign.online/docs/components/dialog.md): A modal overlay that focuses user attention on a task or message, blocking interaction with the rest of the page until dismissed.
  - [Drawer](https://www.gindesign.online/docs/components/drawer.md): A panel that slides in from any edge of the screen — draggable on touch, dismissable by overlay click or swipe.
  - [Dropdown Menu](https://www.gindesign.online/docs/components/dropdown-menu.md): A floating menu triggered by a button — for actions, navigation, and contextual options.
  - [Empty](https://www.gindesign.online/docs/components/empty.md): A placeholder state for when content is absent — communicates context and guides the user toward the next action.
  - [Field](https://www.gindesign.online/docs/components/field.md): A form field wrapper that connects a label, control, description, and error message — eliminating manual id wiring.
  - [Hover Card](https://www.gindesign.online/docs/components/hover-card.md): A floating card that appears when hovering over a trigger — for previewing content without navigating away.
  - [Input](https://www.gindesign.online/docs/components/input.md): A single-line text field for collecting user input, with support for all HTML input types.
  - [Input OTP](https://www.gindesign.online/docs/components/input-otp.md): An accessible one-time password input with individual character slots, grouping, and separator support.
  - [Input Group](https://www.gindesign.online/docs/components/input-group.md): Composes an input with prefix and suffix addons — text, icons, or action buttons — with seamlessly shared borders.
  - [Item](https://www.gindesign.online/docs/components/item.md): A composable row for lists, settings, and navigation — combines an icon, label, description, and trailing action slot.
  - [Kbd](https://www.gindesign.online/docs/components/kbd.md): Renders keyboard keys and shortcuts with a consistent pressed-key appearance.
  - [Label](https://www.gindesign.online/docs/components/label.md): An accessible form label that associates with its input and responds to disabled state.
  - [Marker](https://www.gindesign.online/docs/components/marker.md): An inline status note, system event, or labeled separator for conversation threads.
  - [Menubar](https://www.gindesign.online/docs/components/menubar.md): A persistent horizontal menu bar with dropdown menus — checkboxes, radio groups, sub-menus, and keyboard shortcuts.
  - [Message](https://www.gindesign.online/docs/components/message.md): A layout wrapper for a chat message row with avatar, header, content, and footer.
  - [Message Scroller](https://www.gindesign.online/docs/components/message-scroller.md): A chat transcript scroller with auto-scroll, scroll anchoring, and performance-optimised item rendering.
  - [Native Select](https://www.gindesign.online/docs/components/native-select.md): A styled native <select> element with a custom chevron, size variants, and sound feedback.
  - [Navigation Menu](https://www.gindesign.online/docs/components/navigation-menu.md): A horizontal navigation bar with animated flyout panels, link groups, and a shared viewport.
  - [Pagination](https://www.gindesign.online/docs/components/pagination.md): Navigation controls for moving between pages with numbered links, previous/next, and ellipsis.
  - [Popover](https://www.gindesign.online/docs/components/popover.md): A floating panel anchored to a trigger — for non-modal overlays, forms, and contextual detail.
  - [Progress](https://www.gindesign.online/docs/components/progress.md): A horizontal bar that visualises completion of a task or process.
  - [Radio Group](https://www.gindesign.online/docs/components/radio-group.md): A set of mutually exclusive options where only one can be selected at a time.
  - [Resizable](https://www.gindesign.online/docs/components/resizable.md): Draggable split panels for horizontal and vertical layouts, built on react-resizable-panels.
  - [Scroll Area](https://www.gindesign.online/docs/components/scroll-area.md): A custom-styled scrollable container with a thin overlay scrollbar for both vertical and horizontal overflow.
  - [Select](https://www.gindesign.online/docs/components/select.md): A custom dropdown for selecting a single value — with groups, labels, separators, and keyboard navigation.
  - [Separator](https://www.gindesign.online/docs/components/separator.md): A thin visual divider between sections or inline content, supporting horizontal and vertical orientations.
  - [Sheet](https://www.gindesign.online/docs/components/sheet.md): A modal panel that slides in from any edge of the screen — for navigation, settings, and focused tasks.
  - [Sidebar](https://www.gindesign.online/docs/components/sidebar.md): A collapsible app sidebar with navigation groups, search, badges, tooltips, and mobile sheet support.
  - [Skeleton](https://www.gindesign.online/docs/components/skeleton.md): An animated placeholder that mimics content layout while data is loading.
  - [Slider](https://www.gindesign.online/docs/components/slider.md): A draggable input for selecting a numeric value or range, with support for steps, vertical orientation, and audio feedback.
  - [Sonner](https://www.gindesign.online/docs/components/sonner.md): Toast notifications powered by Sonner, themed to match your design system.
  - [Spinner](https://www.gindesign.online/docs/components/spinner.md): An animated SVG loading indicator with size variants and inheritable color.
  - [Switch](https://www.gindesign.online/docs/components/switch.md): A binary toggle control with smooth thumb animation and distinct on/off audio feedback.
  - [Table](https://www.gindesign.online/docs/components/table.md): Semantic HTML table with styled rows, headers, and footer — the primitive for data-heavy layouts.
  - [Tabs](https://www.gindesign.online/docs/components/tabs.md): A tabbed interface that displays one content panel at a time, with keyboard navigation and optional audio feedback.
  - [Textarea](https://www.gindesign.online/docs/components/textarea.md): A multi-line text input with the same border, focus ring, and invalid state as Input.
  - [Toggle](https://www.gindesign.online/docs/components/toggle.md): A two-state button that can be pressed on or off, with sound feedback and multiple visual variants.
  - [Toggle Group](https://www.gindesign.online/docs/components/toggle-group.md): A set of toggle buttons with shared variant and size, supporting single or multiple selection.
  - [Tooltip](https://www.gindesign.online/docs/components/tooltip.md): A floating label that appears on hover or focus, with directional slide animations and an arrow pointer.
  - [New Component](https://www.gindesign.online/docs/components/new-component.md): Replace this description with a one-line summary of what the component does.
- Elements
  - [Elements](https://www.gindesign.online/docs/elements.md): Complex interactive UI elements built on top of GIN Design components.
  - [Calendar](https://www.gindesign.online/docs/elements/calendar.md): Date picker and calendar view with single and range selection.
  - [Data Table](https://www.gindesign.online/docs/elements/e-data-table.md): Sortable, filterable document table with status/section-type facets, column visibility, and pagination — built on @tanstack/react-table.
  - [New Element](https://www.gindesign.online/docs/elements/new-element.md): Replace this description with a one-line summary of what the element does.
- Blocks
  - [Blocks](https://www.gindesign.online/docs/blocks.md): Pre-built UI sections composed from GIN Design components. Copy and drop into any page.
  - [Login](https://www.gindesign.online/docs/blocks/b-login.md): A full-page login block with card, split, and centered layout variants.
  - [Signup](https://www.gindesign.online/docs/blocks/b-signup.md): A full-page signup block with split, card, and centered layout variants.
  - [Featured](https://www.gindesign.online/docs/blocks/b-featured.md): A dashboard block with stat cards, an area chart, and a data table with tabs and pagination.
  - [New Block](https://www.gindesign.online/docs/blocks/new-block.md): Replace this description with a one-line summary of what the block does.
- Charts
  - [Charts](https://www.gindesign.online/docs/charts.md): Data visualization components built on top of Recharts.
  - [New Chart](https://www.gindesign.online/docs/charts/new-chart.md): Replace this description with a one-line summary of what the chart visualizes.
- Icons
  - [Icons](https://www.gindesign.online/docs/icons.md): Icon sets built for GIN Design — beyond the default Lucide set.
  - [New Icon](https://www.gindesign.online/docs/icons/new-icon.md): Replace this description with a one-line summary of what the icon set covers.

## Machine-readable Resources

- [Full documentation](https://www.gindesign.online/llms-full.txt)
- [Homepage markdown](https://www.gindesign.online/llms.md/content.md)
- [OpenAPI description](https://www.gindesign.online/openapi.json)
- [API catalog](https://www.gindesign.online/.well-known/api-catalog)
- [Agent skill](https://www.gindesign.online/.well-known/agent-skills/site-skill.md)
- [shadcn MCP server documentation](https://ui.shadcn.com/docs/mcp)