@stella-ds/react

React component library for the Stella Design System.

Accessible, composable components built on Radix UI Primitives with CSS Modules styling and --stella-* design tokens.

Installation

npm install @stella-ds/react @stella-ds/theme
# or
pnpm add @stella-ds/react @stella-ds/theme

Setup

Import the design tokens CSS in your app entry point:

import '@stella-ds/theme/css'

The compiled theme CSS includes official light and dark scopes:

<section data-theme="light">
  <Card>
    <Text color="secondary">Scoped light theme</Text>
  </Card>
</section>

For scoped theming with portal-based components such as Dialog, use ThemeProvider:

import { ThemeProvider, Dialog, DialogTrigger, DialogContent, Button } from '@stella-ds/react'

<ThemeProvider theme="light">
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Open</Button>
    </DialogTrigger>
    <DialogContent>
      Dialog content keeps the same theme scope.
    </DialogContent>
  </Dialog>
</ThemeProvider>

Usage

import { Button } from '@stella-ds/react'

<Button variant="solid" size="md">Click me</Button>
<Button variant="glow" size="lg">✦ Launch</Button>
<Button variant="outline" loading>Saving…</Button>

// Polymorphic — render as <a> via asChild
<Button asChild variant="outline">
  <a href="/docs">Read Docs</a>
</Button>

Components

Button, Input, Checkbox, Radio, Select, Switch, Tabs, Dialog, Toast, Tooltip, Badge, Card, Avatar, Heading, Text, Stack, Section, Separator, Skeleton, Breadcrumb, Header, Footer, PageGrid, Background, Alert

Links

• Documentation (Storybook)
• Design Tokens — @stella-ds/theme
• GitHub

License

MIT