# sebs7n-ui > Design system para React: Geist (el lenguaje visual de Vercel) sobre las primitivas de shadcn/ui base-nova (Base UI), empaquetado como una sola dependencia. Tailwind v4, Base UI, React 19, Next 15/16. ## Sistema - [Instalación](https://ui.sebastianfermanelli.com/docs/instalacion.md): Una dependencia, un `@import` y tres variables de marca. - [Tokens](https://ui.sebastianfermanelli.com/docs/tokens.md): Color, tipografía, radios y sombras. Los valores salen de `tokens/geist.json` y de `theme.css`. - [Theming](https://ui.sebastianfermanelli.com/docs/theming.md): Tres variables de marca, claro y oscuro, radio y densidad. - [Accesibilidad](https://ui.sebastianfermanelli.com/docs/accesibilidad.md): Lo que garantiza el paquete y lo que le queda a la app. - [Reglas de uso](https://ui.sebastianfermanelli.com/docs/reglas.md): Las decisiones que no se ven en una tabla de props. - [Migrar desde las versiones internas](https://ui.sebastianfermanelli.com/docs/migracion.md): Para las apps que ya usaban el sistema con su nombre viejo. Dos cambios, los dos mecánicos. - [Changelog](https://ui.sebastianfermanelli.com/docs/changelog.md): Todas las versiones, hasta la 0.1.0. ## Fundamentos - [Avatar](https://ui.sebastianfermanelli.com/docs/components/avatar.md): Foto de una persona con iniciales de respaldo cuando la imagen no carga. - [Badge](https://ui.sebastianfermanelli.com/docs/components/badge.md): Etiqueta de estado: nueve colores en tono suave, dos en sólido, con punto opcional. - [Button](https://ui.sebastianfermanelli.com/docs/components/button.md): La acción. Siete variantes, seis tamaños, estado de carga y forma de píldora para marketing. - [Kbd](https://ui.sebastianfermanelli.com/docs/components/kbd.md): Una tecla o un atajo en línea, en Geist Mono. - [Separator](https://ui.sebastianfermanelli.com/docs/components/separator.md): Una línea de 1px, horizontal o vertical, que agrupa sin decir nada. - [Skeleton](https://ui.sebastianfermanelli.com/docs/components/skeleton.md): El bloque gris que late mientras carga algo. - [Stat](https://ui.sebastianfermanelli.com/docs/components/stat.md): Un KPI: etiqueta, número grande, variación y una línea de contexto. ## Formularios - [Autocomplete](https://ui.sebastianfermanelli.com/docs/components/autocomplete.md): Texto libre con sugerencias: el valor es lo que se escribe, esté o no en la lista. - [Checkbox](https://ui.sebastianfermanelli.com/docs/components/checkbox.md): Sí o no, o varios de una lista. Con estado indeterminado. - [Combobox](https://ui.sebastianfermanelli.com/docs/components/combobox.md): Picker con búsqueda: el valor tiene que ser uno de la lista. Simple, múltiple con chips y async. - [Input](https://ui.sebastianfermanelli.com/docs/components/input.md): El campo de texto. Tres alturas y el mismo cuerpo que Select, Combobox y Textarea. - [Label](https://ui.sebastianfermanelli.com/docs/components/label.md): La etiqueta de un campo, con la marca de obligatorio incluida. - [RadioGroup](https://ui.sebastianfermanelli.com/docs/components/radio-group.md): Una opción de pocas, todas visibles. - [Select](https://ui.sebastianfermanelli.com/docs/components/select.md): Elegir uno de una lista corta y cerrada, con el cuerpo de Input y la lista de DropdownMenu. - [Switch](https://ui.sebastianfermanelli.com/docs/components/switch.md): Encendido o apagado, con efecto inmediato. Dos tamaños y variante de acento. - [Textarea](https://ui.sebastianfermanelli.com/docs/components/textarea.md): Texto largo, con el mismo cuerpo y los mismos estados que Input. - [Toggle](https://ui.sebastianfermanelli.com/docs/components/toggle.md): Un botón que queda apretado: negrita, filtro activo, vista de lista. - [ToggleGroup](https://ui.sebastianfermanelli.com/docs/components/toggle-group.md): Varios Toggle juntos, en modo «uno» o «varios». ## Superposiciones - [AlertDialog](https://ui.sebastianfermanelli.com/docs/components/alert-dialog.md): Confirmar algo que no se puede deshacer. Exige una respuesta. - [Dialog](https://ui.sebastianfermanelli.com/docs/components/dialog.md): Una tarea corta encima de la página, sin perder el contexto de atrás. - [DropdownMenu](https://ui.sebastianfermanelli.com/docs/components/dropdown-menu.md): Acciones sobre la página en la que estás. Ítems, checks, radios, submenús y atajos. - [Popover](https://ui.sebastianfermanelli.com/docs/components/popover.md): Una tarjeta anclada a un control, con contenido interactivo. - [Sheet](https://ui.sebastianfermanelli.com/docs/components/sheet.md): Un panel que entra desde un borde. Los cuatro lados. - [Toaster (Sonner)](https://ui.sebastianfermanelli.com/docs/components/sonner.md): Los avisos de la esquina. El `Toaster` va una vez en el layout; los mensajes salen de `toast()`. - [Tooltip](https://ui.sebastianfermanelli.com/docs/components/tooltip.md): Una línea de texto que aclara un control, en hover y en foco. ## Navegación - [AppShell](https://ui.sebastianfermanelli.com/docs/components/app-shell.md): El layout de un panel: sidebar sticky desde `lg` y, debajo, una barra de 56px con hamburguesa. - [AppShellContent](https://ui.sebastianfermanelli.com/docs/components/app-shell-content.md): El contenedor de una página de panel: ancho máximo, márgenes y separación, iguales en toda la app. - [NavigationMenu](https://ui.sebastianfermanelli.com/docs/components/navigation-menu.md): El mega menú de un sitio: un trigger abre un panel donde cada ítem es un link. - [Sidebar](https://ui.sebastianfermanelli.com/docs/components/sidebar.md): La navegación lateral de un panel: header, grupos, ítems con ícono y contador, footer y modo colapsado. - [Tabs](https://ui.sebastianfermanelli.com/docs/components/tabs.md): Secciones de la misma página que se turnan. Subrayado bajo la activa. - [ThemeSwitcher](https://ui.sebastianfermanelli.com/docs/components/theme-switcher.md): Los tres estados del tema —sistema, claro, oscuro— en una barra segmentada. - [UserMenu](https://ui.sebastianfermanelli.com/docs/components/user-menu.md): El avatar del footer del sidebar con el menú de la cuenta y el selector de tema. ## Contenido y datos - [Alert](https://ui.sebastianfermanelli.com/docs/components/alert.md): Un aviso fijo dentro de la página: informativo, éxito, atención o error. - [Card](https://ui.sebastianfermanelli.com/docs/components/card.md): La superficie que agrupa: cabecera, contenido, pie y acción. Dos variantes, dos tamaños, interactiva y seleccionable. - [EmptyState](https://ui.sebastianfermanelli.com/docs/components/empty-state.md): Qué se ve cuando no hay nada: ícono, título, una línea y la acción que lo arregla. - [PageHeader](https://ui.sebastianfermanelli.com/docs/components/page-header.md): El encabezado de una pantalla: migas, título, bajada y acciones. - [Table](https://ui.sebastianfermanelli.com/docs/components/table.md): Una tabla de datos: cabecera con banda, columnas numéricas alineadas a la derecha y densidad compacta. ## Opcional - [Registry](https://ui.sebastianfermanelli.com/registry.md): Ítems con formato shadcn para `shadcn add `.