'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Extras
Playground
Every example, in both themes at once.
Icons
Sizes and tones
Stroke
Another icon set
Button
Variants
Sizes
With icons
Loading and disabled
Full width
IconButton
Icon buttons
Sizes and shapes
SegmentedControl
Segmented control
Showing: week
Showing: week
Small
ToggleButton
Heading and Text
Headings
Design that plays
Section title
Card title
Interface heading
With the gradient
Design that plays
Section title
Card title
Interface heading
With the gradient
Text
Large lead text for introductions.
Body text at 16 px, the default.
Muted text for secondary details.
Faint text for the least important things.
Saved to the file
Couldn't connect
A long line that gets cut with an ellipsis when it runs out of room.
Large lead text for introductions.
Body text at 16 px, the default.
Muted text for secondary details.
Faint text for the least important things.
Saved to the file
Couldn't connect
A long line that gets cut with an ellipsis when it runs out of room.
Eyebrow, code and keys
Figma plugin
Token Converter
Install with npm i @alea/ui, then press ⌘ K to search.
Figma plugin
Token Converter
Install with npm i @alea/ui, then press ⌘ K to search.
Link
Variants
Read the theming guide to change the accent.
InstallationMade in Caracas · Accessibility
React Aria docs (opens in a new tab)Read the theming guide to change the accent.
InstallationMade in Caracas · Accessibility
React Aria docs (opens in a new tab)Stack, Inline, Grid
Stack and Inline
Stack with gap 4 (16 px)
Stack with gap 4 (16 px)
Grid
Palette
Figma plugin
Contrast
Figma plugin
Type scale
Figma plugin
Color vision
Figma plugin
Tokens
Figma plugin
A11y
Figma plugin
Palette
Figma plugin
Contrast
Figma plugin
Type scale
Figma plugin
Color vision
Figma plugin
Tokens
Figma plugin
A11y
Figma plugin
Divider
Above
Left
Right
Above
Left
Right
Card
Variants
Default
The Alea panel.
Deep
An inset area.
Outline
Just a border.
Default
The Alea panel.
Deep
An inset area.
Outline
Just a border.
Interactive card
Padding
Tight
Normal
Loose
Tight
Normal
Loose
TextField
Text field
Validation
Prefix, suffix and sizes
TextArea
SearchField and PasswordField
Search
Type to search
Type to search
Password
NumberField
Number field
Formats
Checkbox
Checkbox
Checkbox group
Selected: contrast
Selected: contrast
Select all
Cards
Radio
Radio group
Cards
Horizontal
Switch
Switch
Settings rows
Select
Select
Descriptions and icons
Sections and validation
Slider
Slider
Range
Dialog
Dialog
AlertDialog
Sizes
Popover
Popover
With an arrow
Tooltip
Tooltip
Tabs
Tabs
Generates a full color system as Figma variables.
Generates a full color system as Figma variables.
Pills
The live component.
The live component.
Vertical
Name and description.
Name and description.
Accordion
FAQ
Joined, several open
Badge
Tones
Status and counts
Tag
Removable tags
Filters
Avatar
Avatars
Group
Alert
Tones
New in 0.1
Variables created
One mode on the Free plan
Couldn't load the font
New in 0.1
Variables created
One mode on the Free plan
Couldn't load the font
Actions and dismiss
Lab Pro is out
Lab Pro is out
Toast
Toasts
With an action
Progress and Meter
Progress bar
Progress circle
Meter
Segments
Spinner and Skeleton
Spinner
Skeleton
AppShell
AppShell
Breadcrumbs
Breadcrumbs
Custom separator
Pagination
Pagination
Page 6 of 24
Page 6 of 24
Compact
Steps
Steps
Vertical
Menu
Actions
Selectable
Submenus
CommandPalette
Command palette
Drawer
Drawer
Popconfirm
Popconfirm
Not only for deletes
ComboBox and TagField
ComboBox
Free text
TagField
Dates and times
DatePicker
Range and limits
DateField and TimeField
Calendar
October 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
October 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Date and time
Form
Form with server errors
Error summary
Fix these to continue
Fix these to continue
FileUpload
FileUpload
Several files
Rating
Rating
4 of 5
4 of 5
Read only and sizes
ColorPicker and ContrastBadge
ColorPicker
ContrastBadge
Table
Sorting and selection
Plugin | Kind | Users | Status | |
|---|---|---|---|---|
| Contrast Checker | Accessibility | 3,410 | Live | |
| Palette Generator | Color | 1,240 | Live | |
| Type Scale | Type | 860 | Live | |
| Spec Sheet | Handoff | 120 | Beta | |
| Icon Audit | Icons | 95 | Beta |
0 selected
Plugin | Kind | Users | Status | |
|---|---|---|---|---|
| Contrast Checker | Accessibility | 3,410 | Live | |
| Palette Generator | Color | 1,240 | Live | |
| Type Scale | Type | 860 | Live | |
| Spec Sheet | Handoff | 120 | Beta | |
| Icon Audit | Icons | 95 | Beta |
0 selected
Sticky header, compact, resizable
Token | Sample |
|---|---|
--alea-bg | |
--alea-surface | |
--alea-surface-deep | |
--alea-surface-raised | |
--alea-border | |
--alea-border-strong | |
--alea-text | |
--alea-text-muted | |
--alea-text-faint | |
--alea-accent | |
--alea-accent-strong | |
--alea-focus |
Token | Sample |
|---|---|
--alea-bg | |
--alea-surface | |
--alea-surface-deep | |
--alea-surface-raised | |
--alea-border | |
--alea-border-strong | |
--alea-text | |
--alea-text-muted | |
--alea-text-faint | |
--alea-accent | |
--alea-accent-strong | |
--alea-focus |
Empty
File | Format |
|---|---|
No exports yetExport tokens from the Figma plugin and they show up here. | |
File | Format |
|---|---|
No exports yetExport tokens from the Figma plugin and they show up here. | |
ListView
ListView
Separated, with actions
Tree
Tree
Selection
Descriptions and Statistic
Descriptions
- Plan
- Lab Pro yearly
- Status
- Active
- Renews
- October 17, 2027
- Seats
- 3 of 5
- License key
FL-8K2D-Q9XA-77PL
- Plan
- Lab Pro yearly
- Status
- Active
- Renews
- October 17, 2027
- Seats
- 3 of 5
- License key
FL-8K2D-Q9XA-77PL
Statistic
EmptyState and Result
EmptyState
No palettes yet
Make your first one from a brand color. It takes about a minute.
No palettes yet
Make your first one from a brand color. It takes about a minute.
Result
Payment received
Your license key is in your inbox.
Page not found
It moved, or it never existed.
Payment received
Your license key is in your inbox.
Page not found
It moved, or it never existed.
CodeBlock, CopyButton, SplitText
CodeBlock
:root {
--alea-accent: #cd57ff;
--alea-radius-md: 20px;
}
:root {
--alea-accent: #cd57ff;
--alea-radius-md: 20px;
}
CopyButton
#CD57FF
#CD57FF
SplitText
Design that plays with you
Design that plays with you
Splitter
Splitter
Layers
Header, Hero, Pricing
Canvas
The selected frame
Layers
Header, Hero, Pricing
Canvas
The selected frame
Vertical
Code
Preview
Code
Preview
Affix and FloatButton
FloatButton
The buttons float in this card's corner (position="absolute"); on a page they stay fixed to the screen.
The buttons float in this card's corner (position="absolute"); on a page they stay fixed to the screen.
Affix
3 selected
3 selected
Anchor
Anchor
OTPField
OTPField
Masked and with an error
Cascader
Cascader
TreeSelect
TreeSelect
Transfer
Transfer
All plugins
7In your bundle
1All plugins
7In your bundle
1Mentions
Mentions
Timeline
Timeline
Moved to GitHub Pages
Two new games
Kern Me and Tab OrderThirteen Figma plugins
Lemon Squeezy approval
Moved to GitHub Pages
Two new games
Kern Me and Tab OrderThirteen Figma plugins
Lemon Squeezy approval
In progress
- 09:02
Build passed
- 09:05
252 browser checks passed
- 09:06
Waiting for approval
Ana is reviewing Deploying to production…
- 09:02
Build passed
- 09:05
252 browser checks passed
- 09:06
Waiting for approval
Ana is reviewing Deploying to production…
Carousel
Carousel
Several per view
Image
Image
Fallback
Responsive and fast
QRCode
QRCode
Scan to open
fun.alevasquez.dev
Scan to open
fun.alevasquez.dev
CalendarView
CalendarView
October 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
October 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Tour
Tour
Watermark
Watermark
Q4 roadmap
Plugins in the store, Alea phase 3, the icon kit.
Q4 roadmap
Plugins in the store, Alea phase 3, the icon kit.
ButtonGroup and SplitButton
Attached buttons and a split button
ToggleGroup and Toolbar
Formatting toolbar
With labels
Autocomplete
Grouped suggestions
Loaded as you type
MultiSelect
Pick several
2 picked
2 picked
Without actions
Fieldset
Grouped fields
MarkdownEditor
Write and preview
Render Markdown
Safe by design
A normal link works, a script link) does not.
<img src=x onerror=alert(1)> stays text.
npm i @alea/uiSafe by design
A normal link works, a script link) does not.
<img src=x onerror=alert(1)> stays text.
npm i @alea/uiHoverCard
Profile preview
Built by Ale Vasquez in Caracas.
Built by Ale Vasquez in Caracas.
ContextMenu
Right-click menu
palette.json
Last action: nothing yet
palette.json
Last action: nothing yet
Menubar
App menu bar
NavigationMenu
Header with mega menus
Links only
BottomNavigation
Mobile tab bar
Burger
Burger
AspectRatio
Ratios
ScrollArea
Scroll with fades
v1.24.0: small fixes and new tokens
v1.23.0: small fixes and new tokens
v1.22.0: small fixes and new tokens
v1.21.0: small fixes and new tokens
v1.20.0: small fixes and new tokens
v1.19.0: small fixes and new tokens
v1.18.0: small fixes and new tokens
v1.17.0: small fixes and new tokens
v1.16.0: small fixes and new tokens
v1.15.0: small fixes and new tokens
v1.14.0: small fixes and new tokens
v1.13.0: small fixes and new tokens
v1.12.0: small fixes and new tokens
v1.11.0: small fixes and new tokens
v1.10.0: small fixes and new tokens
v1.9.0: small fixes and new tokens
v1.8.0: small fixes and new tokens
v1.7.0: small fixes and new tokens
v1.6.0: small fixes and new tokens
v1.5.0: small fixes and new tokens
v1.4.0: small fixes and new tokens
v1.3.0: small fixes and new tokens
v1.2.0: small fixes and new tokens
v1.1.0: small fixes and new tokens
v1.24.0: small fixes and new tokens
v1.23.0: small fixes and new tokens
v1.22.0: small fixes and new tokens
v1.21.0: small fixes and new tokens
v1.20.0: small fixes and new tokens
v1.19.0: small fixes and new tokens
v1.18.0: small fixes and new tokens
v1.17.0: small fixes and new tokens
v1.16.0: small fixes and new tokens
v1.15.0: small fixes and new tokens
v1.14.0: small fixes and new tokens
v1.13.0: small fixes and new tokens
v1.12.0: small fixes and new tokens
v1.11.0: small fixes and new tokens
v1.10.0: small fixes and new tokens
v1.9.0: small fixes and new tokens
v1.8.0: small fixes and new tokens
v1.7.0: small fixes and new tokens
v1.6.0: small fixes and new tokens
v1.5.0: small fixes and new tokens
v1.4.0: small fixes and new tokens
v1.3.0: small fixes and new tokens
v1.2.0: small fixes and new tokens
v1.1.0: small fixes and new tokens
Masonry and ImageList
Masonry
Tokens first, components second.
Every chart needs a table view.
Name things for what they do, not how they look. A button that deletes is "Delete", not "Red button".
Motion: fade from 0.01, never 0.
Test in dark and light.
Keyboard first: if it works with Tab and Enter, it usually works with a screen reader too.
Ship small.
Tokens first, components second.
Every chart needs a table view.
Name things for what they do, not how they look. A button that deletes is "Delete", not "Red button".
Motion: fade from 0.01, never 0.
Test in dark and light.
Keyboard first: if it works with Tab and Enter, it usually works with a screen reader too.
Ship small.
%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3C%2Fsvg%3E)
Spoiler
Show more
Alea is a design system with its own look, built on React Aria so keyboard, focus and screen reader behavior come right from the start. Every component has a matching Figma component made from the same tokens, in dark and light. The docs show live examples from real files, the props come from the TypeScript types, and every page is checked with axe in both themes. Charts read their points aloud, tables can be edited inline, and the editor never renders raw HTML.
Alea is a design system with its own look, built on React Aria so keyboard, focus and screen reader behavior come right from the start. Every component has a matching Figma component made from the same tokens, in dark and light. The docs show live examples from real files, the props come from the TypeScript types, and every page is checked with axe in both themes. Charts read their points aloud, tables can be edited inline, and the editor never renders raw HTML.
DataGrid
Everything on
Plugin | Kind | Users | Status | |
|---|---|---|---|---|
| Color | 40 | Beta | ||
| Accessibility | 437 | Live | ||
| Type | 834 | Live | ||
| Handoff | 1,231 | Live | ||
| Icons | 1,628 | Live | ||
| Tokens | 2,025 | Beta | ||
| Color | 2,422 | Live | ||
| Accessibility | 2,819 | Live |
28 rows
Plugin | Kind | Users | Status | |
|---|---|---|---|---|
| Color | 40 | Beta | ||
| Accessibility | 437 | Live | ||
| Type | 834 | Live | ||
| Handoff | 1,231 | Live | ||
| Icons | 1,628 | Live | ||
| Tokens | 2,025 | Beta | ||
| Color | 2,422 | Live | ||
| Accessibility | 2,819 | Live |
28 rows
Read only
Token | Dark | Light |
|---|---|---|
| accent/default | #cd57ff | #940dc2 |
| text/default | #f7f7f7 | #111011 |
| surface/default | #1d1c1b | #ffffff |
| status/success | #3ddc84 | #006535 |
Token | Dark | Light |
|---|---|---|
| accent/default | #cd57ff | #940dc2 |
| text/default | #f7f7f7 | #111011 |
| surface/default | #1d1c1b | #ffffff |
| status/success | #3ddc84 | #006535 |
SortableList and KanbanBoard
Sortable list
Kanban board
To do
2In progress
1Done
1To do
2In progress
1Done
1VirtualList
Ten thousand rows
Ribbon and Indicator
Ribbons and indicators
Lab Pro
All 13 plugins
Yearly
Two months free
Lab Pro
All 13 plugins
Yearly
Two months free
LineChart and AreaChart
Lines over time
Both grew every month since August.
- Visits
- Sign-ups
Both grew every month since August.
- Visits
- Sign-ups
Stacked area
- Direct
- Search
- Social
- Direct
- Search
- Social
BarChart
Grouped bars
2026 beat 2025 in every quarter.
- 2025
- 2026
2026 beat 2025 in every quarter.
- 2025
- 2026
Horizontal and stacked
- Free
- Pro
- Free
- Pro
PieChart and DonutChart
Donut with total
Small donut
Scatter, Radar and Heatmap
Scatter and bubbles
- Desktop
- Mobile
- Desktop
- Mobile
Radar
- Ana
- Bruno
- Ana
- Bruno
Heatmap
Sparkline and Gauge
Sparklines and gauges
Visits
9,612
Errors
23
Visits
9,612
Errors
23
In a table
Plugin | Users | Last 7 days |
|---|---|---|
| Contrast Checker | 3,410 | |
| Palette Generator | 1,240 | |
| Type Scale | 860 |
Plugin | Users | Last 7 days |
|---|---|---|
| Contrast Checker | 3,410 | |
| Palette Generator | 1,240 | |
| Type Scale | 860 |
SkipLink and VisuallyHidden
Collapsible
Advanced options
Editable
Rename in place
Countdown and FormattedNumber
Countdown and numbers
Revenue
$126,560
1.8M visits · 4.3% conversion
Revenue
$126,560
1.8M visits · 4.3% conversion
Status and ColorSwatch
Status and swatches
var(--alea-purple-400)var(--alea-yellow-200)#8b6cf080var(--alea-purple-400)var(--alea-yellow-200)#8b6cf080LoadingOverlay
Reload in place
Plugin | Users |
|---|---|
| Contrast Checker | 3,410 |
| Palette Generator | 1,240 |
Plugin | Users |
|---|---|
| Contrast Checker | 3,410 |
| Palette Generator | 1,240 |
Blockquote and List
Quote and lists
Design systems are for people, not for screenshots.
- Tokens for every color
- Dark and light
- Tested with axe
- Install
- Add the stylesheet
- Wrap the app in ThemeProvider
Design systems are for people, not for screenshots.
- Tokens for every color
- Dark and light
- Tested with axe
- Install
- Add the stylesheet
- Wrap the app in ThemeProvider
Responsive layout
Columns per breakpoint
Tokens
Components
Figma kit
Templates
Tokens
Components
Figma kit
Templates
12-column spans
Main
span base 12, md 8
Aside
span base 12, md 4
6 / lg 3
6 / lg 3
12 / lg 6
Main
span base 12, md 8
Aside
span base 12, md 4
6 / lg 3
6 / lg 3
12 / lg 6
Direction, Show and the hook
Current breakpoint: base
Shown from md up
Shown below md
Current breakpoint: base
Shown from md up
Shown below md
Navbar
Site header
Banner
Announcements
Prose
Article
Motion with a system
Fourteen patterns instead of a hundred keyframes. Each one is built from tokens and has a reduced-motion fallback.
What changes
- Overlays pop from their trigger
- Selection glides between items
- Errors nudge once
Motion should explain what changed, never decorate.
.alea-popover[data-entering] { animation: alea-pop var(--alea-motion-duration-base); }| Pattern | Duration |
|---|---|
| Pop | 250 ms |
| Rise | 400 ms |
Motion with a system
Fourteen patterns instead of a hundred keyframes. Each one is built from tokens and has a reduced-motion fallback.
What changes
- Overlays pop from their trigger
- Selection glides between items
- Errors nudge once
Motion should explain what changed, never decorate.
.alea-popover[data-entering] { animation: alea-pop var(--alea-motion-duration-base); }| Pattern | Duration |
|---|---|
| Pop | 250 ms |
| Rise | 400 ms |
ThemeProvider and toggle
Theme toggle
Picked: dark · showing: dark
Picked: dark · showing: dark
Provider
Always light
This area has its own provider.
Always light
This area has its own provider.
Gradients and orbs
Gradient text and dot
Design that plays
Live in the Figma Community
Design that plays
Live in the Figma Community
Orb background