Design system
for modern teams

A minimal, token-driven React component library built on Tailwind CSS. One import. One stylesheet. Ship faster.

Used by developers worldwide

gus-ui-tokens

Design tokens — colors, spacing, typography

gus-ui-library

React components with compiled CSS

Why GUS UI

Built for the way
you actually work

Design Tokens

Your entire design language as typed TypeScript constants. Colors, spacing, and typography — versioned and published independently so teams stay in sync.

React Components

Composable, accessible components with full TypeScript support. Every prop is typed, every variant is documented, ready for production from day one.

Zero Consumer Config

Tailwind is compiled at build time and ships as a single CSS file. Your app imports one package and one stylesheet — nothing else required.

25+

Components

Packages

100%

TypeScript

MIT

License

Showcase

Components

Button

Actions

Triggers actions and events. 4 variants, 3 sizes, disabled state.

Variants

Sizes

import { Button } from 'gus-ui-library';

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="inverted">Inverted</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// Disabled
<Button disabled>Disabled</Button>

Badge

Data Display

Small status label. 3 variants for different levels of emphasis.

DefaultSecondaryOutline

Newv0.0.1MITTypeScript

import { Badge } from 'gus-ui-library';

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>

// In context
<Badge variant="secondary">New</Badge>
<Badge variant="outline">v0.0.1</Badge>
<Badge>MIT</Badge>

Avatar

Data Display

User representation with initials or image. 3 sizes, 3 colors, stackable.

import { Avatar } from 'gus-ui-library';

// Sizes
<Avatar initials="SM" size="sm" />
<Avatar initials="MD" size="md" />
<Avatar initials="LG" size="lg" />

// Colors
<Avatar initials="Dk" color="dark" />
<Avatar initials="Md" color="medium" />
<Avatar initials="Lt" color="light" />

// Stacked group
<div className="flex -space-x-2">
  <Avatar initials="A" size="sm" color="dark" />
  <Avatar initials="B" size="sm" color="medium" />
  <Avatar initials="+3" size="sm" color="light" />
</div>

Input

Form

Text input with forwardRef support, error state, and disabled variant.

import { Input } from 'gus-ui-library';

<Input placeholder="Enter value..." />

// Error state
<Input
  placeholder="you@example.com"
  error="Invalid email address"
/>

// Disabled
<Input placeholder="Read-only" disabled />

Label

Form

Form field label with optional required marker.

Standard label

Required label*

import { Label } from 'gus-ui-library';

<Label htmlFor="email">Email address</Label>
<Label htmlFor="name" required>Full name</Label>

// With input
<Label htmlFor="input" className="mb-1.5">Username</Label>
<Input id="input" placeholder="gus_vega" />

Textarea

Form

Multiline text input with forwardRef support and resizable height.

import { Textarea } from 'gus-ui-library';

<Textarea placeholder="Write your message..." />

// With rows
<Textarea rows={5} placeholder="Longer input..." />

// Disabled
<Textarea placeholder="Read-only" disabled />

Checkbox

Form

Controlled boolean input with peer-based custom styling.

Email notifications

Marketing emails

Two-factor auth

Disabled option

import { Checkbox } from 'gus-ui-library';

const [checked, setChecked] = useState(false);

<Checkbox
  checked={checked}
  onChange={setChecked}
  label="Accept terms and conditions"
/>

// Disabled
<Checkbox
  checked={false}
  onChange={() => {}}
  label="Unavailable option"
  disabled
/>

Radio

Form

Single-select controlled input. Group via a shared name prop.

Free — $0 / mo

Pro — $12 / mo

Team — $49 / mo

Enterprise (contact us)

import { Radio } from 'gus-ui-library';

const [plan, setPlan] = useState('pro');

<Radio name="plan" value="free" label="Free — $0/mo"
  checked={plan === 'free'} onChange={setPlan} />

<Radio name="plan" value="pro" label="Pro — $12/mo"
  checked={plan === 'pro'} onChange={setPlan} />

<Radio name="plan" value="enterprise"
  label="Enterprise" checked={false}
  onChange={setPlan} disabled />

Switch

Form

Toggle control for binary settings. Animates on state change.

Push notifications

Marketing emails

Product updates

Disabled

import { Switch } from 'gus-ui-library';

const [on, setOn] = useState(true);

<Switch
  checked={on}
  onChange={setOn}
  label="Enable notifications"
/>

// Disabled
<Switch checked={false} onChange={() => {}}
  label="Unavailable" disabled />

Select

Form

Styled native select with custom chevron. Supports placeholder and disabled options.

import { Select } from 'gus-ui-library';

<Select
  placeholder="Choose a framework..."
  options={[
    { value: 'next',  label: 'Next.js'  },
    { value: 'remix', label: 'Remix'    },
    { value: 'vite',  label: 'Vite'     },
    { value: 'astro', label: 'Astro', disabled: true },
  ]}
  onChange={(value) => console.log(value)}
/>

FormField

Form

Compound wrapper that connects Label, input, error message, and hint text.

Username

Only letters and numbers.

Email*

Invalid email address.

import { FormField, Input } from 'gus-ui-library';

// With hint
<FormField
  label="Username"
  htmlFor="user"
  hint="Only letters and numbers."
>
  <Input id="user" placeholder="gus_vega" />
</FormField>

// With error
<FormField
  label="Email"
  htmlFor="email"
  required
  error="Invalid email address."
>
  <Input id="email" type="email" />
</FormField>

Tag

Data Display

Rectangular label with optional remove button. Use for categories, filters, or selections.

DefaultDarkOutline

TypeScriptReactTailwind

import { Tag } from 'gus-ui-library';

<Tag>Secondary (default)</Tag>
<Tag variant="default">Dark</Tag>
<Tag variant="outline">Outline</Tag>

// Removable
<Tag onRemove={() => handleRemove('ts')}>TypeScript</Tag>
<Tag onRemove={() => handleRemove('react')}>React</Tag>

Stat

Data Display

Metric display with optional trend indicator. Use in dashboards and overview cards.

Total Users

12,345

↑ +8.2% this month

Revenue

$84.2k

↑ +12.5% this month

Churn Rate

2.4%

↓ -0.3% this month

Uptime

99.9%

import { Stat } from 'gus-ui-library';

<Stat label="Total Users" value="12,345"
  change="+8.2% this month" trend="up" />

<Stat label="Churn Rate" value="2.4%"
  change="-0.3% this month" trend="down" />

<Stat label="Uptime" value="99.9%" />

Table

Data Display

Structured data display with hover rows and responsive overflow scroll.

Name	Role	Status	Joined
Gus Vega	Engineer	Active	Jan 2024
Jane Doe	Designer	Active	Mar 2024
Alex Kim	PM	Away	Jun 2024

import {
  Table, TableHeader, TableBody,
  TableRow, TableHead, TableCell,
} from 'gus-ui-library';

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Gus Vega</TableCell>
      <TableCell>Engineer</TableCell>
      <TableCell><Badge>Active</Badge></TableCell>
    </TableRow>
  </TableBody>
</Table>

Code & Kbd

Data Display

Inline code and block code for documentation. Kbd for keyboard shortcut hints.

Run npm install gus-ui-library to get started.

⌘KCommand palette

⌘SSave

import { Code, Kbd } from 'gus-ui-library';

// Inline
<p>Run <Code>npm install</Code> to start.</p>

// Block
<Code block>
  {"import { Button } from 'gus-ui-library';"}
</Code>

// Keyboard shortcut
<div className="flex items-center gap-1">
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</div>

Progress

Feedback

Animated fill bar for indicating completion. Value range: 0–100.

Storage72%

Bandwidth45%

Memory91%

import { Progress } from 'gus-ui-library';

<Progress value={72} />

// With label
<div>
  <div className="flex justify-between mb-2">
    <span>Storage</span>
    <span>72%</span>
  </div>
  <Progress value={72} />
</div>

Spinner

Feedback

CSS animation loading indicator. 3 sizes for different contexts.

import { Spinner } from 'gus-ui-library';

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

// With button
<Button disabled>
  <Spinner size="sm" className="mr-2" />
  Loading...
</Button>

Alert

Feedback

Contextual message with optional title. 3 variants for different emphasis levels.

Heads up

Your free trial ends in 3 days. Upgrade to keep access.

Action required

Please verify your email address to continue.

Deployed successfully

Version 1.2.0 is now live in production.

import { Alert } from 'gus-ui-library';

<Alert variant="default" title="Heads up">
  Your free trial ends in 3 days.
</Alert>

<Alert variant="outline" title="Action required">
  Please verify your email address.
</Alert>

<Alert variant="filled" title="Deployed">
  Version 1.2.0 is now live in production.
</Alert>

Skeleton

Feedback

Pulse animation placeholder for loading states. Rectangular, circular, and text variants.

import { Skeleton } from 'gus-ui-library';

// Text lines
<Skeleton variant="text" />
<Skeleton variant="text" width="60%" />

// Circular (avatar placeholder)
<Skeleton variant="circular" width={40} height={40} />

// Rectangular (image / card placeholder)
<Skeleton variant="rectangular" width={200} height={120} />

Tabs

Navigation

Panel switcher with context-based state. Compound: Tabs, TabsList, TabsTrigger, TabsContent.

Tabs organize content into separate panels — only one panel is visible at a time.

import { Tabs, TabsList, TabsTrigger, TabsContent } from 'gus-ui-library';

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
    <TabsTrigger value="api">API</TabsTrigger>
    <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content here.</TabsContent>
  <TabsContent value="code">Code content here.</TabsContent>
  <TabsContent value="api">API content here.</TabsContent>
</Tabs>

Breadcrumb

Navigation

Hierarchical navigation trail. Last item renders as current page (no href).

import { Breadcrumb, BreadcrumbItem } from 'gus-ui-library';

<Breadcrumb>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
  <BreadcrumbItem>Button</BreadcrumbItem>
</Breadcrumb>

Link

Navigation

Styled anchor element. 3 variants: default (underline), muted, and decorated underline.

Default link Muted link Underline link

Read the documentation or view the source on GitHub.

import { Link } from 'gus-ui-library';

<Link href="/docs">Default link</Link>
<Link href="/docs" variant="muted">Muted link</Link>
<Link href="/docs" variant="underline">Underline link</Link>

// In prose
<p>
  Read the <Link href="#">documentation</Link>{" "}
  or view on <Link href="#" variant="muted">GitHub</Link>.
</p>

Card

Layout

Content container with header, body, and footer slots. All sub-components are optional.

Gus Vega

Design Systems Engineer

Building the GUS UI design system — tokens, components, and documentation.

DesignTypeScriptReact

import { Card, CardHeader, CardContent, CardFooter } from 'gus-ui-library';

<Card>
  <CardHeader>
    <p className="font-semibold">Card title</p>
  </CardHeader>
  <CardContent>
    <p>Card body content goes here.</p>
  </CardContent>
  <CardFooter className="flex justify-end gap-2">
    <Button variant="ghost" size="sm">Cancel</Button>
    <Button size="sm">Save</Button>
  </CardFooter>
</Card>

Separator

Layout

Visual divider for horizontal and vertical layouts.

Above the separator

Below the separator

Tokens

Library

Refapp

import { Separator } from 'gus-ui-library';

// Horizontal (default)
<Separator />

// Vertical (set a fixed height on parent)
<div className="flex items-center gap-4 h-8">
  <span>Section A</span>
  <Separator orientation="vertical" />
  <span>Section B</span>
</div>

Stack

Layout

Flex layout helper with direction, gap, alignment, and justify props.

RowItem 2Item 3

Dashboard

import { Stack } from 'gus-ui-library';

// Row
<Stack direction="row" gap={3} align="center">
  <Badge>Item 1</Badge>
  <Badge variant="secondary">Item 2</Badge>
</Stack>

// Column
<Stack direction="col" gap={2}>
  <Button size="sm">First</Button>
  <Button size="sm" variant="secondary">Second</Button>
</Stack>

// Space between
<Stack direction="row" justify="between" align="center">
  <span>Label</span>
  <Button size="sm">Action</Button>
</Stack>

Get Started

Start building in minutes

Import one CSS file, and you're ready to go.

$npm install gus-ui-library

Design systemfor modern teams

Built for the wayyou actually work

Design Tokens

React Components

Zero Consumer Config

Components

Button

Badge

Avatar

Input

Label

Textarea

Checkbox

Radio

Switch

Select

FormField

Tag

Stat

Table

Code & Kbd

Progress

Spinner

Alert

Skeleton

Tabs

Breadcrumb

Link

Card

Separator

Stack

Start building in minutes

Design system
for modern teams

Built for the way
you actually work