Skip to main content

CSS

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 classes from "./example.module.css";
export const MyStory = () => <h1 className={classes.red}>Red Header</h1>;

PostCSS

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.

Do you want to work on Ladle and other web tooling? Our team at Uber is hiring!