npm package: @gtcx/ui
Description: GTCX UI component library — Radix UI + Tailwind CSS v4
Latest version: 0.3.0

# @gtcx/ui

77-component library for the GTCX design system. Built on Radix UI primitives with Metronic v9.4.6 + Tailwind CSS v4 styling.

## Install

```bash
pnpm add @gtcx/ui
```

Install required peer dependencies:

```bash
pnpm add react react-dom radix-ui lucide-react
```

Install optional peer dependencies for the components you use:

```bash
# Forms
pnpm add react-hook-form react-day-picker input-otp react-aria-components

# Data
pnpm add @tanstack/react-table recharts

# Drag and drop
pnpm add @dnd-kit/core @dnd-kit/sortable @dnd-kit/modifiers @dnd-kit/utilities

# Notifications
pnpm add sonner

# Theming
pnpm add next-themes

# Command palette
pnpm add cmdk

# Drawer
pnpm add vaul

# Carousel
pnpm add embla-carousel-react

# Resizable panels
pnpm add react-resizable-panels

# Animations
pnpm add motion
```

## Setup

Import the global styles in your app entry point:

```ts
// app/layout.tsx or _app.tsx
import '@gtcx/ui/styles/globals.css';
```

For Metronic CSS variables (full styling):

```ts
import '@gtcx/ui/styles/config.metronic.css';
```

## Usage

```tsx
import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@gtcx/ui';

export function LoginCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Sign in</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <Input placeholder="Email" type="email" />
        <Input placeholder="Password" type="password" />
        <Button>Continue</Button>
      </CardContent>
    </Card>
  );
}
```

## Component categories

| Category       | Components                                                                                                                                                                        |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Base**       | Button, Badge, Avatar, AvatarGroup, Separator, Spinner                                                                                                                            |
| **Forms**      | Input, Textarea, Label, Checkbox, Switch, Select, RadioGroup, Slider, Toggle, ToggleGroup, Calendar, InputOTP, DateField, Form, FileInput                                         |
| **Feedback**   | Alert, AlertDialog, Dialog, Sheet, Drawer, Tooltip, Popover, HoverCard, ContextMenu, Progress, Skeleton, Sonner                                                                   |
| **Navigation** | Tabs, Breadcrumb, Pagination, DropdownMenu, NavigationMenu, Menubar, AccordionMenu, Stepper, Command                                                                              |
| **Data**       | Table, DataGrid, DataGridTable, DataGridPagination, DataGridColumnHeader, Accordion, Collapsible, Carousel, Chart, Kanban, Tree                                                   |
| **Layout**     | Card, ScrollArea, AspectRatio, ResizablePanelGroup, Code, Kbd, GradientBackground, GridBackground, Marquee, CountingNumber, SlidingNumber, ShimmeringText, TypingText, WordRotate |

## Next.js

For Next.js with Turbopack, add to `transpilePackages`:

```js
// next.config.mjs
const nextConfig = {
  transpilePackages: ['@gtcx/ui'],
};
```

## Requirements

- React 18 or 19
- Node.js ≥ 20