Trading Game Design System

A component library and design token system for the Deriv trading game product. Built on shadcn/ui with a custom Figma-driven token architecture, Tailwind CSS v4, and React 19.

Installation

npm install @deriv-com/trading-game-design-system --safe-chain-skip-minimum-package-age

Setup

1. Import the design tokens and tell Tailwind to scan the package (requires Tailwind CSS v4):

@import "@deriv-com/trading-game-design-system/styles";
@import "tailwindcss";
@source "../node_modules/@deriv-com/trading-game-design-system/dist";

Why @source? Tailwind v4 skips node_modules by default. Without this line, Tailwind won't generate CSS for the component classes (e.g. bg-primary, text-primary-foreground). This is the standard way to use any Tailwind-based component library with v4.

2. Use components in your app:

import { Button, Card, Badge } from "@deriv-com/trading-game-design-system"

export default function App() {
  return (
    <Card>
      <Button variant="primary">Trade Now</Button>
      <Badge>Live</Badge>
    </Card>
  )
}

Peer dependencies

Make sure these are installed in your project:

npm install react react-dom tailwindcss

What's inside

• 55 UI components — buttons, forms, dialogs, charts, sidebars, and more
• Design tokens — CSS custom properties for color, radius, and typography synced from Figma
• Dark mode — built-in light/dark theming via CSS variables
• TypeScript — full type definitions included
• ESM + CJS — works with any bundler

Available components

| Component | Import | |---|---| | Accordion | Accordion, AccordionItem, AccordionTrigger, AccordionContent | | Alert | Alert, AlertTitle, AlertDescription | | Alert Dialog | AlertDialog, AlertDialogTrigger, AlertDialogContent, ... | | Avatar | Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup | | Badge | Badge, badgeVariants | | Breadcrumb | Breadcrumb, BreadcrumbList, BreadcrumbItem, ... | | Button | Button, buttonVariants | | Calendar | Calendar, CalendarDayButton | | Card | Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter | | Carousel | Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext | | Chart | ChartContainer, ChartTooltip, ChartLegend, ChartStyle | | Checkbox | Checkbox | | Collapsible | Collapsible, CollapsibleTrigger, CollapsibleContent | | Combobox | Combobox, ComboboxInput, ComboboxContent, ComboboxItem, ... | | Command | Command, CommandDialog, CommandInput, CommandList, ... | | Context Menu | ContextMenu, ContextMenuTrigger, ContextMenuContent, ... | | Dialog | Dialog, DialogTrigger, DialogContent, DialogHeader, ... | | Drawer | Drawer, DrawerTrigger, DrawerContent, DrawerHeader, ... | | Dropdown Menu | DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, ... | | Empty State | Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent | | Field | Field, FieldLabel, FieldDescription, FieldError, FieldGroup | | Form | Form, FormItem, FormLabel, FormControl, FormField, FormMessage | | Hover Card | HoverCard, HoverCardTrigger, HoverCardContent | | Input | Input | | Input Group | InputGroup, InputGroupAddon, InputGroupButton, InputGroupText | | Input OTP | InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator | | Item | Item, ItemMedia, ItemContent, ItemTitle, ItemDescription | | Kbd | Kbd, KbdGroup | | Label | Label | | Menubar | Menubar, MenubarMenu, MenubarTrigger, MenubarContent, ... | | Native Select | NativeSelect, NativeSelectOptGroup, NativeSelectOption | | Navigation Menu | NavigationMenu, NavigationMenuList, NavigationMenuTrigger, ... | | Pagination | Pagination, PaginationContent, PaginationLink, ... | | Popover | Popover, PopoverTrigger, PopoverContent, PopoverAnchor | | Progress | Progress | | Radio Group | RadioGroup, RadioGroupItem | | Resizable | ResizableHandle, ResizablePanel, ResizablePanelGroup | | Scroll Area | ScrollArea, ScrollBar | | Select | Select, SelectTrigger, SelectContent, SelectItem, ... | | Separator | Separator | | Sheet | Sheet, SheetTrigger, SheetContent, SheetHeader, ... | | Sidebar | Sidebar, SidebarProvider, SidebarMenu, SidebarMenuItem, ... | | Skeleton | Skeleton | | Slider | Slider | | Spinner | Spinner | | Switch | Switch | | Table | Table, TableHeader, TableBody, TableRow, TableHead, TableCell | | Tabs | Tabs, TabsList, TabsTrigger, TabsContent | | Textarea | Textarea | | Toast | Toaster | | Toggle | Toggle, toggleVariants | | Toggle Group | ToggleGroup, ToggleGroupItem | | Tooltip | Tooltip, TooltipTrigger, TooltipContent, TooltipProvider |

Button variants and sizes

// Cyan family
<Button variant="primary" />     // cyan filled — main CTA
<Button variant="secondary" />   // cyan outline — secondary action
<Button variant="tertiary" />    // cyan text — minimal

// Sizes
<Button size="lg" />      // 48px height (default)
<Button size="md" />      // 40px height
<Button size="sm" />      // 32px height
<Button size="xs" />      // 24px height
<Button size="icon-lg" /> // 48px square
<Button size="icon-md" /> // 40px square
<Button size="icon-sm" /> // 28px square
<Button size="icon-xs" /> // 24px square

Badge variants

<Badge />                        // default — cyan filled
<Badge variant="fill" />         // cyan tint fill
<Badge variant="fill-amber" />   // amber tint fill
<Badge variant="fill-pink" />    // pink tint fill
<Badge variant="fill-purple" />  // purple tint fill (#A040FF)
<Badge variant="ghost" />        // transparent, muted text

// Sizes
<Badge size="default" />  // 20px height
<Badge size="md" />       // 32px height
<Badge size="lg" />       // 40px height

Design tokens

All tokens are CSS custom properties. When using the npm package, import them via @deriv-com/trading-game-design-system/styles. For local development, they are defined in app/globals.css.

| Token | Usage | |---|---| | --primary | Teal #00FFFF — brand primary | | --primary-hover | Teal hover #00D4D4 | | --secondary | Amber at 10% opacity | | --secondary-hover | Amber 500 — full opacity | | --semantic-win | Green — positive outcome | | --semantic-loss | Red — negative outcome | | --semantic-warning | Amber — warning state | | --brand-usdt | USDT green | | --background | Page background | | --foreground | Primary text | | --muted-foreground | Secondary text | | --border | Border color | | --radius | Base border radius (0.625rem) |

Development

# Clone
git clone https://github.com/deriv-com/product-design-trading-game-ds.git
cd product-design-trading-game-ds

# Install dependencies
npm install

# Start dev server (Next.js component playground)
npm run dev

# Build the library (ESM + CJS + types)
npm run build

# Build the Next.js showcase app
npm run build:next

Updating design tokens

Design tokens are managed in Figma and exported as JSON variables. To update:

1. Export updated variables from Figma (TailwindCSS.json, Theme.json, Mode.json)
2. Update the CSS custom properties in app/globals.css

Tech stack

• React 19 + TypeScript
• Tailwind CSS v4 — CSS-first configuration
• shadcn/ui (New York style) — base component primitives
• Radix UI — accessible headless primitives
• Figma — source of truth for design tokens