Avatar
Foto de una persona con iniciales de respaldo cuando la imagen no carga.
Playground
La referencia viva de lo que el sistema trae por defecto: una marca, el wallpaper y pantallas armadas solo con componentes del paquete. Cambiá los controles, abrí el panel del asistente para ver el layout responder al ancho del contenido y llevate el código.
Tu configuración
Así se integra lo que elegiste arriba: cuatro variables de marca y --ambient en el globals.css, y el layout con ThemeProvider y AppShell. Queda guardada en este navegador: el resto del sitio se ve con ella.
Copiá esto en tu globals.css
@import "tailwindcss";
@import "sebs7n-ui/theme.css";
/* Todo en su default: no hace falta escribir nada. */Y esto en tu layout
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<TooltipProvider>
<AppShell
ambient
sidebar={<AppSidebar />}
>
{children}
</AppShell>
</TooltipProvider>
</ThemeProvider>Pantallas
Cuatro pantallas dentro de un AppShell, armadas solo con componentes del paquete. Hacé clic adentro y probá ⌘K, ? o g y una letra.
Ancho del contenido: —
Cómo se ve
Todo lo de abajo son los componentes del paquete, sin una clase de más. Abrí el menú y el diálogo, arrastrá el slider, tabulá por el formulario.
Vencen 7 facturas esta semana
La franja y el ícono toman el color de marca.
La pastilla se desliza de una pestaña a otra.
| Nº | Cliente | Concepto | Estado | Monto |
|---|---|---|---|---|
| 0012 | Acme S.A. | Licencias anuales | Pagada | $ 480.000 |
| 0013 | Nube Digital | Soporte mensual | Enviada | $ 612.500 |
| 0014 | Estudio Ruiz | Consultoría | Vencida | $ 395.000 |
Todos los componentes
La primera demo de cada uno, con la configuración de arriba. El título lleva a su página.
Fundamentos
Badge
Etiqueta de estado: nueve colores sólidos y sin borde, con punto opcional, y el contador redondo de iCloud (variant="count").
Button
La acción, con las variantes de iCloud: acento sólido, gris, texto de acento y rojo. Seis tamaños —con los botones de ícono de la toolbar— y estado de carga.
CopyButton
Copia un texto al portapapeles: el botón de ícono plain de 28, o texto e ícono. Pasa a ✓ durante 1,5 s, el tooltip dice «Copiado» y se anuncia.
CountBadge
El contador de un botón de ícono de barra —la campana con los no leídos—: un Badge variant="count" arriba a la derecha del ícono, con «99+».
Icon
Un ícono de lucide con los tamaños, los tonos y la semántica del sistema: decoración por defecto, imagen con nombre si tiene label.
Kbd
Una tecla o un atajo en línea, en la mono del sistema, en un gris sin borde.
Separator
Una línea de 1px, horizontal o vertical, que agrupa sin decir nada.
Skeleton
El bloque gris con un brillo lento que lo cruza mientras carga algo.
Spinner
El indicador de carga: tres tamaños, el color del texto y nombre accesible opcional.
Stat
Un KPI: etiqueta, número grande, variación y una línea de contexto.
Tag
Un dato que puso el usuario y puede sacar: un filtro, una etiqueta, un destinatario.
TextLink
El link suelto de iCloud: semibold en el acento, con «›» para ir a otra pantalla o «↗» para salir del sitio.
Formularios
AuthLayout
La pantalla de entrar, registrarse, recuperar la clave o esperar una aprobación, como la de iCloud: columna de 400, marca, título grande, el formulario en una card y los links abajo.
Autocomplete
Texto libre con sugerencias: el valor es lo que se escribe, esté o no en la lista.
Calendar
Un mes en una grilla —o varios, uno al lado del otro—, para elegir una fecha o un rango. Es el calendario de DatePicker, suelto.
Checkbox
Sí o no, o varios de una lista, como la casilla de Calendar de iCloud. Con estado indeterminado y el check circular de Reminders (shape="circle").
CheckboxGroup
Varias casillas que son un solo dato: el valor sale como array y el error es del grupo.
ColorPicker
Un campo que abre un selector de color, con paleta, espectro, valores y los últimos colores usados. Trabaja en OKLCH.
Combobox
Picker con búsqueda: el valor tiene que ser uno de la lista. Simple, múltiple con chips y async.
CountryPicker
Un país de la lista ISO, con su bandera y el nombre en el idioma de la app. Se escribe para filtrar, sin tildes.
DatePicker
Un campo que abre un calendario. Reemplaza a <input type="date">, cuyo calendario es del navegador y no se puede estilar.
DateTimePicker
Fecha y hora en un solo campo: un DatePicker y un TimePicker pegados, con el valor en un Date.
DropTarget
Soltar archivos sobre cualquier contenido —una sección, una card— para abrir su formulario con el archivo, sin volverlo un recuadro de subida.
DropZone
Un recuadro para soltar o elegir archivos, con la lista abajo: miniatura, nombre, tamaño, el progreso que pase la app y quitar.
Field
Un campo: la etiqueta, la ayuda y el error atados al control, sin un solo id escrito a mano.
Fieldset
Un grupo de campos con un título común, y un disabled que los apaga a todos.
Form
Un form nativo que junta los valores por name y reparte los errores del servidor a cada campo.
Input
El campo de texto. Tres alturas y el mismo cuerpo que Select, Combobox y Textarea.
InputGroup
Un campo con cosas pegadas adentro —«$», «.com», la lupa, un ⌘K o un botón—, con la superficie y el foco de iCloud en el grupo.
Label
La etiqueta de un campo, con la marca de obligatorio incluida.
MultiSelect
Elegir varias opciones de una lista: los elegidos como chips en el campo y la lista del menú de iCloud con el círculo de acento a la derecha, con «Seleccionar todo» y tope.
NumberField
Un número con botones de −/+, topes de verdad y formato por locale. El valor sale como number, no como texto.
OTPField
El código de verificación: una casilla por dígito y un solo valor, con el autorrelleno del SMS.
PasswordInput
Un campo de contraseña con el ojo adentro para mostrarla, y una barra de seguridad de 4 niveles opcional.
PhoneInput
Un teléfono en E.164: el país con su bandera y código adentro del campo, y el número en dígitos. Sin libphonenumber.
RadioGroup
Una opción de pocas, todas visibles.
Rating
Una calificación con estrellas: de solo lectura, con fracciones, o como campo de un formulario.
SearchField
El buscador de una lista: la lupa adentro del campo, «Borrar búsqueda» cuando hay texto y Escape que vacía.
Select
Elegir uno de una lista corta y cerrada, con el cuerpo de Input y la lista de DropdownMenu.
Slider
Elegir un número —o un rango— arrastrando, con el slider de Photos de iCloud: pista de 2 px y perilla de 14. Marcas opcionales y valor visible.
Switch
Encendido o apagado, con efecto inmediato. Dos tamaños y variante de acento.
TagsInput
Un campo de etiquetas libres: se escribe, Enter o coma la agrega como un Tag, y Backspace quita la última.
Textarea
Texto largo, con el mismo cuerpo y los mismos estados que Input.
TimePicker
Una hora en 24 h: se tipea («930») o se elige de una lista cada 15 minutos, con mínimo y máximo.
Toggle
Un chip de filtro que queda apretado: el token de la búsqueda de iCloud, gris en reposo y gris más fuerte, en semibold, prendido.
ToggleGroup
Opciones que se prenden, juntas en el segmentado de iCloud: segmentos del mismo ancho y el prendido en la pastilla neutra del segmentado. En modo «uno» o «varios», y el filtro de selección única de una barra.
Superposiciones
AlertDialog
Confirmar algo que no se puede deshacer. Exige una respuesta.
Command
La búsqueda de iCloud: un search field y los resultados como filas de menú, con ícono y detalle.
CommandPalette
La paleta ⌘K declarativa: grupos de ítems ({ heading, items }) sobre CommandDialog, con carga diferida opcional de los datos.
ContextMenu
El menú del botón derecho: las mismas acciones del DropdownMenu, ancladas al puntero.
Dialog
Una tarea corta encima de la página, sin perder el contexto de atrás.
Drawer
La hoja que se arrastra: entra desde un borde, se cierra deslizándola y para en puntos de anclaje.
DropdownMenu
Acciones sobre la página en la que estás. Ítems, checks, radios, submenús y atajos.
HoverCard
Una tarjeta con el adelanto de un link, al pasar el mouse. Nunca contenido crítico.
NotificationsPopover
La campana de la barra con el contador de lo no leído y un popover con la lista de avisos y «Marcar todas como leídas».
Popover
Una tarjeta anclada a un control, con contenido interactivo.
Sheet
Un panel que entra desde un borde. Los cuatro lados.
ShortcutsDialog
La hoja de atajos de teclado: un diálogo con lo que hace cada tecla, con Kbd. Solo la hoja: el atajo que la abre lo registra la app.
Toaster (Sonner)
Los avisos de la esquina. El Toaster va una vez en el layout; los mensajes salen de toast().
Tooltip
Una línea de texto que aclara un control, en hover y en foco: chica, gris oscura en los dos temas y sin flecha.
Navegación
AppShell
El layout de una app de iCloud: barra global de 44 a todo el ancho, sidebar a ras debajo desde lg y, en el teléfono, una barra de 44 con hamburguesa.
AppShellContent
El contenedor de una página de panel: ancho máximo, márgenes y separación, iguales en toda la app.
Breadcrumb
Dónde estoy en la jerarquía del sitio: <nav> + <ol>, con el medio colapsable en «…».
Footer
El pie de una página, la contraparte del Navbar abajo: a todo el ancho, con la línea arriba, opaco como la barra global y translúcido sobre el wallpaper.
ListIndex
El índice A–Z de Contactos: una tira de letras junto a una lista agrupada, cada una un link a su sección, las vacías apagadas y, con el dedo, se desliza.
Menubar
La barra de menús de una app: Archivo, Editar, Ver. Un DropdownMenu por título, coordinados.
Navbar
La barra global de la home de iCloud: fija a todo el ancho, 44 de alto, translúcida con desenfoque sobre el contenido que pasa por abajo.
NavbarLink
El link de texto de la barra: secundario en reposo y más fuerte con el puntero y en la página actual, como los de icloud.com.
NavigationMenu
El mega menú de un sitio: un trigger abre un panel donde cada ítem es un link.
Pagination
Anterior, números con «…» y siguiente. Con links de verdad o con botones.
Resizable
Paneles que se reparten el espacio y se redimensionan arrastrando la línea entre paneles de Mail, que se vuelve acento al agarrarla; con teclado, mínimos, máximos y el reparto para guardar.
Sidebar
La lista de fuentes de iCloud: a ras del borde, ítems de 32 con ícono en el acento y contador en texto, secciones plegables con «+» y modo colapsado.
SidebarToggle
El botón que pliega y despliega el Sidebar, como el de la lista de fuentes de Drive y Mail de iCloud.
SplitView
El master-detail de iCloud Mail: sidebar, lista y detalle separados por la línea entre paneles, que en el teléfono pasa a un panel por vez con «‹ Atrás».
Stepper
Los pasos de un asistente: completos en el acento con el tilde, el actual con un aro de acento, los que faltan en gris y el que tiene un error en rojo, unidos por una línea de 1 px.
Tabs
Secciones de la misma página que se turnan: las pestañas de Settings de iCloud (subrayado de 1 px) o el segmentado de Calendar.
ThemeSwitcher
Los tres estados del tema —sistema, claro, oscuro— en el segmentado de iCloud.
Toolbar
La toolbar de iCloud: a todo el ancho, 44 de alto, botones de ícono de 28, y una sola parada de tabulación para toda la barra.
UserMenu
El avatar del footer del sidebar con el menú de la cuenta y el selector de tema.
Contenido y datos
Accordion
Secciones plegables como el disclosure de iCloud: filas de 44 con separador y un chevron › que gira. Una sola abierta, o varias.
AiButton
Lo que hace la IA: el botón, el ícono, el lanzador flotante del asistente, el borde que se enciende mientras trabaja y el placeholder. Con su propio color, que no es el de marca.
Alert
Un aviso fijo dentro de la página: informativo, éxito, atención o error.
BulkActionsBar
La barra de una selección múltiple: «3 seleccionados», las acciones para todos y «Limpiar selección».
CalendarView
El calendario de iCloud en vista de mes, semana y día: hoy en el círculo del acento, chips de todo el día, eventos con hora y la línea roja de ahora.
Card
El widget de iCloud: franja de cabecera con ícono, título y acción; cuerpo en filas con separadores, en una o dos columnas; y el «…» abajo.
Carousel
Un carrusel sobre Embla con la API de shadcn: flechas de 28 sobre el material translúcido, puntos y «2 de 5» para el lector.
Chart
Gráficos sobre Recharts con los tokens del sistema: paleta de cinco series validada para daltonismo, tooltip y leyenda propios, y animación que respeta prefers-reduced-motion.
Chat
Las piezas de una conversación con un asistente: cabecera, mensajes, sugerencias, el campo para escribir y sus estados. No sabe de modelos ni de streaming: eso es de la app.
Collapsible
Mostrar y ocultar un bloque con un botón, con el disclosure de iCloud opcional. La pieza simple detrás del Accordion.
DataTable
Una tabla de datos sobre la lista de Drive: columnas por definición, orden con la cabecera, búsqueda, páginas o «Cargar más», selección con casillas, vacío, esqueletos y grupos.
Disclosure
Secciones plegables sin JavaScript: <details> y <summary> del navegador con las filas y el chevron del Accordion. Server Component.
EmptyState
Qué se ve cuando no hay nada: ícono, título, una línea y la acción que lo arregla.
FileGrid
La vista de íconos de iCloud Drive: miniaturas con el filo de 1 px, nombre y tipo abajo, una caja gris con el puntero y la misma caja con un borde del acento en la elegida, el «…» con el menú del ítem y flechas en dos dimensiones.
FilterBar
La barra sobre una lista o una tabla: búsqueda, filtros y acciones al final. Una fila si la barra mide 36 rem o más, una columna por debajo (container query).
ListRow
La fila de lista de iCloud: ícono de 32, título en 17, detalle gris, valor a la derecha, punto de color y chevron; en secciones con su total y con la selección de Drive.
LogViewer
El visor de logs: monoespaciado, una línea por renglón, con el nivel en color y en texto, que sigue la última línea.
Marquee
Una fila de logos o nombres que se desplaza sola en bucle cuando no entra en el ancho, como la de clientes de una home. Si entra, queda quieta y centrada.
Meter
Una medida dentro de un rango: disco usado, cupo consumido, ocupación. No es un progreso. Con StackedMeter, la barra de almacenamiento de iCloud.
MetricChart
El gráfico de una métrica en SVG a mano: área o línea con guías, eje Y a la derecha y tooltip con línea punteada al pasar el puntero o con el teclado.
PageHeader
El encabezado de una pantalla: migas, título, bajada y acciones.
Progress
Cuánto falta para que termine algo. Determinada o indeterminada, en dos altos.
ScrollArea
Una caja con scroll y una barra propia, discreta: aparece al pasar el mouse o al scrollear.
SettingsSection
Una sección de una pantalla de Configuración: una Card con título y descripción en la cabecera y los campos a lo ancho, en una SettingsGrid de 1 columna y 2 desde 48 rem de ancho de la grilla (container query: un panel lateral abierto la deja en 1, como un teléfono).
SortableGrid
Tarjetas en una grilla que, en modo edición, tiemblan y se reordenan arrastrando —las demás se corren— o con el teclado; se sacan con «−» y se agregan con el «+» de SortableAddButton, como la pantalla de inicio de iOS.
SortableList
Una lista que en modo edición se reordena arrastrando la manija ⋮⋮ de cada fila, o con el teclado, con cada movimiento anunciado; y saca y agrega filas.
Sparkline
Una curva de un vistazo en SVG a mano, sin librería de gráficos: decorativa, para la fila de una lista o una card.
StatGrid
Una grilla responsive de indicadores: un Stat dentro de una Card cada uno, con esqueleto de carga del alto final.
Table
La vista de lista de iCloud Drive: sin caja, filas de 41 con separadores interiores, selección redondeada en el acento y títulos de grupo.
Timeline
Una lista de eventos en el tiempo con la fila de iCloud: título 17, detalle 14 gris, la hora a la derecha y el punto del color del evento unidos por una línea, agrupados por día.
Tree
Un árbol de carpetas y archivos en el lenguaje de la lista de iCloud Drive: disclosure que gira, sangría por nivel, columnas alineadas, la selección de Drive (simple o múltiple) y, con grid, un treegrid que se recorre por celda.
WidgetBoard
Un panel de widgets que el usuario edita, como la pantalla de inicio de iCloud: una grilla estática de cards que, con «Editar», se reordena arrastrando o con el teclado, saca widgets con su «−», los vuelve a agregar desde un catálogo y se restablece. Se guarda en localStorage.
WidgetCard
El widget de iCloud Home armado de una —ícono, título, subtítulo, acción, filas y «…»—, translúcido sobre el wallpaper; y la card promocional de Ajustes.