Theming
Basics
collapse
info
Colors
collapse
info
Theme Type
Light
Primaryinfo
Secondaryinfo
Successinfo
Errorinfo
Infoinfo
Warninginfo
Backgroundinfo
Dividerinfo
Textinfo
info
Appearance
collapse
info
Breakpoints
collapse
info
Typography
collapse
info
Density
collapse
info
Components
collapse
info
hide side bar
Theme.js
1const theme =
2  createTheme({});
3
Environment setup
Made withby
Lenio
Hire our team
info

Design System Builder

Buttons

Contained Buttons
Link
Success
Info
Warning
Error
Text Buttons
Link
Outlined Buttons
Link
Buttons with icons and label
Icon Buttons

Cards

Simple

Word of the Day

be•nev•o•lent

adjective

well meaning and kindly.
"a benevolent smile"

Outlined

Word of the Day

be•nev•o•lent

adjective

well meaning and kindly.
"a benevolent smile"

Chips

Filled
Basic
Disabled
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable Link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary
Outlined
Basic
Disabled
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable Link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

TextFields

Some important text

Some important text

Some important text

Some important text

Some important text

Some important text

Alerts

Basic
Outlined
Filled

Pagination

Basic
Outlined
Size

Tabs

Item One

List

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

ToolBar

News

Fab

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur

body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

button textcaption textoverline text
Sign up for a demo

Terms and conditions*