Skip to main content


You can import CSS files directly into your components or stories:

import "./styles.css";

If you want to use your stylesheet across all stories, you can create .ladle/components.tsx file and import it there. This file can be also used to specify a global provider. That can be useful for CSS-in-JS solutions.

CSS Modules

Any CSS file ending with .module.css is considered a CSS modules file. Importing such a file will return the corresponding module object:

/* example.module.css */
.red {
color: red;
import type { Story } from "@ladle/react";
import classes from "./example.module.css";

export const MyStory: Story = () => {
return <h1 className={}>Red Header</h1>;


If the project contains valid PostCSS config (any format supported by postcss-load-config, e.g. postcss.config.js), it will be automatically applied to all imported CSS.

Ladle just defaults to Vite's CSS handling.