Documentación
37 componentes y 7 páginas de sistema. Cada una se sirve también como markdown plano en la misma URL + .md.
Sistema
- InstalaciónUna dependencia, un
@importy tres variables de marca. - TokensColor, tipografía, radios y sombras. Los valores salen de
tokens/geist.jsony detheme.css. - ThemingTres variables de marca, claro y oscuro, radio y densidad.
- AccesibilidadLo que garantiza el paquete y lo que le queda a la app.
- Reglas de usoLas decisiones que no se ven en una tabla de props.
- Migrar desde las versiones internasPara las apps que ya usaban el sistema con su nombre viejo. Dos cambios, los dos mecánicos.
- ChangelogTodas las versiones, hasta la 0.1.0.
Fundamentos
- AvatarFoto de una persona con iniciales de respaldo cuando la imagen no carga.
- BadgeEtiqueta de estado: nueve colores en tono suave, dos en sólido, con punto opcional.
- ButtonLa acción. Siete variantes, seis tamaños, estado de carga y forma de píldora para marketing.
- KbdUna tecla o un atajo en línea, en Geist Mono.
- SeparatorUna línea de 1px, horizontal o vertical, que agrupa sin decir nada.
- SkeletonEl bloque gris que late mientras carga algo.
- StatUn KPI: etiqueta, número grande, variación y una línea de contexto.
Formularios
- AutocompleteTexto libre con sugerencias: el valor es lo que se escribe, esté o no en la lista.
- CheckboxSí o no, o varios de una lista. Con estado indeterminado.
- ComboboxPicker con búsqueda: el valor tiene que ser uno de la lista. Simple, múltiple con chips y async.
- InputEl campo de texto. Tres alturas y el mismo cuerpo que Select, Combobox y Textarea.
- LabelLa etiqueta de un campo, con la marca de obligatorio incluida.
- RadioGroupUna opción de pocas, todas visibles.
- SelectElegir uno de una lista corta y cerrada, con el cuerpo de Input y la lista de DropdownMenu.
- SwitchEncendido o apagado, con efecto inmediato. Dos tamaños y variante de acento.
- TextareaTexto largo, con el mismo cuerpo y los mismos estados que Input.
- ToggleUn botón que queda apretado: negrita, filtro activo, vista de lista.
- ToggleGroupVarios Toggle juntos, en modo «uno» o «varios».
Superposiciones
- AlertDialogConfirmar algo que no se puede deshacer. Exige una respuesta.
- DialogUna tarea corta encima de la página, sin perder el contexto de atrás.
- DropdownMenuAcciones sobre la página en la que estás. Ítems, checks, radios, submenús y atajos.
- PopoverUna tarjeta anclada a un control, con contenido interactivo.
- SheetUn panel que entra desde un borde. Los cuatro lados.
- Toaster (Sonner)Los avisos de la esquina. El
Toasterva una vez en el layout; los mensajes salen detoast(). - TooltipUna línea de texto que aclara un control, en hover y en foco.
Navegación
- AppShellEl layout de un panel: sidebar sticky desde
lgy, debajo, una barra de 56px con hamburguesa. - AppShellContentEl contenedor de una página de panel: ancho máximo, márgenes y separación, iguales en toda la app.
- NavigationMenuEl mega menú de un sitio: un trigger abre un panel donde cada ítem es un link.
- SidebarLa navegación lateral de un panel: header, grupos, ítems con ícono y contador, footer y modo colapsado.
- TabsSecciones de la misma página que se turnan. Subrayado bajo la activa.
- ThemeSwitcherLos tres estados del tema —sistema, claro, oscuro— en una barra segmentada.
- UserMenuEl avatar del footer del sidebar con el menú de la cuenta y el selector de tema.
Contenido y datos
- AlertUn aviso fijo dentro de la página: informativo, éxito, atención o error.
- CardLa superficie que agrupa: cabecera, contenido, pie y acción. Dos variantes, dos tamaños, interactiva y seleccionable.
- EmptyStateQué se ve cuando no hay nada: ícono, título, una línea y la acción que lo arregla.
- PageHeaderEl encabezado de una pantalla: migas, título, bajada y acciones.
- TableUna tabla de datos: cabecera con banda, columnas numéricas alineadas a la derecha y densidad compacta.