Styles

Default styles

Leda has some default styles so it is ready to use immediately.

import 'leda/dist/styles/leda.base.css';

There are a few ways to change styles:

Variables

css variables list

Each component has it's own set of variables covering every numeric or color value. So you can create your own variables file to change the way all components look.

Just add it after default styles import:

import 'leda/dist/styles/leda.base.css';
import 'your-variables.css';

Your own CSS

Feel free to overwrite default styles:

import 'leda/dist/styles/leda.base.css';
import 'your-custom-css.css';

All components on this site are styled by the default css.


<L.Button
  onClick={() => {
    console.log('clicked')
  }}
>
  Click me
</L.Div>
        

Theme

Each Form and Layout component exposes a theme prop.

It lets you add your own css-classes to any component's element.

In this site we use Tailwind utility classes:


<L.Button
  theme={{
    wrapper: 'ld-btn text-sky-500',
  }}
>
  Click me
</L.Div>