About Ladle
Overview
Ladle is an open-source component development environment built on Vite. It lets front-end developers build, test, and document UI components in isolation, with instant feedback through fast refresh and hot module replacement.
Ladle is compatible with the Component Story Format and Controls, so teams can bring existing Storybook stories into Ladle. It ships with support for links, themes, right-to-left layouts, source code viewing, accessibility checks with axe, and TypeScript or Flow type checking.
Key Benefits
- Compatible with the Component Story Format and Controls, so existing stories carry over.
- Powered by Vite and esbuild for fast startup and instant hot module replacement.
- Requires zero configuration, with a single dependency and a single command.
- Runs accessibility checks with axe out of the box.
- Supports links, themes, right-to-left layouts, and source code viewing by default.
- Works with TypeScript and Flow out of the box.
How It Works
Ladle runs on Vite's dev server. You write stories using the Component Story Format, and Ladle serves each story with its own fast refresh, letting you edit components and see the changes immediately. No configuration is needed to start, though the tool remains customizable.
Use Cases
- Component library maintainers who need a fast, zero-config environment for their design systems.
- Front-end teams migrating from Storybook while keeping their existing CSF stories.
- Developers who want built-in axe accessibility checks during component work.
- Teams building internationalized products who need themes and right-to-left layouts.
Why Choose This Product
Ladle positions itself as a lightweight alternative to larger component explorers. Because it is built entirely on Vite and esbuild, it starts quickly and stays small while remaining compatible with the Component Story Format.
Key Features
Fast refresh
Powered by Vite with HMR and Fast Refresh for each story.
Component Story Format
Compatible with the Component Story Format and Controls out of the box.
Zero configuration
Runs with a single dependency and a single command, with no configuration needed.
Accessibility checks
Runs a11y checks with axe out of the box.
Themes and RTL
Supports themes and right-to-left layouts by default.
Source code view
Displays component source code out of the box.
Link support
Supports links between stories and components out of the box.
TS and Flow
Supports TypeScript and Flow type checking out of the box.
Ladle Pricing
Pricing extracted from the product website and may change. Check the source for current details.