'/%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
Todos los ejemplos, en ambos temas a la vez.
Íconos
Tamaños y tonos
Trazo
Otro set de íconos
Button
Variantes
Tamaños
Con íconos
Cargando y deshabilitado
Ancho completo
Tonos
Formas
Texto y posición de carga
Responsive
Botones anchos
IconButton
Botones de ícono
Tamaños y formas
SegmentedControl
Control segmentado
Showing: week
Showing: week
Pequeño
ToggleButton
Heading y Text
Títulos
Design that plays
Section title
Card title
Interface heading
With the gradient
Design that plays
Section title
Card title
Interface heading
With the gradient
Texto
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, código y teclas
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
Variantes
Read the theming guide to change the accent.
InstallationMade in Caracas · Accessibility
ARIA patterns (se abre en una pestaña nueva)Read the theming guide to change the accent.
InstallationMade in Caracas · Accessibility
ARIA patterns (se abre en una pestaña nueva)Stack, Inline, Grid
Stack e 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
Divisores con etiqueta
or
Today
End of results
Alea is a design system with motion built in: tokens, components and patterns that look and move the same in code and in Figma, with accessibility checked on every page and both themes from the start.
or
Today
End of results
Alea is a design system with motion built in: tokens, components and patterns that look and move the same in code and in Figma, with accessibility checked on every page and both themes from the start.
Card
Variantes
Default
The Alea panel.
Deep
An inset area.
Outline
Just a border.
Default
The Alea panel.
Deep
An inset area.
Outline
Just a border.
Tarjeta interactiva
Padding
Tight
Normal
Loose
Tight
Normal
Loose
Encabezado, multimedia, pie, lado a lado y cargando
Lisbon in spring
Ana Rivas · 4 min read
Tiles, light and a lot of hills. Notes from a week of walking.
Pro plan
$12 a month
Lisbon in spring
Ana Rivas · 4 min read
Tiles, light and a lot of hills. Notes from a week of walking.
Pro plan
$12 a month
TextField
Campo de texto
Validación
Prefijo, sufijo y tamaños
TextArea
Variantes
Tamaños
Anexos, borrar y carga
Contador y advertencia
Etiqueta al costado
Tamaño responsive
SearchField y PasswordField
Búsqueda
Type to search
Type to search
Contraseña
Atajo y carga
Fuerza de la contraseña
NumberField
Campo numérico
Formatos
Botones al final y unidades
Checkbox
Checkbox
Grupo de casillas
Selected: contrast
Selected: contrast
Seleccionar todo
Value: ["palette"]
Value: ["palette"]
Tarjetas
Tamaños, estilos y lado de la etiqueta
Radio
Grupo de radios
Tarjetas
Horizontal
Botones
Items y tamaños
Switch
Switch
Filas de ajustes
Tamaños, etiquetas e íconos
Guardando
Select
Eligen
Descripciones e íconos
Secciones y validación
Múltiple
Búsqueda, borrar y pie
Variantes y tamaños
Prefijo, carga y vacío
2.000 opciones, virtualizadas
Slider
Slider
Rango
Marcas, burbuja de valor, tamaños y relleno centrado
Dialog
Dialog
AlertDialog
Tamaños
DockedWindow
Redacción y subidas
KeyboardShortcuts
Atajos
Modal
Cualquier contenido
Contenido largo y scroll
Multimedia a sangre
Tamaños, posición y fondos
Un flujo dentro de un modal
Popover
Popover
Con flecha
Ancho, descripción, pie y cerrar
Tooltip
Tooltip
En texto y enlaces
Tooltip enriquecido y atajo
Tabs
Tabs
Generates a full color system as Figma variables.
Generates a full color system as Figma variables.
Píldoras
The live component.
The live component.
Variantes
variant="underline": overview
variant="pills": overview
variant="enclosed": overview
variant="soft": overview
variant="underline": overview
variant="pills": overview
variant="enclosed": overview
variant="soft": overview
Vertical
Name and description.
Name and description.
Íconos, badges, tamaños y fitted
Cerrables, agregar y desbordamiento
Editing index.tsx
Editing index.tsx
Reordenables
Inbox
Inbox
Accordion
Preguntas frecuentes
Unidas, varias abiertas
Variantes
Íconos, subtítulos y extra
Tamaños
Badge
Tonos
Estados y contadores
Tamaños, íconos, formas y un punto en vivo
Tag
Etiquetas que se quitan
Filtra
Estilos, tamaños e íconos
Una línea con scroll
Avatar
Avatares
Grupo
Anillo, contador y respaldo
Alert
Tonos
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
Acciones y cerrar
Alea Pro is out
Alea Pro is out
Estilos y tamaños
Soft
Outline
Solid
Accent
2 errors
Soft
Outline
Solid
Accent
2 errors
Toast
Toasts
Con una acción
Promesa, progreso e íconos
Progress y Meter
Barra de progreso
Círculo de progreso
Meter
Segmentos
Tonos, tamaños, franjas y el valor al final
Spinner y Skeleton
Spinner
Skeleton
InlineLoading
Loader que cambia de forma
AppShell
AppShell
Breadcrumbs
Breadcrumbs
Separador personalizado
Rutas largas
Pagination
Pagination
Page 6 of 24
Page 6 of 24
Compacta
Total, tamaño de página, primera y última, saltar
Steps
Steps
Vertical
Errores, pasos opcionales, tamaños y estilos
Menu
Acciones
Seleccionable
Submenús
Encabezado, pie, contadores y tamaño pequeño
CommandPalette
Paleta de comandos
Drawer
Drawer
PageHeader y PageActions
Encabezado de página
Order #1042
Northwind Traders · 4 items · $1,240
Order #1042
Northwind Traders · 4 items · $1,240
Compacto con pestañas
Customers
2,481 people
Customers
2,481 people
Acciones de página y ayuda
SaveBar y TopLoadingBar
Barra de guardado
Barra de carga superior
Persona
Persona
Chat
Conversación
Mensaje, reacciones y escritura por separado
PromptInput
Asistente
How can I help?
How can I help?
Archivos, un modelo y estados
Partes de una respuesta de IA
Una respuesta
Pass your accent to brandVariables and put the result on the root1. Every semantic token follows, in dark, light and high contrast2, and the Figma kit uses the same variables3.
Fuentes
Pass your accent to brandVariables and put the result on the root1. Every semantic token follows, in dark, light and high contrast2, and the Figma kit uses the same variables3.
Fuentes
Pasos de un agente
Entrada
Salida
Entrada
Salida
Entrada
Salida
Entrada
Salida
Entrada
Salida
Entrada
Salida
AIOrb
Estados y tamaños
Ready
Listening
Thinking
Speaking
Ready
Listening
Thinking
Speaking
EmojiPicker
EmojiPicker
Nothing picked yet
Nothing picked yet
En un popover
Comment
Hilo de comentarios
The new Tree is ready for review: data mode, cascading checkboxes, lazy loading and drag and drop.
MediaCard y CalloutCard
MediaCard y CalloutCard
Build a dashboard in 10 minutes
New: Sheet
Invite your team
Build a dashboard in 10 minutes
New: Sheet
Invite your team
Toggletip e InfoLabel
Toggletip e InfoLabel
Usage this month
Legacy export
Usage this month
Legacy export
WheelPicker
WheelPicker
1 × Navy, size M
1 × Navy, size M
FilterBar
FilterBar
view: all · search: “” · filters: {"status":["open"]}
view: all · search: “” · filters: {"status":["open"]}
StructuredList
StructuredList
ContainedList
ContainedList
Members
- Ana Rivasana@alea.devOwner
- Bruno Díazbruno@alea.dev
- Carla MendesInvitedPending
Integrations
- FigmaConnected
- Code repositoryConnected
- Team chat
- Docs
Members
- Ana Rivasana@alea.devOwner
- Bruno Díazbruno@alea.dev
- Carla MendesInvitedPending
Integrations
- FigmaConnected
- Code repositoryConnected
- Team chat
- Docs
Arrastrar y soltar
Reordena una lista
Entre listas
To do (3)
Done (1)
To do (3)
Done (1)
Una grilla de tarjetas
Filas de tabla
| Arrastrar para mover | Page | Owner |
|---|---|---|
| Homepage | Ana | |
| Pricing | Bruno | |
| Docs | Carla | |
| Blog | Dario |
| Arrastrar para mover | Page | Owner |
|---|---|---|
| Homepage | Ana | |
| Pricing | Bruno | |
| Docs | Carla | |
| Blog | Dario |
Sheet
Hoja inferior
Puntos de anclaje y posiciones
ActionSheet
ListBox
ListBox
Múltiple, secciones y plain
InputGroup
InputGroup
Popconfirm
Popconfirm
No solo para eliminar
ComboBox y TagField
ComboBox
Texto libre
TagField
Borrar, prefijo y crear
Búsqueda asíncrona
Fechas y horas
DatePicker
Rango y límites
DateField y TimeField
Calendar
octubre de 2026
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
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 | 1 |
octubre de 2026
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
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 | 1 |
Fecha y hora
Listas de mes y año, dos meses
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
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 | 1 |
octubre–noviembre de 2026
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
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 | 1 |
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 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 | 1 | 2 | 3 | 4 | 5 | 6 |
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
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 | 1 |
octubre–noviembre de 2026
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
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 | 1 |
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 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 | 1 | 2 | 3 | 4 | 5 | 6 |
TimePicker
Form
Formulario con errores del servidor
Resumen de errores
Corrige esto para continuar
Corrige esto para continuar
FileUpload
FileUpload
Varios archivos
FileTrigger
Tipos de lista, botón, límites y reintento
Rating
Rating
4 of 5
4 of 5
Solo lectura y tamaños
Medias, íconos, tonos y el valor
Selectores de color
ColorPicker
ContrastBadge
Las partes por separado
Table
Orden y selección
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
Encabezado fijo, compacta, redimensionable
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 |
Vacía
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. | |
Rayada, con bordes y tarjetas en teléfonos
Name | Role | City |
|---|---|---|
| Ana Rivas | Designer | Caracas |
| Bruno Díaz | Engineer | Madrid |
| Carla Mendes | Writer | Lisbon |
Name | Role | City |
|---|---|---|
| Ana Rivas | Designer | Caracas |
| Bruno Díaz | Engineer | Madrid |
| Carla Mendes | Writer | Lisbon |
Name | Role | City |
|---|---|---|
| Ana Rivas | Designer | Caracas |
| Bruno Díaz | Engineer | Madrid |
| Carla Mendes | Writer | Lisbon |
Name | Role | City |
|---|---|---|
| Ana Rivas | Designer | Caracas |
| Bruno Díaz | Engineer | Madrid |
| Carla Mendes | Writer | Lisbon |
ListView
ListView
Separados, con acciones
Tree
Tree
Selección
Tamaños
Directorio con líneas guía
Estilo de selección
Casillas en cascada
Checked: brand, neutral
Checked: brand, neutral
Marcado estricto
Carga diferida
Filtrar
Arrastrar y soltar
Renombrar
Select a row and press F2.
Select a row and press F2.
Filas enriquecidas
Secciones
Expandir y contraer todo
10.000 nodos, virtualizado
Deshabilitado y vacío
Descriptions y Statistic
Descriptions
- Plan
- Alea Pro yearly
- Status
- Active
- Renews
- October 17, 2027
- Seats
- 3 of 5
- License key
FL-8K2D-Q9XA-77PL
- Plan
- Alea Pro yearly
- Status
- Active
- Renews
- October 17, 2027
- Seats
- 3 of 5
- License key
FL-8K2D-Q9XA-77PL
Statistic
Título, spans, tamaños y etiquetas en línea
Order #4821
- Customer
- Ana Rivas
- Status
- Packing
- Placed
- Oct 16, 2026
- Total
- $184.00
- Ship to
- Av. Francisco de Miranda, Torre Europa, piso 8, Caracas 1060
- Carrier
- MRW, express
- Tracking
MRW-55120-VE
- Owner
- Bruno Díaz
- Created
- Sep 2, 2026
- Visibility
- Team
Order #4821
- Customer
- Ana Rivas
- Status
- Packing
- Placed
- Oct 16, 2026
- Total
- $184.00
- Ship to
- Av. Francisco de Miranda, Torre Europa, piso 8, Caracas 1060
- Carrier
- MRW, express
- Tracking
MRW-55120-VE
- Owner
- Bruno Díaz
- Created
- Sep 2, 2026
- Visibility
- Team
EmptyState y 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.
Tamaños, discontinuo y dos acciones
No results
Try a shorter search, or clear the filters.
No projects yet
Projects keep your palettes and tokens together.
No results
Try a shorter search, or clear the filters.
No projects yet
Projects keep your palettes and tokens together.
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
Fragmentos, resaltados y Ver más
npm install @alea/ui @alea/motionYour token: (press to copy)
import { Tree } from '@alea/ui'; export function Files({ data }) { return ( <Tree aria-label="Files" data={data} directory showLinesnpm install @alea/ui @alea/motionYour token: (press to copy)
import { Tree } from '@alea/ui'; export function Files({ data }) { return ( <Tree aria-label="Files" data={data} directory showLinesSplitter
Splitter
Layers
Header, Hero, Pricing
Canvas
The selected frame
Layers
Header, Hero, Pricing
Canvas
The selected frame
Vertical
Code
Preview
Code
Preview
Affix y 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
Botón flotante extendido
Anchor
Anchor
OTPField
OTPField
Oculto y con error
Cascader
Cascader
TreeSelect
TreeSelect
Transfer
Transfer
All plugins
7In your bundle
1All plugins
7In your bundle
1Mentions
Menciones
Timeline
Timeline
Moved to static hosting
Two new games
Kern Me and Tab OrderThirteen Figma plugins
Lemon Squeezy approval
Moved to static hosting
Two new games
Kern Me and Tab OrderThirteen Figma plugins
Lemon Squeezy approval
En curso
- 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…
Alternada, al final, activa y pequeña
- Oct 1
Order placed
- Oct 2
Packed
Two boxes - Today
Out for delivery
- Tomorrow
Delivered
- Oct 1
Order placed
- Oct 2
Packed
Two boxes - Today
Out for delivery
- Tomorrow
Delivered
- Tomorrow
Delivered
- Today
Out for delivery
- Oct 2
Packed
Two boxes - Oct 1
Order placed
- Oct 1
Order placed
- Oct 2
Packed
Two boxes - Today
Out for delivery
- Tomorrow
Delivered
- Oct 1
Order placed
- Oct 2
Packed
Two boxes - Today
Out for delivery
- Tomorrow
Delivered
- Tomorrow
Delivered
- Today
Out for delivery
- Oct 2
Packed
Two boxes - Oct 1
Order placed
Carousel
Carrusel
Varias por vista
PageIndicator
MediaPlayer
Video con subtítulos
Audio
%22%2F%3E%3C%2Fsvg%3E)
Image
Image
Respaldo
Responsive y rápida
QRCode
QRCode
Scan to open
alea.alevasquez.dev
Scan to open
alea.alevasquez.dev
CalendarView
CalendarView
octubre de 2026
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
octubre de 2026
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
Scheduler
Semana
Octubre de 2026
Octubre de 2026
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.
SelectionBar
Selección
ButtonGroup, SplitButton y CompoundButton
Botones unidos y un botón dividido
CompoundButton
ToggleGroup y Toolbar
Barra de formato
Con etiquetas
Barra de herramientas que se ajusta
Autocomplete
Sugerencias agrupadas
Cargadas mientras escribes
MultiSelect
Elige varias
2 picked
2 picked
Sin acciones
Fieldset
Campos agrupados
MarkdownEditor
Escribe y previsualiza
Mostrar 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/uiRichTextEditor
RichTextEditor
Menos herramientas
Solo lectura y HTML seguro
Listas de tareas, Markdown y la barra de la selección
HoverCard
Vista previa de perfil
Built by Ale Vasquez in Caracas.
Built by Ale Vasquez in Caracas.
ContextMenu
Menú de clic derecho
palette.json
Last action: nothing yet
palette.json
Last action: nothing yet
Menubar
Barra de menús de app
NavigationMenu
Encabezado con mega menús
Solo enlaces
Vertical
Riel colapsado
Acordeón y tamaños
Riel de navegación
AppLauncher
AppLauncher
Lumen
Lumen
BottomNavigation
Barra de pestañas móvil
Burger
Hamburguesa
AspectRatio
Proporciones
ScrollArea
Scroll con degradados
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 e 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
Ver más
Alea is a design system with its own look, built 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 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
Todo activado
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 filas
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 filas
Solo lectura
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 |
Filas expandibles y datos en árbol
Detalles | Order | Customer | Total | Status |
|---|---|---|---|---|
| A-1042 | Northwind | $1240 | Paid | |
| A-1043 | Globex | $320 | Pending | |
| A-1044 | Initech | $2980 | Paid |
Name | Size |
|---|---|
| src | 820 KB |
| docs | 210 KB |
Detalles | Order | Customer | Total | Status |
|---|---|---|---|---|
| A-1042 | Northwind | $1240 | Paid | |
| A-1043 | Globex | $320 | Pending | |
| A-1044 | Initech | $2980 | Paid |
Name | Size |
|---|---|
| src | 820 KB |
| docs | 210 KB |
Filtros, columnas fijas y un resumen
Name | Team | Tasks | Hours | Score | City | |
|---|---|---|---|---|---|---|
| Ana Rivas | Design | 4 | 20 | 60 | Caracas | |
| Bruno Díaz | Code | 11 | 33 | 77 | Madrid | |
| Carla Mendes | Docs | 7 | 21 | 94 | Lisbon | |
| Dario Silva | Design | 14 | 34 | 71 | Bogotá | |
| Eva Lin | Code | 10 | 22 | 88 | Caracas | |
| Resumen | 8 | 74 | 224 | 79.5 |
8 filas
Name | Team | Tasks | Hours | Score | City | |
|---|---|---|---|---|---|---|
| Ana Rivas | Design | 4 | 20 | 60 | Caracas | |
| Bruno Díaz | Code | 11 | 33 | 77 | Madrid | |
| Carla Mendes | Docs | 7 | 21 | 94 | Lisbon | |
| Dario Silva | Design | 14 | 34 | 71 | Bogotá | |
| Eva Lin | Code | 10 | 22 | 88 | Caracas | |
| Resumen | 8 | 74 | 224 | 79.5 |
8 filas
5.000 filas, virtualizadas
SortableList y KanbanBoard
Lista ordenable
Tablero kanban
To do
In progress
Done
To do
In progress
Done
VirtualList
Diez mil filas
Ribbon e Indicator
Cintas e indicadores
Alea Pro
All 13 plugins
Yearly
Two months free
Alea Pro
All 13 plugins
Yearly
Two months free
LineChart y AreaChart
Líneas en el tiempo
Both grew every month since August.
- Visits
- Sign-ups
Both grew every month since August.
- Visits
- Sign-ups
Área apilada
- Direct
- Search
- Social
- Direct
- Search
- Social
Escalones, carga y foco en la leyenda
Hover a legend item to focus its line.
- Plan tier
- Seats
Hover a legend item to focus its line.
- Plan tier
- Seats
BarChart
Barras agrupadas
2026 beat 2025 in every quarter.
- 2025
- 2026
2026 beat 2025 in every quarter.
- 2025
- 2026
Horizontales y apiladas
- Free
- Pro
- Free
- Pro
PieChart y DonutChart
Dona con total
Dona pequeña
Scatter, Radar y Heatmap
Dispersión y burbujas
- Desktop
- Mobile
- Desktop
- Mobile
Radar
- Ana
- Bruno
- Ana
- Bruno
Mapa de calor
ComboChart
Barras y una línea
Orders grew every month; revenue dipped in March.
- Revenue ($k)
- Orders
Orders grew every month; revenue dipped in March.
- Revenue ($k)
- Orders
FunnelChart
Embudo de registro
One in five visitors starts a trial; one in four trials pays.
One in five visitors starts a trial; one in four trials pays.
WaterfallChart
Puente de ganancias
BulletChart
KPI contra metas
Treemap
Almacenamiento por carpeta
RadialBarChart
Metas como anillos
- Design
- Frontend
- Docs
- Tests
- Design
- Frontend
- Docs
- Tests
CalendarHeatmap
Contribuciones
Steady on weekdays, quiet in August.
Steady on weekdays, quiet in August.
Sparkline y Gauge
Sparklines y gauges
Visits
9,612
Errors
23
Visits
9,612
Errors
23
En una tabla
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 y VisuallyHidden
Collapsible
Opciones avanzadas
Editable
Renombrar en el lugar
Countdown y FormattedNumber
Cuenta regresiva y números
Revenue
$126,560
1.8M visits · 4.3% conversion
Revenue
$126,560
1.8M visits · 4.3% conversion
Status y ColorSwatch
Estados y muestras
var(--alea-purple-400)var(--alea-yellow-200)#8b6cf080var(--alea-purple-400)var(--alea-yellow-200)#8b6cf080LoadingOverlay
Recargar en el lugar
Plugin | Users |
|---|---|
| Contrast Checker | 3,410 |
| Palette Generator | 1,240 |
Plugin | Users |
|---|---|
| Contrast Checker | 3,410 |
| Palette Generator | 1,240 |
Blockquote y List
Cita y listas
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
Diseño responsive
Columnas por breakpoint
Tokens
Components
Figma kit
Templates
Tokens
Components
Figma kit
Templates
Spans de 12 columnas
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
Dirección, Show y el hook
Current breakpoint: base
Shown from md up
Shown below md
Current breakpoint: base
Shown from md up
Shown below md
Navbar
Encabezado del sitio
Banner
Anuncios
Prose
Artículo
Motion with a system
Thirty-three 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
Thirty-three 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 e interruptor
Interruptor de tema
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.
Degradados y orbes
Texto y punto con degradado
Design that plays
Live in the Figma Community
Design that plays
Live in the Figma Community
Fondo de orbes
Componentes de movimiento
Swap y roll
$1,290
$1,290
Reveal y stagger
Tokens
Components
Motion
Tokens
Components
Motion
Presencia y tamaño
Alea Motion animates what changed.
Alea Motion animates what changed.
Stream
Éxito, onda, badge y abanico
La prop motion
Morph, puntos y revelado
Morph
De tarjeta a detalle
De botón a panel
MorphIcon
BentoGrid
Grilla bento
Analytics that read well
Charts with a table view, keyboard focus on every point and live tooltips.
Your brand
Accent, radius and density.
Accessible
Keyboard and screen readers, built in.
Motion built in
Fourteen patterns and a motion prop on every overlay.
Fast
CSS first; JavaScript only where it helps.
Analytics that read well
Charts with a table view, keyboard focus on every point and live tooltips.
Your brand
Accent, radius and density.
Accessible
Keyboard and screen readers, built in.
Motion built in
Fourteen patterns and a motion prop on every overlay.
Fast
CSS first; JavaScript only where it helps.
Bento Graphite
Ship faster, quietly.
99.99% uptime
Global by default
Every region, one deploy.
Secure
Keys never leave your account.
Edge compute
Runs close to people.
Ship faster, quietly.
99.99% uptime
Global by default
Every region, one deploy.
Secure
Keys never leave your account.
Edge compute
Runs close to people.
HoldButton
Mantener para confirmar
Nothing deleted yet
Nothing deleted yet
Glass y LiquidGlass
Superficies de vidrio
Ajusta el vidrio esmerilado
--alea-glass-blur: 18px; --alea-glass-saturate: 170%;
--alea-glass-blur: 18px; --alea-glass-saturate: 170%;
Vidrio para un área completa
Vidrio líquido, refracción
Gooey
Gooey nav
Gooey menu
BorderBeam y Spotlight
Haz de borde y foco de luz
Pro yearly
The beam marks the plan most people pick.
Spotlight
Move the pointer over this card.
Pro yearly
The beam marks the plan most people pick.
Spotlight
Move the pointer over this card.
Tilt y Magnet
Tilt y magnet
Alea Pro
Hover me.
Alea Pro
Hover me.
Fondos
Fondos
Borde desenfocado
Release note 1: tokens, motion and docs updates.
Release note 2: tokens, motion and docs updates.
Release note 3: tokens, motion and docs updates.
Release note 4: tokens, motion and docs updates.
Release note 5: tokens, motion and docs updates.
Release note 6: tokens, motion and docs updates.
Release note 7: tokens, motion and docs updates.
Release note 8: tokens, motion and docs updates.
Release note 9: tokens, motion and docs updates.
Release note 10: tokens, motion and docs updates.
Release note 11: tokens, motion and docs updates.
Release note 12: tokens, motion and docs updates.
Release note 13: tokens, motion and docs updates.
Release note 14: tokens, motion and docs updates.
Release note 1: tokens, motion and docs updates.
Release note 2: tokens, motion and docs updates.
Release note 3: tokens, motion and docs updates.
Release note 4: tokens, motion and docs updates.
Release note 5: tokens, motion and docs updates.
Release note 6: tokens, motion and docs updates.
Release note 7: tokens, motion and docs updates.
Release note 8: tokens, motion and docs updates.
Release note 9: tokens, motion and docs updates.
Release note 10: tokens, motion and docs updates.
Release note 11: tokens, motion and docs updates.
Release note 12: tokens, motion and docs updates.
Release note 13: tokens, motion and docs updates.
Release note 14: tokens, motion and docs updates.
Efectos de texto
Efectos de texto
Motion with meaning
DECODED IN PLACE
Build dashboards
Make it fast, accessible, yours
Motion with meaning
DECODED IN PLACE
Build dashboards
Make it fast, accessible, yours
Resaltador, revelado con scroll y texto aurora
Alea Pro
Motion that explains what changed, not decoration.
Thinking about your request…
Every animation in Alea is one of the named patterns, built from motion tokens, so a whole product moves the same way and you can tune it in one place.
Alea Pro
Motion that explains what changed, not decoration.
Thinking about your request…
Every animation in Alea is one of the named patterns, built from motion tokens, so a whole product moves the same way and you can tune it in one place.
Burst y Marquee
Burst
Marquee
Northwind
Globex
Initech
Umbrella
Stark
Wayne
Acme
Northwind
Globex
Initech
Umbrella
Stark
Wayne
Acme
LikeButton y confeti
Me gusta con partículas
Confeti
CardStack, FlipCard y bordes
Pila de tarjetas
Starter
Hover the stack.
Pro
Hover the stack.
Team
Hover the stack.
Starter
Hover the stack.
Pro
Hover the stack.
Team
Hover the stack.
Tarjeta que gira
Borde con degradado y brillo
Pro yearly
Most teams pick this.
Pro yearly
Most teams pick this.
Meteoros, ondas, mancha y destellos
Fondos ambientales
Grilla interactiva
OrbitingCircles y AnimatedBeam
Círculos en órbita
Haz animado
Your data to the model
Your data to the model
Dock
Dock
Efectos de imagen
Antes y después
%22%2F%3E%3Ccircle%20cx%3D%22460%22%20cy%3D%22150%22%20r%3D%2256%22%20fill%3D%22%23ffce1f%22%2F%3E%3Cpath%20d%3D%22M0%20300%20L120%20190%20L220%20270%20L330%20160%20L460%20290%20L560%20210%20L640%20260%20V400%20H0Z%22%20fill%3D%22%235b2a86%22%2F%3E%3Cpath%20d%3D%22M0%20340%20L140%20260%20L260%20330%20L380%20250%20L520%20340%20L640%20300%20V400%20H0Z%22%20fill%3D%22%23cd57ff%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ccircle%20cx%3D%22460%22%20cy%3D%22150%22%20r%3D%2256%22%20fill%3D%22%23ddd%22%2F%3E%3Cpath%20d%3D%22M0%20300%20L120%20190%20L220%20270%20L330%20160%20L460%20290%20L560%20210%20L640%20260%20V400%20H0Z%22%20fill%3D%22%23444%22%2F%3E%3Cpath%20d%3D%22M0%20340%20L140%20260%20L260%20330%20L380%20250%20L520%20340%20L640%20300%20V400%20H0Z%22%20fill%3D%22%23666%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E)
Lupa
Revelar y disolver
The new Tree is ready for review: data mode, cascading checkboxes, lazy loading and drag and drop.