@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

pnpm add @gtcx/ui

Install required peer dependencies:

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

Install optional peer dependencies for the components you use:

# 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:

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

For Metronic CSS variables (full styling):

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

Usage

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:

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

Requirements

• React 18 or 19
• Node.js ≥ 20