Overview of the key components available in the LOKE Design System with imports, use cases, and composition tips.

Component Guide

This guide provides an overview of the key components available in the LOKE Design System. Use this as a reference to understand which components to use for different UI requirements.

Import components individually to keep bundle sizes small and enable tree‑shaking:

import { Button } from '@loke/design-system/button'

Component Categories

The LOKE Design System components are organized into several functional categories:

Layout Components: For structuring content on the page
Form Components: For user input and data collection
Navigation Components: For moving between different views and sections
Feedback Components: For providing information to the user
Data Display Components: For presenting information
Utility Components: Supporting components for various needs

Layout Components

Box

Box is the fundamental layout primitive, providing a versatile container with extensive styling options.

import { Box } from '@loke/design-system/box';

Use for:

Creating basic layout containers
Applying spacing, background, border styles
Building custom components
Responsive layouts

Stack

Stack arranges elements vertically with consistent spacing.

import { Stack } from '@loke/design-system/stack';

Use for:

Forms
Content sections
Vertical lists
Any UI that requires vertical spacing

Columns

Columns creates grid-based layouts with configurable columns and spacing.

import { Columns, Column } from '@loke/design-system/columns';

Use for:

Multi-column layouts
Responsive grids
Card layouts
Dashboard designs

Card

Card creates a contained section with standard styling.

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@loke/design-system/card';

Use for:

Grouping related information
Feature blocks
UI containers
Dashboards and data displays

Form Components

Form

Form provides the structure for form elements with validation support.

import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
} from '@loke/design-system/form';

Use for:

Creating structured forms
Form validation
Complex data entry

Input

Input is a standard text input field.

import { Input } from '@loke/design-system/input';

Use for:

Single-line text input
Search fields
Email, password fields
Numeric input

Textarea

Textarea is for multi-line text input.

import { Textarea } from '@loke/design-system/textarea';

Use for:

Multi-line text input
Comments
Descriptions
Messages

Select

Select creates dropdown selection menus.

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@loke/design-system/select';

Use for:

Selecting from predefined options
Dropdown menus
Configuration settings

Checkbox

Checkbox allows boolean selection.

import { Checkbox } from '@loke/design-system/checkbox';

Use for:

Boolean options
Multiple selection from lists
Accepting terms

RadioGroup

RadioGroup allows selecting one option from a list.

import {
  RadioGroup,
  RadioGroupItem,
} from '@loke/design-system/radio-group';

Use for:

Single selection from options
Exclusive choices
Settings and preferences

Switch

Switch provides a toggle control.

import { Switch } from '@loke/design-system/switch';

Use for:

Toggle settings
Boolean choices
Visual on/off controls

Button

Button provides interactive controls for actions.

import { Button } from '@loke/design-system/button';

Use for:

Primary actions
Form submission
Navigation controls
Menu triggers

Tabs

Tabs create content sections that can be navigated between.

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from '@loke/design-system/tabs';

Use for:

Content organization
Sectioning related information
Settings panels
Secondary navigation

DropdownMenu

DropdownMenu provides contextual menus.

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@loke/design-system/dropdown-menu';

Use for:

Actions menus
User account menus
Configuration options
Contextual actions

Dialog

Dialog creates modal overlays for focused interactions.

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@loke/design-system/dialog';

Use for:

Confirmations
Important notifications
Forms that require focus
Detail views

Sheet

Sheet creates slide-in panels.

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
} from '@loke/design-system/sheet';

Use for:

Mobile navigation
Supplementary views
Configuration panels
Tool palettes

Feedback Components

Alert

Alert displays important information to the user.

import {
  Alert,
  AlertTitle,
  AlertDescription,
} from '@loke/design-system/alert';

Use for:

Notifications
Warnings
Success messages
Information alerts

AlertDialog

AlertDialog is for confirming destructive or important actions.

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogAction,
  AlertDialogCancel,
} from '@loke/design-system/alert-dialog';

Use for:

Destructive action confirmations
Important decision prompts
Preventing accidental actions

Toast

Transient toasts for system notifications and async feedback.

import { Toaster, toast } from '@loke/design-system/toast';
import { Button } from '@loke/design-system/button';

function Example() {
  const handleAction = () => {
    toast('Success', { description: 'Your changes have been saved', type: 'success' });
  };

  const handleAsync = async () => {
    await toast.promise(fetch('/api/save', { method: 'POST' }), {
      loading: 'Saving...',
      success: 'Saved!',
      error: 'Failed to save',
    });
  };

  return (
    <>
      <Button onClick={handleAction}>Show Toast</Button>
      <Button variant="secondary" onClick={handleAsync}>Save</Button>
      <Toaster />
    </>
  );
}

Use for:

Temporary notifications
Action confirmations
System status updates
Non-blocking messages

Data Display Components

Table

Table displays structured data in rows and columns.

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
} from '@loke/design-system/table';

Use for:

Data tables
Structured information
Comparison views
Administrative interfaces

Avatar

Avatar displays user or entity images with fallbacks.

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
} from '@loke/design-system/avatar';

Use for:

User profiles
Account representations
Contact lists
Comments and reviews

Badge

Badge highlights status or metadata.

import { Badge } from '@loke/design-system/badge';

Use for:

Status indicators
Categories
Tags
Counts and numbers

Tooltip provides additional context on hover or focus.

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from '@loke/design-system/tooltip';

Use for:

Extra information
Clarification
Action hints
Accessibility improvements

Utility Components

Separator

Separator creates visual divisions between content.

import { Separator } from '@loke/design-system/separator';

Use for:

Visual dividers
Content grouping
Menu separators
Layout structure

Skeleton

Skeleton provides loading state placeholders.

import { Skeleton } from '@loke/design-system/skeleton';

Use for:

Loading states
Progressive content loading
Improving perceived performance

Collapsible

Collapsible creates expandable/collapsible content sections.

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from '@loke/design-system/collapsible';

Use for:

FAQs
Details that can be hidden
Expandable sections
Space-saving UIs

Accordion

Accordion groups collapsible content sections.

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@loke/design-system/accordion';

Use for:

FAQs
Navigation menus
Categorized content
Settings groups

Component Selection Guidelines

When deciding which components to use, consider:

User need: What is the user trying to accomplish?
Information density: How much information needs to be presented?
Interaction model: How should users interact with the content?
Context: Where in the application will this appear?
Accessibility: How will all users access this functionality?

Best Practices

Composition over configuration: Compose components together rather than deeply configuring single components
Keep it simple: Choose the simplest component that meets the need
Maintain hierarchy: Use components to create clear information hierarchy
Consider state: Plan for loading, empty, error, and success states
Be consistent: Use components consistently across the application

Component Combinations

Components are designed to work together. Here are common combinations:

Form Layout

import { Button } from '@loke/design-system/button';
import {
  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter
} from '@loke/design-system/card';
import {
  Form, FormField, FormItem, FormLabel, FormControl
} from '@loke/design-system/form';
import { Input } from '@loke/design-system/input';
import { Stack } from '@loke/design-system/stack';

<Card>
  <CardHeader>
    <CardTitle>Create Account</CardTitle>
    <CardDescription>Enter your information below to create your account.</CardDescription>
  </CardHeader>
  <CardContent>
    <Form {...form}>
      <form onSubmit={...}>
        <Stack gap={4}>
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input placeholder="email@example.com" {...field} />
                </FormControl>
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Password</FormLabel>
                <FormControl>
                  <Input type="password" {...field} />
                </FormControl>
              </FormItem>
            )}
          />
        </Stack>
      </form>
    </Form>
  </CardContent>
  <CardFooter>
    <Button type="submit">Create Account</Button>
  </CardFooter>
</Card>

Dashboard Section

import { Stack } from '@loke/design-system/stack';
import { Heading } from '@loke/design-system/heading';
import {
  Tabs, TabsList, TabsTrigger, TabsContent
} from '@loke/design-system/tabs';
import { Columns } from '@loke/design-system/columns';
import {
  Card, CardHeader, CardTitle, CardContent
} from '@loke/design-system/card';

<Stack gap={4}>
  <Heading>Analytics Overview</Heading>
  <Tabs defaultValue="daily">
    <TabsList>
      <TabsTrigger value="daily">Daily</TabsTrigger>
      <TabsTrigger value="weekly">Weekly</TabsTrigger>
      <TabsTrigger value="monthly">Monthly</TabsTrigger>
    </TabsList>
    <TabsContent value="daily">
      <Columns columns={[1, 2, 4]} gap={4}>
        <Card>
          <CardHeader>
            <CardTitle>Revenue</CardTitle>
          </CardHeader>
          <CardContent>
            {/* Replace with real data */}
            <span className="text-3xl font-semibold">$120,000</span>
          </CardContent>
        </Card>
        {/* More cards */}
      </Columns>
    </TabsContent>
    {/* More tabs content */}
  </Tabs>
</Stack>

This guide provides an overview of the key components available in the LOKE Design System and when to use them. For detailed documentation on each component, explore their individual documentation pages.

As a LOKE developer, remember to:

Prioritize consistency — Use existing patterns to maintain coherence across LOKE products
Build with accessibility — Follow WCAG guidelines and use semantic HTML
Compose with primitives — Leverage layout components (Box, Stack, Columns) for structure
Import individually — Keep bundle sizes small with tree-shaking

Need help choosing the right component? Check the Accessibility Guide for inclusive design patterns or reach out to the LOKE design team.

Component Guide

On this page