Ravox KitSurfaces
Accordion
FAQs, settings sections and details that open one at a time or several together. Real headings (h3), arrow keys to move between items, and animated height that becomes instant with reduced motion.
Pode. A licença cobre projetos de clientes, sem limite de quantidade. Só não dá para revender o design como template.
Pix, com liberação na hora, e cartão de crédito em até 3 vezes sem juros.
Sim. Toda correção e versão nova aparece em Minhas compras, sem custo extra.
Tem, em até 7 dias depois da compra. É só responder o e-mail do recibo.
Settings
Toggles
Examples
Controlled, always one open
Aberto agora: perfil
Nome, foto e o @ que aparece nos seus componentes publicados.
Receba um e-mail quando um componente seu for aprovado ou recusado.
2 aparelhos conectados. Saia de todos se não reconhecer algum.
Multiple open, in cards
Pode. A licença cobre projetos de clientes, sem limite de quantidade. Só não dá para revender o design como template.
Pix, com liberação na hora, e cartão de crédito em até 3 vezes sem juros.
Sim. Toda correção e versão nova aparece em Minhas compras, sem custo extra.
Tem, em até 7 dias depois da compra. É só responder o e-mail do recibo.
Headings at the right level
Entrega do pacote
DESIGN.md, sistema.css, tela.html e os prints de cada seção.
Logo depois da confirmação do pagamento, no e-mail e em Minhas compras.
Installation
The command creates components/ui/accordion.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add accordionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | One open at a time, or each item opens on its own (Accordion). |
| value / onValueChange | string | string[] / (value) => void | — | Controlled mode: a string in single, a list in multiple (Accordion). |
| defaultValue | string | string[] | — | Open at the start, uncontrolled mode (Accordion). |
| collapsible | boolean | true | In single, lets you close the open item by clicking it again (Accordion). |
| variant | "lines" | "cards" | "lines" | Items separated by a line, or each one in a bordered box (Accordion). |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Heading level of each item. Follow the page hierarchy (Accordion). |
| value | string | — | Identifies the item (AccordionItem). |
| disabled | boolean | false | Locks the item; the arrow keys skip it (AccordionItem). |
| AccordionTrigger / AccordionContent | ComponentProps<"button"> / <"div"> | — | The clickable heading (with the arrow) and the region that opens. |