Pill accordion

Píldoras que crecen hasta volverse tarjetas sobre la foto de un producto, con un material de vidrio solo de CSS: una abierta a la vez, recorridas con Anterior y Siguiente.

Orders. Take an order at the table and it reaches the kitchen before you do.
Kitchen screen. Every ticket in the order it came in, with a timer that turns orange when a dish runs late.
Tables. See which tables are free, waiting or ready to pay, from any device.
Payments. Split the bill, take cards and cash, and close the day in one tap.
Reports. Know what sold, when, and by whom, without a spreadsheet.

Instalación

Agrégalo con el CLI de shadcn o copia el código a mano.

$ pnpm dlx shadcn@latest add @ssntl/pill-accordion

Referencia de API

PillAccordion

value?Tipo: string | nullThe open item's value, or null when every item is a pill.Por defecto:—
defaultValue?Tipo: string | nullThe item open on mount, when uncontrolled.Por defecto:null
onValueChange?Tipo: (value: string | null) => voidPor defecto:—

También acepta todos los props de <div>.

PillAccordionList

aria-labelobligatorioTipo: stringNames the set: “Features of the studio plan”.Por defecto:—

También acepta todos los props de <ul>.

PillAccordionItem

valueobligatorioTipo: stringA unique value for the item.Por defecto:—

También acepta todos los props de <li>.

Sin props propios: cada uno pasa todos sus props al elemento de la derecha.

PillAccordionTrigger<button>
PillAccordionTriggerIcon<span>
PillAccordionContent<div>
PillAccordionPrevious<button>
PillAccordionNext<button>
PillAccordionClose<button>

Reglas

Lo que este componente espera de ti, tal como se instala en components/ui/pill-accordion.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).

components/ui/pill-accordion.md

## Reglas de Pill accordion

- **Una abierta a la vez.** La píldora crece hasta ser tarjeta mientras las demás hacen espacio; el foco entra a la tarjeta, y Escape o Cerrar lo devuelve a la píldora.
- Anterior y Siguiente recorren las tarjetas sin cerrarlas; en los extremos siguen enfocables (`aria-disabled`), así el foco nunca cae a la página.
- El cambio anima el tamaño en 400ms con `--ease-in-out`; la etiqueta sale de inmediato y el texto llega solo cuando la tarjeta lleva dos tercios, subiendo 8px, así nunca se ve cortado. Con movimiento reducido el tamaño cambia de una vez y el texto solo se funde.
- **Vidrio.** La utilidad glass, lo bastante clara para ver la foto a través y medida en 4.5:1 o más con negro o blanco puro detrás, en los dos temas; con transparencia reducida se vuelve sólido.
- Áreas táctiles: las píldoras miden 56px de alto; los botones redondos son discos de 40px dentro de un área de 48px.
- Nombra los botones por lo que recorren (“Función siguiente”) y deja cada tarjeta en una o dos frases.
- Mueve una foto al lado con value y `onValueChange`; funde con opacidad, con todas las fotos montadas.

Abrir el archivo de reglas completo