@phcdevworks/spectre-ui/README.md

Framework-agnostic UI layer for the Spectre design system. Provides base CSS, component classes, utilities, and a Tailwind preset powered by @phcdevworks/spectre-tokens.

# Spectre UI

**Spectre UI** is the core styling layer of the **Spectre Suite** — a cross-platform design system built on TailwindCSS and powered by Spectre Tokens.

It provides precompiled CSS, utilities, and styling primitives used by **Spectre Blocks** (WordPress), **Spectre Astro**, **Spectre 11ty**, and future Spectre tools.

> One design system. Many frameworks. Full consistency.

---

## Overview

Spectre UI delivers a unified design language across multiple platforms and frameworks. Whether you're building WordPress blocks, static sites with Astro or 11ty, or future Spectre integrations, Spectre UI ensures your styles remain consistent and maintainable.

## Features

- **TailwindCSS Foundation**: Built on top of Tailwind's utility-first approach
- **Token-Driven Design**: Powered by Spectre Tokens for consistent theming
- **Cross-Platform**: Works seamlessly across WordPress, Astro, 11ty, and more
- **Precompiled CSS**: Ready-to-use stylesheets for fast integration
- **Design Primitives**: Reusable styling components and utilities

## Installation

```bash
npm install @phcdevworks/spectre-ui
```

## Usage

Import Spectre UI styles into your project:

```css
@import '@phcdevworks/spectre-ui';
```

Or use the precompiled CSS directly in your HTML:

```html
<link rel="stylesheet" href="node_modules/@phcdevworks/spectre-ui/dist/spectre-ui.css">
```

## Part of the Spectre Suite

- **Spectre Tokens**: Design token foundation
- **Spectre UI**: Core styling layer (this package)
- **Spectre Blocks**: WordPress block library
- **Spectre Astro**: Astro integration
- **Spectre 11ty**: Eleventy integration

## License

MIT

## Contributing

Contributions are welcome! Please open an issue or submit a pull request.