Installation

Prerequisites

• React 18 or 19
• Node.js 18+
• A package manager (pnpm, npm, or yarn)

Install Core Package

# pnpm (recommended)
pnpm add @spectre-ui/core framer-motion

# npm
npm install @spectre-ui/core framer-motion

# yarn
yarn add @spectre-ui/core framer-motion

Install Optional Packages

# Utility hooks
pnpm add @spectre-ui/hooks

# Theme presets
pnpm add @spectre-ui/themes

# Tailwind CSS plugin
pnpm add -D @spectre-ui/tailwind-config

Peer Dependencies

@spectre-ui/core has the following peer dependencies:

• react ^18 || ^19
• react-dom ^18 || ^19
• framer-motion ^11 || ^12 (optional, for animations)
• tailwindcss ^3.4 (optional, for Tailwind integration)

CSS Import

Import the base styles in your app's entry point. This provides the CSS variable definitions for both dark and light themes:

import "@spectre-ui/core/styles.css";

TypeScript

spectre-ui is written in TypeScript and ships with type declarations. No additional @types/* packages are needed.