Skip to Content
Getting Started

Getting Started

Installation

All packages are published publicly to npm under the @gg-software scope.

pnpm add @gg-software/ui react react-dom

react and react-dom (v19) are peer dependencies — the consuming app provides them.

Load the stylesheet

The package ships one global stylesheet containing the design tokens (CSS variables) and all component styles. Import it once, at your app’s entry point:

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

Without it, components render unstyled.

ThemeProvider manages the light/dark theme, persists the user’s choice to localStorage and applies it via a data-theme attribute on <html>:

import { ThemeProvider } from '@gg-software/ui';
import '@gg-software/ui/styles.css';
 
export function App() {
    return (
        <ThemeProvider defaultTheme="light" followSystem>
            <YourApp />
        </ThemeProvider>
    );
}

See Theming for the full theming API (tokens, custom themes, color-mode toggle).

Use components

import { Button, Card, TextInput, useToast } from '@gg-software/ui';
 
export function Example() {
    return (
        <Card title="Sign in">
            <TextInput placeholder="Email" type="email" />
            <Button variant="primary" type="submit">
                Continue
            </Button>
        </Card>
    );
}

Every component is documented in Components — with live previews and a complete, generated prop reference.

Server components (Next.js App Router)

@gg-software/ui is a client component library (its bundle starts with 'use client'). You can import and render its components directly from server components — React treats them as client references automatically. Just remember:

  • Props you pass from a server component must be serializable — no inline function props (e.g. onClick) from server files. Wrap interactive usage in your own client components.
  • The stylesheet import works in the root layout of an App Router project.

TypeScript

The package ships full type declarations. Every component exports its prop type (ButtonProps, SelectProps, …) plus supporting types (SelectOption, MenuItem, TableColumn, …), so you can build typed wrappers:

import type { ButtonProps } from '@gg-software/ui';
 
function SubmitButton(props: Omit<ButtonProps, 'type'>) {
    return <Button {...props} type="submit" />;
}
IntroductionTheming