Quick start

1. Add the theme provider

ThemeScript applies the saved theme before first paint. ThemeProvider keeps it in sync with the user’s choice and the operating system.

app/layout.tsx

import { ThemeProvider, ThemeScript } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <ThemeScript />
      </head>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

2. Build with components

tsx

'use client';
import { Button, FormField, Input, Dialog, DialogTrigger, DialogContent,
  DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose } from '@bindshq/stance-react';

export function RenameTemplate() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Rename template</Button>
      </DialogTrigger>
      <DialogContent size="sm">
        <DialogHeader>
          <DialogTitle>Rename template</DialogTitle>
        </DialogHeader>
        <DialogBody>
          <FormField label="Template name" description="Visible to everyone in your organisation.">
            <Input defaultValue="Standard signature" />
          </FormField>
        </DialogBody>
        <DialogFooter>
          <DialogClose asChild><Button variant="ghost">Cancel</Button></DialogClose>
          <Button>Save</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

3. Let people choose a theme

tsx

import { ThemeSwitcher } from '@bindshq/stance-react';

<ThemeSwitcher /> // Light · Dark · High contrast · System

4. Use tokens in your own CSS

css

.contract-summary {
  padding: var(--st-space-6);
  background: var(--st-color-bg-surface);
  border: 1px solid var(--st-color-border-default);
  border-radius: var(--st-radius-lg);
  color: var(--st-color-fg-default);
}