Installation

Requirements

Node.js 23.0.0 or higher
pnpm, npm, or yarn

Install from GitHub

Note: npm publishing is not yet available. Install directly from GitHub.

# Using npm
npm install github:adieyal/component-catalogue

# Using pnpm
pnpm add github:adieyal/component-catalogue

# Using yarn
yarn add github:adieyal/component-catalogue

# Pin to a specific commit (recommended for stability)
npm install github:adieyal/component-catalogue#<commit-sha>

Quick Start

The fastest way to get started is with the init command:

# Create a new directory for your project
mkdir my-components && cd my-components

# Initialize the catalogue (add --with-claude for Claude Code skills)
npx github:adieyal/component-catalogue init --name "My Components"

# Start the dev server
npm run catalogue

This creates:

catalogue.config.ts - Configuration file
registry/ - Component registry with a sample button
src/components/ - Component source files
tsconfig.json - TypeScript configuration
package.json scripts

Manual Setup

If you prefer to set up manually:

Install Package

npm install github:adieyal/component-catalogue

Create Configuration

Create catalogue.config.ts in your project root:

export default {
  // Catalogue title (shown in header)
  title: 'My Component Library',

  // Path to registry directory
  registryDir: './registry',

  // Output directory for builds
  outDir: './dist/catalogue',

  // Base path for deployment (e.g., '/docs/')
  basePath: '/',

  // Dev server port
  port: 5173,

  // Component source configuration
  components: {
    entry: './src/components/index.ts',
  },
};

Create Directory Structure

mkdir -p registry/components
mkdir -p registry/examples
mkdir -p src/components

Create Component Entry Point

Create src/components/index.ts:

// Export all your web components here
// export * from './my-button.js';
// export * from './my-card.js';

Verify Installation

# Validate the registry (should show 0 components)
npx catalogue validate

# Start the dev server
npx catalogue dev

Add Scripts to package.json

{
  "scripts": {
    "catalogue": "catalogue dev",
    "catalogue:build": "catalogue build",
    "catalogue:preview": "catalogue preview",
    "catalogue:validate": "catalogue validate",
    "catalogue:test": "catalogue test"
  }
}

Local Development (Linking)

If you’re developing the catalogue tool alongside your project:

# Clone the catalogue repo
git clone https://github.com/adieyal/component-catalogue.git

# In your project, link to the local clone
npm install ../component-catalogue

# Or use pnpm link
pnpm link ../component-catalogue

Component Catalogue