Spear AI's Component Library

Installation

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:

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

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

Icons

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

Contributor Docs

• AI Contributor Workflow