Ravox KitSuperfícies

Sanfona

Perguntas, seções de configuração e detalhes que se abrem um de cada vez ou vários juntos. Títulos de verdade (h3), setas para andar entre eles e altura animada que fica instantânea com movimento reduzido.

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.

Ajustes

Tipo
Variante

Exemplos

Controlada, sempre um aberto

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.

Vários abertos, em cartões

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.

Títulos no nível certo

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.

Instalação

O shadcn cria components/ui/sanfona.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.

npx shadcn@latest add https://ui.ravoxlabs.com/r/sanfona.json

Opções

OpçãoTipoPadrãoO que faz
tipo"unico" | "varios""unico"Um aberto por vez, ou cada item abre por conta própria (Sanfona).
valor / aoTrocarstring | string[] / (valor) => void—Modo controlado: uma string no único, uma lista no vários (Sanfona).
padraostring | string[]—Aberto(s) no começo, modo não controlado (Sanfona).
recolhivelbooleantrueNo único, deixa fechar o item aberto clicando nele de novo (Sanfona).
variante"linhas" | "cartoes""linhas"Itens separados por um fio, ou cada um numa caixa com borda (Sanfona).
nivel2 | 3 | 4 | 5 | 63Nível do título de cada item. Siga a hierarquia da página (Sanfona).
valorstring—Identifica o item (SanfonaItem).
desabilitadobooleanfalseTrava o item; as setas pulam ele (SanfonaItem).
SanfonaGatilho / SanfonaConteudoComponentProps<"button"> / <"div">—O título clicável (com a seta) e a região que abre.