Accessible
Ladle is accessible and keyboard friendly.
Automatic code-splitting
Ladle supports automatic code-splitting for stories.
Production build
Creates an optimized and minified build folder.
Code Splitting
Ladle code-splits stories by default.
Context Parameter
Access Ladle's context through the second parameter to control global state and addons.
Development server
Starts a dev server with hot reload for development.
ES Modules Support
Ladle is implemented as an ES module and requires Node 20+ with full ESM support.
Global Provider
Create a .ladle/components.tsx file to specify a global provider for CSS-in-JS.
Global Provider Configuration
Add a global provider via .ladle/components.tsx to wrap all stories.
Meta file
Ladle supports a meta file for additional configuration.
Meta JSON Generation
Ladle exports meta.json with story metadata and additional annotations.
Next.js Integration
Works with Next.js with caveats and workarounds for next/image, next/link, and next/navigation.
Preview command
Serves the production build through an HTTP server.
React Fast Refresh
React Fast Refresh is enabled by default.
Responsive
Ladle is responsive.
Story Decorators
Wrap all stories in a file with additional React components.
Story glob
Automatically finds stories matching src/**/*.stories.{js,jsx,ts,tsx,mdx}.
Story Loading Detection
Ladle adds data-storyloaded attribute to enable testing frameworks to wait for story load.
Story Source Code
View the source code of stories.
URL State Persistence
Addons and their state are persisted through the URL.
useLadleContext Hook
Access and modify internal global state and dispatch actions from stories.
Verbose Output
Enable verbose output using DEBUG=ladle* environment variable or browser local storage.
Vite CSS Handling
Ladle defaults to Vite's CSS handling for PostCSS.
Width Addon
Adjust the width of the preview.
Zero configuration
No initial configuration required.