@pinset/ui

Themeable React component library for Pinset platform applications.

Installation

npm install @pinset/ui @pinset/tokens

Usage

import { ThemeProvider, Button, Card, CardBody, Badge } from '@pinset/ui'
import '@pinset/tokens'           // Design tokens
import '@pinset/ui/styles.css'    // Component styles

function App() {
  return (
    <ThemeProvider>
      <Card>
        <CardBody>
          <Badge variant="success">Active</Badge>
          <Button>Click me</Button>
        </CardBody>
      </Card>
    </ThemeProvider>
  )
}

Components

Layout

• Card, CardHeader, CardBody, CardTitle

Form

• Button - primary, secondary, accent, danger, ghost
• Input - Text input with label and error
• Textarea - Multi-line text input
• Select - Dropdown select

Feedback

• Badge - default, primary, accent, success, warning, error
• Modal - Dialog overlay

Theme

• ThemeProvider - Theme context provider
• ThemeSwitcher - Theme and color mode picker
• ThemeSwitcherCompact - Compact color mode toggle
• useTheme - Hook for accessing theme context

Themes

Available themes from @pinset/tokens:

| Theme | Description | |-------|-------------| | classic | Bold primaries, high contrast | | earth | Warm, earthy tones | | ocean | Blue-focused, clean aesthetic | | forest | Dark organic, natural accents |

Custom Storage Key

<ThemeProvider storageKeyPrefix="myapp">
  {/* Uses 'myapp-theme' and 'myapp-color-mode' in localStorage */}
</ThemeProvider>

License

MIT