@gg-software/ui

Themeable React component library and design system — accessible inputs, layout primitives, navigation, overlays, data display, and charts, all driven by a shared set of design tokens.

Installation

pnpm add @gg-software/ui react react-dom
# or: npm install @gg-software/ui react react-dom

react and react-dom are peer dependencies (React 19+).

Setup

Import the stylesheet once at the root of your app (it ships the design tokens plus every component's styles):

import "@gg-software/ui/styles.css";

Then use any component:

import { Button, Card, Stack } from "@gg-software/ui";

export function Example() {
  return (
    <Card>
      <Stack gap="md">
        <Button variant="primary" onClick={() => alert("Hi!")}>
          Click me
        </Button>
      </Stack>
    </Card>
  );
}

Theming

Components read from CSS custom properties (design tokens), so you can theme the whole system by overriding tokens or toggling light/dark mode.

import { ThemeProvider, ColorModeToggle, setTheme, tokens } from "@gg-software/ui";

function App() {
  return (
    <ThemeProvider>
      <ColorModeToggle />
      {/* your app */}
    </ThemeProvider>
  );
}

// or imperatively
setTheme("dark");

Components

• Inputs — Button, IconButton, ButtonGroup, TextInput, Textarea, NumberInput, PasswordInput, SearchInput, Select, MultiSelect, Combobox, MultiCombobox, Checkbox, CheckboxGroup, Radio, RadioGroup, Switch, Slider, DatePicker, DateRangePicker, TimePicker, ColorPicker, FileUpload, Rating, FormField, Fieldset, Form
• Layout — Box, Stack, Flex, Grid, Container, Spacer, Center, Divider, AspectRatio, ScrollArea, AppShell
• Containers & overlays — Card, Panel, Modal, Drawer, Popover, Accordion, Disclosure, Tooltip, ToastProvider
• Data display — Badge, Tag, Avatar, AvatarGroup, ProgressBar, Skeleton, Alert, EmptyState, Stat, Timeline, Table, DataTable, List, DescriptionList, TreeView, Calendar, KanbanBoard
• Charts — LineChart, AreaChart, BarChart, PieChart
• Navigation — Tabs, Breadcrumbs, Pagination, Menu, ContextMenu, Sidebar, Navbar, Stepper, CommandPalette
• Typography & media — Heading, Text, Label, Code, CodeBlock, Kbd, Link, Image, Icon, Spinner
• Utilities — useFloating, FloatingPortal, ThemeProvider, ColorModeToggle, setTheme, tokens

Every component ships full TypeScript types (ButtonProps, CardProps, …).

License

MIT © GG Software