Referencia viva

Sistema de diseño

Cada componente base con sus estados. Las reglas y tokens viven en docs/design.md.

Button

ui/components/base/button.tsx

Píldoras que se presionan a 0.97. La carga mantiene el ancho y el foco, y cambia la etiqueta por un spinner con un desenfoque suave.

Field, Form

ui/components/base/field/ · form/

Base UI conecta etiquetas, ayudas y validez. Los errores aparecen bajo el campo; el formulario bloquea envíos inválidos y enfoca el primer problema.

Notice

ui/components/base/notice/notice.tsx

Mensajes sobre una página o un formulario completo. Los problemas se anuncian de inmediato (role=alert); el resto, con cortesía.

Las cuentas llegan pronto

Estamos terminando los últimos detalles.

Revisa tu correo

Te enviamos un enlace para restablecer tu contraseña.

Correo, usuario o contraseña incorrectos.

Badge, Spinner, Switch

ui/components/base/badge.tsx · spinner.tsx · switch.tsx

Estados pequeños e interruptores. El botón del switch se estira al presionarlo.

NeutroMintAbierto ahoraVencido

Recordatorios por correo

Tabs

ui/components/base/tabs.tsx

Control segmentado. El indicador se desliza; los paneles aparecen con fundido.

Seis reservas, dos canchas libres después de las 6 p. m.

Menu, Dialog, Drawer, Toast

ui/components/base/menu.tsx · dialog.tsx · drawer.tsx · toast.tsx

Los menús crecen desde su disparador; los diálogos quedan centrados; los paneles siguen tu dedo; los avisos se apilan y se expanden al pasar el cursor.

Presencia y layout

motion/react · ui/motion/presets.ts

Los elementos aparecen y desaparecen con fundido. Aquí el movimiento es primero opacidad: posición y tamaño cambian solo cuando significan algo (paneles, indicadores de pestañas).

Cancha 1
Cancha 2
Cancha 3