open-index/open-npm huggingface dataset:
npm package: @stella-ds/react
Description: Stella UI React component library – Radix UI primitives with design tokens
Latest version: 0.3.1

# @stella-ds/react

React component library for the [Stella Design System](https://github.com/theta-prog/stella-ds).

Accessible, composable components built on [Radix UI Primitives](https://www.radix-ui.com/) with CSS Modules styling and `--stella-*` design tokens.

## Installation

```bash
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:

```ts
import '@stella-ds/theme/css'
```

## Usage

```tsx
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)](https://github.com/theta-prog/stella-ds)
- [Design Tokens — @stella-ds/theme](https://www.npmjs.com/package/@stella-ds/theme)
- [GitHub](https://github.com/theta-prog/stella-ds)

## License

MIT
npm package: @stella-ds/theme
Description: Stella UI design tokens – framework-agnostic CSS variables and JSON
Latest version: 0.3.0

# @stella-ds/theme

Design tokens for the [Stella Design System](https://github.com/theta-prog/stella-ds).

Framework-agnostic — distributed as CSS custom properties (`--stella-*`) and a JSON token object.

## Installation

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

## Usage

### CSS (recommended)

```ts
import '@stella-ds/theme/css'
```

Injects all `--stella-*` CSS custom properties into `:root`.

### JavaScript / TypeScript

```ts
import { tokens } from '@stella-ds/theme'
// → raw token object

import { cssVariables, injectCSSVars } from '@stella-ds/theme'
// cssVariables: flat { '--stella-color-cosmos-500': '#6366f1', ... }
// injectCSSVars(): programmatically injects into document.documentElement
```

## Token Categories

| Category | Description |
|---|---|
| `color` | Celestial color palettes (`cosmos`, `nebula`, `aurora`, `nova`, `void`, `starlight`) |
| `typography` | Font families, sizes, weights, line heights |
| `spacing` | Spacing scale |
| `borderRadius` | Border radius presets |
| `shadow` | Box shadow levels |
| `transition` | Duration and easing |

## Color Palettes

- `cosmos` — primary / interactive (indigo)
- `nebula` — accent (purple)
- `aurora` — accent (cyan)
- `nova` — success / positive (emerald)
- `void` — backgrounds (`base` / `surface` / `overlay` / `muted`)
- `starlight` — text (`primary` / `secondary` / `disabled`)

## Links

- [Component Library — @stella-ds/react](https://www.npmjs.com/package/@stella-ds/react)
- [GitHub](https://github.com/theta-prog/stella-ds)

## License

MIT