Saltar al contenido

DiseñoColor, tipografía, espacio e íconos como tokens, las pautas detrás de ellos y el kit de Figma.Resumen
Fundamentos
ColoresOcho escalas OKLCH del Palette Generator, y los tokens semánticos que cambian entre oscuro y claro.
TipografíaCrimson Pro para títulos, Inter para todo lo demás, JetBrains Mono para código, en una sola escala de tamaños.
Espacio y tamañosUna escala de espacio de 4 px, alturas de controles, radios y sombras.
ÍconosÍconos de Lucide en los tamaños y el trazo del kit, a través de un componente Icon que puedes apuntar a otro set.
Pautas
AccesibilidadLo que hace cada componente por el teclado, el lector de pantalla, el contraste y el movimiento, y lo que todavía te toca a ti.
Kit de diseño
Kit de FigmaLos mismos tokens como variables de Figma en Dark y Light, y componentes con las mismas props.
DesarrolloInstala, envuelve tu app, adáptala a tu marca y pruébala en vivo.Resumen
Primeros pasos
IntroducciónEl sistema de diseño completo para React
InstalaciónInstala desde npm o copia el código con la CLI, agrega la hoja de estilos y el proveedor de tema.
TemasTemas oscuro, claro y del sistema, por página o por área, y cómo cambiar los tokens para tu marca.
Herramientas
PlaygroundCada componente en cada estado, oscuro y claro lado a lado.
ComponentesCada componente por categoría, accesible y documentado.Resumen
RecursosPlantillas, bloques, el playground y Alea Pro.Resumen
Plantillas y bloques
BloquesSecciones listas hechas con los componentes
PlantillasPáginas completas para empezar
Alea Pro
LicenciaCómo se licencia Alea
Alea ProLa parte paga de Alea
MotionPatrones con nombre hechos con tokens de curva y duración, modos y efectos.Resumen
Motion
Sistema de motionLas curvas y duraciones detrás de cada transición, y cómo se maneja el movimiento reducido.
Componentes de movimientoLa prop motion en cada overlay, y los componentes pequeños detrás de los patrones
MorphMorphing de elemento compartido

Alea
Componentes
Navegación
BottomNavigation

Navegación

BottomNavigation

La barra de pestañas de una app móvil: de tres a cinco destinos con íconos, etiquetas y badges.

import { BottomNavigation } from '@alea/ui';

Ejemplos

Barra de pestañas móvil

Se muestra en línea aquí; por defecto se queda fija abajo de la pantalla.

home

Configuraciones

Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.

fixed: false

fixed: true

Fixedfixed

Estados

Cada estado de interacción, forzado para compararlos, en ambos temas.

Oscuro

Habilitado

Hover

Foco

Presionado

Claro

Habilitado

Hover

Foco

Presionado

Anatomía

Las partes del componente y la clase que da estilo a cada una.

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-accent-strong…
--alea-accent-subtle…
--alea-border…
--alea-status-danger-on-solid…
--alea-status-danger-solid…
--alea-surface…
--alea-text-muted…

Radius

--alea-radius-full…

Type

--alea-font-family-body…
--alea-font-size-2xs…
--alea-font-weight-medium…

Motion

--alea-motion-duration-base…

Layer

--alea-z-sticky…

Component

--alea-glass-blur…
--alea-glass-saturate…
--alea-glass-tint…

Props

`BottomNavigation` props

La barra de pestañas de una app móvil: de tres a cinco destinos con íconos y etiquetas.

Prop	Tipo	Por defecto	Descripción
`items`obligatoria	`{ id: string; label: string; icon: ReactNode; href?: string \| undefined; badge?: number \| undefined; }[]`	-	De tres a cinco destinos: id, label, icon, y un href (enlaces) o nada (botones con onChange).
`value`obligatoria	`string`	-	El destino actual.
`aria-label`	`string`	-	Nombre de la navegación. Por defecto "Principal".
`className`	`string`	-	Clases extra para el elemento raíz.
`fixed`	`boolean`	`true`	Se queda fija abajo de la pantalla. Por defecto true.
`onChange`	`((id: string) => void)`	-	Se llama con el id del destino elegido.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Motion: press
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-bottomnav.alea-bottomnav-icon.alea-bottomnav-badge.alea-bottomnav-label.alea-bottomnav-item
Atributos data: data-fixed

Un landmark de navegación con enlaces o botones; el actual tiene aria-current y los badges se leen como "3 nuevos".

Teclado

Tecla	Acción
`Tab`	Se mueve entre destinos
`Enter`	Va al destino

Qué hacer y qué evitar

Hacer

Mantén las etiquetas visibles: los íconos solos son adivinanzas.

Evitar

No uses más de cinco elementos.