Spear AI 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 the stylesheet for Horizon in your main layout file after your app-specific CSS:

import './styles/your-global-css.css';
import '@spear-ai/spectral/horizon.css';

Meridian apps use the Meridian entry instead:

import './styles/your-global-css.css';
import '@spear-ai/spectral/meridian.css';

Spectral's CSS includes:

• Design tokens (colors, fonts, animations)
• Custom utility & animation classes for Spectral components
• Spectral-specific fonts

The legacy @spear-ai/spectral/spectral.css entry remains an alias for horizon.css.

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
• tsdown for bundling
• Storybook 10 for component documentation
• Oxlint for linting
• Oxfmt for formatting
• Vitest & Playwright for testing

Contributor Docs

• AI Contributor Workflow