@thegrid-tools/design-system v1.0.0

@thegrid-tools/design-system

A comprehensive design system for TheGrid applications.

Installation

# If using npm
npm install @thegrid-tools/design-system

# If using yarn
yarn add @thegrid-tools/design-system

# If using pnpm
pnpm add @thegrid-tools/design-system

Usage

Setup

Wrap your application with the DesignSystemProvider:

import { DesignSystemProvider } from '@thegrid-tools/design-system';

function App({ children }) {
  return (
    <DesignSystemProvider>
      {children}
    </DesignSystemProvider>
  );
}

Using Components

Import components directly from the package:

import { Button, Card, Tabs } from '@thegrid-tools/design-system';

function MyComponent() {
  return (
    <Card>
      <Tabs>
        <Tabs.List>
          <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
          <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content value="tab1">
          <Button>Click me</Button>
        </Tabs.Content>
        <Tabs.Content value="tab2">
          Tab 2 content
        </Tabs.Content>
      </Tabs>
    </Card>
  );
}

Using Hooks

import { useToast } from '@thegrid-tools/design-system';

function MyComponent() {
  const { toast } = useToast();
  
  return (
    <Button onClick={() => toast({ title: 'Success', description: 'Operation completed' })}>
      Show Toast
    </Button>
  );
}

Using Utilities

import { cn } from '@thegrid-tools/design-system';

function MyComponent({ className }) {
  return (
    <div className={cn('base-class', className)}>
      Content
    </div>
  );
}

Available Components

The design system includes a wide range of components built on top of Radix UI primitives:

• Accordion
• Alert
• AlertDialog
• AspectRatio
• Avatar
• Badge
• Breadcrumb
• Button
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• CheckboxGrid
• Collapsible
• Command
• ContextMenu
• DatePicker
• Dialog
• DropdownMenu
• Form
• HoverCard
• Input
• Label
• Menubar
• NavigationMenu
• Pagination
• Popover
• Progress
• RadioGroup
• ScrollArea
• Select
• Separator
• Sheet
• Sidebar
• Skeleton
• Slider
• Spinner
• Switch
• Table
• Tabs
• Textarea
• Toast
• Toggle
• ToggleGroup
• Tooltip

Available Hooks

• useToast
• useEventListener
• useMediaQuery
• useMobile

Development

# Install dependencies
pnpm install

# Start development mode
pnpm dev

# Build the package
pnpm build