Storybook 8 vs Ladle vs Histoire: Component Workshop Tools 2026

Storybook 8 cold starts in 8 seconds. Ladle cold starts in 1.2 seconds — 6.7x faster. Histoire lands in the middle at about 2 seconds. But Storybook has an ecosystem that Ladle and Histoire can't match: accessibility testing, visual regression, Chromatic, Figma integration, and 200+ addons. The right choice depends on whether you need a full design system platform or just a fast component preview tool.

TL;DR

Storybook 8 for design systems, large teams, and projects that need accessibility testing, visual regression, and documentation — the undisputed ecosystem leader with 2.5M weekly downloads. Ladle for React-only projects that want a fast, Vite-native Storybook alternative with minimal overhead. Histoire for Vue/Svelte projects that want better performance than Storybook with more features than Ladle. For most teams building in 2026, Storybook's ecosystem advantage wins unless startup speed is a critical pain point.

Key Takeaways

• Storybook 8: 2.5M weekly downloads, 84K GitHub stars, Vite builder, 200+ addons, Vitest integration
• Ladle: 100K weekly downloads, 2.5K GitHub stars, React-only, Vite-native, 6.7x faster cold start
• Histoire: 30K weekly downloads, 3.5K GitHub stars, Vue/Svelte focus, ~2x faster than Storybook
• Storybook 8 Vitest: Stories become Vitest test cases automatically
• Storybook 8: Play functions, a11y addon, Chromatic visual testing, Figma design tokens
• Ladle: Story format compatible with Storybook (same CSF), but no addon ecosystem
• Histoire: Built for Vue 3 first, Svelte support, Nuxt/SvelteKit integration

Cold Start Comparison

Component workshop startup time (medium project, 50 stories):

Storybook 8 (Webpack): ~15-20s
Storybook 8 (Vite):    ~8s
Histoire:              ~2s
Ladle:                 ~1.2s

Hot reload (single story change):
Storybook 8 (Vite):   ~2s
Histoire:              ~500ms
Ladle:                 <500ms

For a developer who opens the workshop dozens of times per day, this difference compounds. Ladle's sub-second hot reload is genuinely better for rapid iteration.

Storybook 8

Package: storybook Weekly downloads: 2.5M GitHub stars: 84K Creator: Storybook team (Chromatic-backed) Frameworks: React, Vue, Angular, Svelte, Ember, Web Components, HTML

Storybook 8 is the latest major version with significant performance improvements (Vite builder by default), a new Vitest integration, and improved testing primitives.

Installation

npx storybook@latest init
# Detects your framework automatically

Story Format (CSF3)

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  title: 'UI/Button',
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'destructive'],
      description: 'Visual style of the button',
    },
    disabled: { control: 'boolean' },
  },
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Click me',
  },
};

export const Disabled: Story = {
  args: {
    variant: 'primary',
    disabled: true,
    children: 'Disabled',
  },
};

Play Functions (Interaction Tests)

import { userEvent, within, expect } from '@storybook/test';

export const FormSubmit: Story = {
  args: { /* ... */ },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    // Fill in the form
    await userEvent.type(
      canvas.getByLabelText('Email'),
      'alice@example.com'
    );

    // Submit
    await userEvent.click(
      canvas.getByRole('button', { name: 'Submit' })
    );

    // Assert on result
    await expect(
      canvas.getByText('Thank you!')
    ).toBeInTheDocument();
  },
};

Play functions run in the Storybook UI (you see the interaction animate) AND in the automated test runner.

Storybook 8 Vitest Integration

npx storybook@latest add @storybook/experimental-addon-test

// vitest.config.ts
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';

export default defineConfig({
  plugins: [
    storybookTest({ configDir: '.storybook' }),
  ],
  test: {
    browser: {
      enabled: true,
      provider: 'playwright',
      name: 'chromium',
    },
  },
});

# Now Vitest runs all stories with play functions as tests:
vitest
# All stories → component tests
# Stories with play() → interaction tests
# Stories with a11y addon → accessibility tests

Accessibility Testing

npx storybook@latest add @storybook/addon-a11y

Every story automatically gets accessibility checking — WCAG violations show up in the Accessibility tab in the Storybook UI:

export const LowContrastButton: Story = {
  args: {
    style: { color: '#777', backgroundColor: '#888' }, // Low contrast
  },
  parameters: {
    a11y: {
      // Temporarily disable specific rules for known issues:
      config: {
        rules: [{ id: 'color-contrast', enabled: false }],
      },
    },
  },
};

Visual Regression with Chromatic

npm install -D chromatic

# Run visual regression tests against all stories
npx chromatic --project-token=<token>
# Compares to last accepted build — catches visual regressions

Storybook Strengths

• Largest ecosystem: 200+ addons for accessibility, documentation, design, data
• Multi-framework: React, Vue, Angular, Svelte — one tool for the whole team
• Chromatic integration for automated visual regression
• Figma and design token integrations
• Play functions for interaction tests in stories
• Vitest integration for automated testing of all stories

Storybook Limitations

• Slow cold start (8s with Vite, more with Webpack)
• Heavy initial configuration for non-React frameworks
• Large dependency tree
• Complex addon API can be difficult to extend

Ladle

Package: @ladle/react Weekly downloads: 100K GitHub stars: 2.5K Creator: Vojta Jína Frameworks: React only

Ladle is a minimal, Vite-native Storybook alternative for React. It uses the same CSF story format as Storybook, so migration is straightforward.

Installation

npm install -D @ladle/react

// package.json
{
  "scripts": {
    "ladle": "ladle serve",
    "ladle:build": "ladle build"
  }
}

Story Format (Compatible with Storybook CSF)

// Button.stories.tsx — same format as Storybook
import type { Story } from '@ladle/react';
import { Button } from './Button';

export const Primary: Story = () => (
  <Button variant="primary">Click me</Button>
);

export const Secondary: Story = () => (
  <Button variant="secondary">Secondary</Button>
);

// With args:
export const WithArgs: Story<{ label: string }> = ({ label }) => (
  <Button>{label}</Button>
);
WithArgs.args = { label: 'Custom Label' };

Performance

# First startup:
ladle serve  # ~1.2s

# Hot reload after file change:
# <500ms — Vite HMR

Ladle uses Vite directly — no Storybook abstraction layer. This means it benefits from Vite's full HMR speed.

Ladle Limitations

• React only — no Vue, Angular, Svelte
• No addon ecosystem (no a11y checker, no Chromatic, no documentation addons)
• No play functions for interaction testing
• Less documentation and fewer community resources
• Not suitable for large design systems that need documentation

When Ladle Wins

• Small React projects where fast iteration matters more than documentation
• Individual developers who find Storybook's startup too slow
• Projects that just need component preview, not a full documentation platform

Histoire

Package: histoire Weekly downloads: 30K GitHub stars: 3.5K Creator: Akryum (Guillaume Chau, Vue core team) Frameworks: Vue 3, Svelte (React experimental)

Histoire is the best Storybook alternative for Vue 3 and Svelte. It's built by a Vue core team member and uses a Vue-native API.

Installation

npm install -D histoire @histoire/plugin-vue

// histoire.config.ts
import { defineConfig } from 'histoire';
import { HstVue } from '@histoire/plugin-vue';

export default defineConfig({
  plugins: [HstVue()],
});

Story Format (Histoire-specific)

<!-- Button.story.vue -->
<script setup lang="ts">
import { reactive } from 'vue';
import Button from './Button.vue';

const state = reactive({
  variant: 'primary',
  label: 'Click me',
  disabled: false,
});
</script>

<template>
  <Story title="Button">
    <Variant title="Default">
      <Button :variant="state.variant" :disabled="state.disabled">
        {{ state.label }}
      </Button>

      <template #controls>
        <HstSelect v-model="state.variant" :options="['primary', 'secondary', 'destructive']" title="Variant" />
        <HstText v-model="state.label" title="Label" />
        <HstCheckbox v-model="state.disabled" title="Disabled" />
      </template>
    </Variant>
  </Story>
</template>

The HstSelect, HstText, HstCheckbox controls are histoire's equivalent of Storybook's argTypes.

Histoire Strengths

• Vue-native API — feels natural for Vue developers
• Better performance than Storybook (2x faster startup)
• SvelteKit integration for Svelte projects
• Vite-based: fast HMR
• Better for Vue design systems than Storybook

Histoire Limitations

• React support is experimental (Vue/Svelte are primary)
• Much smaller ecosystem than Storybook
• Less community resources and examples
• No visual regression or accessibility integrations out of the box

Feature Comparison

Feature	Storybook 8	Ladle	Histoire
Cold start	~8s	~1.2s	~2s
Hot reload	~2s	<500ms	~500ms
React support	Yes	Yes (only)	Experimental
Vue support	Yes	No	Yes (primary)
Svelte support	Yes	No	Yes
Accessibility addon	Yes	No	No
Visual regression	Chromatic	No	Via plugins
Play functions	Yes	No	No
Vitest integration	Yes	No	No
Addon ecosystem	200+	None	Limited
Weekly downloads	2.5M	100K	30K

Decision Guide

Choose Storybook 8 if:

• You're building a design system that needs documentation, visual regression, and accessibility testing
• Your team spans React, Vue, and Angular (multi-framework)
• Chromatic integration for visual regression is required
• Play functions for testing within stories are valuable
• You want Vitest integration for automated story testing

Choose Ladle if:

• Your project is React-only
• Startup speed is a major pain point with Storybook
• You only need component preview (no documentation, no a11y, no visual regression)
• Prototyping or personal projects where Storybook's overhead isn't justified

Choose Histoire if:

• Your project is Vue 3 or Svelte
• You want better performance than Storybook with a Vue-native API
• You don't need Storybook's extensive addon ecosystem

In 2026, for most teams, Storybook 8's ecosystem advantage is decisive — especially with the Vitest integration making stories automatically testable. Ladle and Histoire serve specific niches where Storybook's overhead outweighs its benefits.

Compare component workshop downloads on PkgPulse.