StofliUI - Librería de componentes UI accesibles y personalizables

Cargando...

import { Accordion } from "stofli-ui";

Cargando...

Un acordeón simple que muestra una lista de preguntas frecuentes.

Cargando...

Usando allowMultiple={true}, permite expandir varias secciones al mismo tiempo.

Cargando...

Usando defaultOpen={0}, muestra el primer panel expandido al cargar el componente.

Cargando...

Puedes personalizar cualquier parte del componente utilizando las propiedades de className con clases de Tailwind CSS.

Cargando...

Prop	Tipo	Default	Descripción
`items`	`{ title: string, content: ReactNode }[]`	-	Array de elementos con título y contenido
`defaultOpen`	`number`	`-1`	Índice del item abierto por defecto (-1 para ninguno)
`allowMultiple`	`boolean`	`false`	Permite abrir múltiples secciones a la vez
`className`	`string`	-	Clases para el contenedor principal
`itemClassName`	`string`	-	Clases para cada elemento del acordeón
`buttonClassName`	`string`	-	Clases para los botones del acordeón
`titleClassName`	`string`	-	Clases para los títulos del acordeón
`contentClassName`	`string`	-	Clases para el contenido del acordeón
`iconClassName`	`string`	-	Clases para los iconos del acordeón

Accordion