Storybook Alternative

Component
Showcase

A lightweight, fast alternative to Storybook for showcasing React components. Built with Vite for instant HMR.

Get Started
10x
Faster than Storybook
Zero
Configuration needed
100%
TypeScript support

Why React Showcase?

Everything you need to develop, test, and document your React components.

Lightning Fast

Powered by Vite for near-instant startup times. No more waiting 30+ seconds for your component library to load.

Zero Config

Works out of the box with automatic component detection. Just create *.showcase.tsx files and start developing.

Hot Module Replacement

See changes instantly as you code. Components update without losing state or requiring page refresh.

Interactive Props

Auto-generated controls for component props. Test every variant and state combination in real-time.

Type-Safe

Full TypeScript support with intelligent prop inference. Catch errors before they hit production.

Dark Mode

Built-in theme switching for testing both light and dark appearances with a single click.

Get Started in 3 Steps

From install to running showcase in under a minute.

01

Install the package

Add React Showcase to your project using your preferred package manager.

$ npm install @component-labs/react-showcase
02

Initialize configuration

Create a showcase configuration file with a single command.

$ npx showcase init
03

Start showcasing

Run the development server and start building your component library.

$ npx showcase dev

Documentation

Everything you need to know to get the most out of React Showcase.

Creating Showcases

Learn how to create showcase files with the *.showcase.tsx naming convention and define multiple component variants.

CLI Commands

Explore all available CLI commands including dev, build, and init with their options and flags.

Deployment

Deploy your component showcase to Vercel, Netlify, GitHub Pages, or any static hosting provider.

Configuration

Customize your showcase with advanced configuration options including custom patterns, ports, and themes.

Configuration

showcase.config.ts
import { defineConfig } from "@component-labs/react-showcase/config";

export default defineConfig({
  // Pattern to match your showcase files
  include: ["src/**/*.showcase.{tsx,jsx}"],

  // Optional: Exclude certain paths
  exclude: ["node_modules/**", "dist/**"],

  // Optional: Custom title
  title: "My Component Library",

  // Optional: Port for dev server
  port: 6060,
});

Showcase File

Button.showcase.tsx
import { Button } from "./Button";
import type { Props } from "@component-labs/react-showcase";

export default {
  title: "Button",
};

export function Primary() {
  return <Button variant="primary">Click me</Button>;
}

export function Interactive() {
  return (
    <Button variant="primary" size="medium">
      Interactive Button
    </Button>
  );
}

Interactive.props = {
  variant: {
    type: "select",
    label: "Variant",
    default: "primary",
    options: ["primary", "secondary", "outline"],
  },
  size: {
    type: "select",
    label: "Size",
    default: "medium",
    options: ["small", "medium", "large"],
  },
  disabled: {
    type: "boolean",
    label: "Disabled",
    default: false,
  },
} satisfies Props;

Ready to get started?

Install React Showcase and start building your component library today.

View on GitHubNPM Package