# @ginia/ui — Ginia Design System

> Unified React component library and design system for all Ginia hubs.
> Built on Radix UI + Tailwind CSS. 57+ UI primitives + domain-specific components.

## Documentation

- [Component Storybook](https://ginia-ui.vercel.app) — Interactive component playground
- [AGENTS.md](https://github.com/esc2esc/ginia-ui/blob/master/AGENTS.md) — Full AI agent context (setup, API reference, usage patterns)

## Components

- [Accordion](https://ginia-ui.vercel.app/?path=/docs/ui-accordion--docs)
- [Alert](https://ginia-ui.vercel.app/?path=/docs/ui-alert--docs)
- [AlertDialog](https://ginia-ui.vercel.app/?path=/docs/ui-alertdialog--docs)
- [AspectRatio](https://ginia-ui.vercel.app/?path=/docs/ui-aspectratio--docs)
- [Autocomplete](https://ginia-ui.vercel.app/?path=/docs/ui-autocomplete--docs)
- [Avatar](https://ginia-ui.vercel.app/?path=/docs/ui-avatar--docs)
- [Badge](https://ginia-ui.vercel.app/?path=/docs/ui-badge--docs)
- [Breadcrumb](https://ginia-ui.vercel.app/?path=/docs/ui-breadcrumb--docs)
- [Button](https://ginia-ui.vercel.app/?path=/docs/ui-button--docs)
- [Calendar](https://ginia-ui.vercel.app/?path=/docs/ui-calendar--docs)
- [Card](https://ginia-ui.vercel.app/?path=/docs/ui-card--docs)
- [Carousel](https://ginia-ui.vercel.app/?path=/docs/ui-carousel--docs)
- [Checkbox](https://ginia-ui.vercel.app/?path=/docs/ui-checkbox--docs)
- [Collapsible](https://ginia-ui.vercel.app/?path=/docs/ui-collapsible--docs)
- [Combobox](https://ginia-ui.vercel.app/?path=/docs/ui-combobox--docs)
- [Command](https://ginia-ui.vercel.app/?path=/docs/ui-command--docs)
- [ContextMenu](https://ginia-ui.vercel.app/?path=/docs/ui-contextmenu--docs)
- [DatePicker](https://ginia-ui.vercel.app/?path=/docs/ui-datepicker--docs)
- [Dialog](https://ginia-ui.vercel.app/?path=/docs/ui-dialog--docs)
- [Drawer](https://ginia-ui.vercel.app/?path=/docs/ui-drawer--docs)
- [DropdownMenu](https://ginia-ui.vercel.app/?path=/docs/ui-dropdownmenu--docs)
- [Form](https://ginia-ui.vercel.app/?path=/docs/ui-form--docs)
- [HoverCard](https://ginia-ui.vercel.app/?path=/docs/ui-hovercard--docs)
- [Icon](https://ginia-ui.vercel.app/?path=/docs/ui-icon--docs)
- [Input](https://ginia-ui.vercel.app/?path=/docs/ui-input--docs)
- [InputField](https://ginia-ui.vercel.app/?path=/docs/ui-inputfield--docs)
- [InputOTP](https://ginia-ui.vercel.app/?path=/docs/ui-inputotp--docs)
- [Label](https://ginia-ui.vercel.app/?path=/docs/ui-label--docs)
- [LoadingState](https://ginia-ui.vercel.app/?path=/docs/ui-loadingstate--docs)
- [Logo](https://ginia-ui.vercel.app/?path=/docs/ui-logo--docs)
- [Menubar](https://ginia-ui.vercel.app/?path=/docs/ui-menubar--docs)
- [MonthYearPicker](https://ginia-ui.vercel.app/?path=/docs/ui-monthyearpicker--docs)
- [MultiSelect](https://ginia-ui.vercel.app/?path=/docs/ui-multiselect--docs)
- [NavigationMenu](https://ginia-ui.vercel.app/?path=/docs/ui-navigationmenu--docs)
- [Pagination](https://ginia-ui.vercel.app/?path=/docs/ui-pagination--docs)
- [Popover](https://ginia-ui.vercel.app/?path=/docs/ui-popover--docs)
- [Progress](https://ginia-ui.vercel.app/?path=/docs/ui-progress--docs)
- [RadioGroup](https://ginia-ui.vercel.app/?path=/docs/ui-radiogroup--docs)
- [Resizable](https://ginia-ui.vercel.app/?path=/docs/ui-resizable--docs)
- [RichTextEditor](https://ginia-ui.vercel.app/?path=/docs/ui-richtexteditor--docs)
- [ScrollArea](https://ginia-ui.vercel.app/?path=/docs/ui-scrollarea--docs)
- [SectionLoader](https://ginia-ui.vercel.app/?path=/docs/ui-sectionloader--docs)
- [Select](https://ginia-ui.vercel.app/?path=/docs/ui-select--docs)
- [Separator](https://ginia-ui.vercel.app/?path=/docs/ui-separator--docs)
- [Sheet](https://ginia-ui.vercel.app/?path=/docs/ui-sheet--docs)
- [Skeleton](https://ginia-ui.vercel.app/?path=/docs/ui-skeleton--docs)
- [Slider](https://ginia-ui.vercel.app/?path=/docs/ui-slider--docs)
- [Sonner](https://ginia-ui.vercel.app/?path=/docs/ui-sonner--docs)
- [Spinner](https://ginia-ui.vercel.app/?path=/docs/ui-spinner--docs)
- [Switch](https://ginia-ui.vercel.app/?path=/docs/ui-switch--docs)
- [Table](https://ginia-ui.vercel.app/?path=/docs/ui-table--docs)
- [Tabs](https://ginia-ui.vercel.app/?path=/docs/ui-tabs--docs)
- [TagInput](https://ginia-ui.vercel.app/?path=/docs/ui-taginput--docs)
- [Textarea](https://ginia-ui.vercel.app/?path=/docs/ui-textarea--docs)
- [Toast](https://ginia-ui.vercel.app/?path=/docs/ui-toast--docs)
- [Toggle](https://ginia-ui.vercel.app/?path=/docs/ui-toggle--docs)
- [ToggleGroup](https://ginia-ui.vercel.app/?path=/docs/ui-togglegroup--docs)
- [Tooltip](https://ginia-ui.vercel.app/?path=/docs/ui-tooltip--docs)

## Domain Components

- [Resume](https://ginia-ui.vercel.app/?path=/docs/domain-resume--docs) — Full CV viewer/editor component

## Setup

```bash
pnpm add @ginia/ui
```

```typescript
// tailwind.config.ts
import giniaPreset from "@ginia/ui/preset";
export default { presets: [giniaPreset] };
```

```css
/* globals.css */
@import "@ginia/ui/styles";
```

```tsx
import { Button, Card, Input } from "@ginia/ui";
```

## Icons

Icons are re-exported from [Lucide React](https://lucide.dev). Use them by importing from the `@ginia/ui/icons` entry point.

```tsx
import { Search, User, ChevronRight } from "@ginia/ui/icons";
```


## Design Tokens

- Primary: `#110E3D` (deep indigo)
- Secondary: `#A476FF` (purple)
- Accent: `#F1EA88` (yellow)
- Accent Blue: `#03CADD` (cyan)
- Background: `#F3F3E8` (warm cream)
- Font: Mozilla Text, system fallbacks