open-index/open-npm huggingface dataset:
npm package: @spear-ai/spectral
Description: ![spectral-logo](https://spectral.s3.us-gov-west-1.amazonaws.com/logo-for-github.svg)
Latest version: 1.10.0

![spectral-logo](https://spectral.s3.us-gov-west-1.amazonaws.com/logo-for-github.svg)

# Spear AI's Component Library

## Installation

```bash
npm install @spear-ai/spectral
# or
pnpm add @spear-ai/spectral
# or
yarn add @spear-ai/spectral
```

## Requirements

- React 18 or 19
- Tailwind CSS v4

## Usage

### CSS Setup

Import Spectral's CSS in your main layout file AFTER the import of your repo-specific css:

```css
import "./styles/global.css";
import "@spear-ai/spectral/spectral.css";
```

Spectral's CSS includes:

- Design tokens (colors, fonts, animations)
- Custom utility classes for Spectral components (e.g., `bg-button-primary-bg`)

Your Tailwind setup provides the standard utilities (flex, grid, responsive breakpoints, etc.).

### Using Components

```tsx
import { Button } from '@spear-ai/spectral/Button'
import { Input } from '@spear-ai/spectral/Input'
```

### Icons

```tsx
import { CheckIcon, CloseIcon } from '@spear-ai/spectral/Icons'

// Or import individual icons
import { CheckIcon } from '@spear-ai/spectral/Icons/CheckIcon'
```

---

## Development Stack

- **React 19** + **TypeScript 5.9**
- **Tailwind CSS v4**
- **Vite** for build optimization
- **Storybook 10** for component documentation
- **OXLint** for ultra-fast linting
- **Prettier** with oxc plugin for formatting
- **Vitest & Playwright** for testing