Azucar UI
The design system that makes your app sweet.
Settings
Settings
Color System
Click to copy a color.
Light Base Color
color-bg-app
color-bg-subtle
color-bg
color-bg-hover
color-bg-active
color-border-subtle
color-border
color-border-focus
color-bg-solid
color-bg-solid-hover
color-bg-solid-active
color-fg-low
color-fg-high
color-fg-solid
Dark Base Color
color-bg-app
color-bg-subtle
color-bg
color-bg-hover
color-bg-active
color-border-subtle
color-border
color-border-focus
color-bg-solid
color-bg-solid-hover
color-bg-solid-active
color-fg-low
color-fg-high
color-fg-solid
Light Neutral Color
color-bg-app
color-bg-subtle
color-bg
color-bg-hover
color-bg-active
color-border-subtle
color-border
color-border-focus
color-bg-solid
color-bg-solid-hover
color-bg-solid-active
color-fg-low
color-fg-high
color-fg-solid
Dark Neutral Color
color-bg-app
color-bg-subtle
color-bg
color-bg-hover
color-bg-active
color-border-subtle
color-border
color-border-focus
color-bg-solid
color-bg-solid-hover
color-bg-solid-active
color-fg-low
color-fg-high
color-fg-solid
Sizes
XXS
XS
SM
MD
LG
XL
XXL
Scroll
Details
This is a Detail
This is a Detail
Toulouse !
This is a Framed Detail
This is a Framed Detail
net7
A A customed summary
10/09/2026
A
A customed summary
10/09/2026
Hello there !
Dialogs
Switches
Text inputs
Dropdown
Actions output :
Selects
Frames
This is a frame.
With a shadow.
With a border.
Semi-transparent frame.
Semi-transparent, border and shadow.
Interactive.
Interactive with shadow.
Interactive with border and shadow.
This is a neutral frame.
Badges
Default
Outline
Ghost
Icon
net7
Avatars
BDE
BDE
BDE
Tables
| Name | Color | Quality |
|---|---|---|
| Apple | Red | Great |
| Banana | Yellow | Awful |
| Watermelon | Green | Good |
Toasts
Simple toast
Successful toast
Warning toast
Error toast
With close button
Loading...
With custom icon
Tabs
Holà
Sliders
Skeletons
Tooltips
Bla bla bla
From each according to his ability, to each according to his need
On the left
On the right
On the top
On the bottom