@clearforest/component-catalogue

An LLM-first developer tool for generating Component Catalogues with three modes: Catalogue (component inventory with variants and docs), Playground (live prop editing with HTML output), and Harness (deterministic routes for Playwright testing).

View Live Demo - Try the catalogue with example components.

Features

• Registry-based - JSON files define components and scenarios
• Framework-agnostic - Works with any web components
• Live Playground - Edit props in real-time with generated HTML
• Visual Testing - Playwright integration for screenshot testing
• Theme Support - Light/dark mode with persistence
• Resizable Preview - Test responsive behavior with breakpoints

Quick Start

# Install from GitHub (npm publishing not yet available)
npm install github:adieyal/component-catalogue

# Initialize a new catalogue
npx catalogue init --name "My Components"

# Start the dev server
npm run catalogue

Documentation

• Installation
• Configuration
• Creating Components
• Scenarios
• Playground Controls
• Categorization
• CLI Reference
• Visual Testing

Project Structure

your-project/
├── catalogue.config.ts          # Configuration
├── registry/
│   ├── components/
│   │   └── <component-id>/
│   │       ├── component.json   # Component metadata
│   │       ├── docs.md          # Documentation
│   │       └── scenarios/
│   │           └── default.json # Scenarios
│   └── examples/
│       └── <example-id>.json    # Standalone examples
└── src/
    └── components/
        └── index.ts             # Component exports

License

MIT