Ravox KitSuperfícies

Rolagem

Área com a barra fina da casa no lugar da do sistema, que aparece ao rolar e com o mouse em cima. As bordas esmaecem quando há mais conteúdo. A rolagem continua nativa: roda, toque, teclado e busca da página funcionam igual.

14:32Pix de R$ 297,00 confirmadoPedido #4821
14:31Pedido criadoAcesso anual · Marina Rocha
13:58Componente aprovadoBotão tecla · @caio
13:40Design publicadoAurora · landing
12:15Reembolso concluídoPedido #4790 · R$ 49,00
11:02Novo cadastrolia@prado.design
10:47Componente recusadoMenu radial · faltou foco visível
10:12Cupom criadoLANCAMENTO · 20% até 05/10
09:30Pix de R$ 49,00 confirmadoPedido #4819
09:03Backup diárioBanco · 212 MB
08:44Design atualizadoRazão · painel financeiro
08:10Novo cadastrojoao@oficina.dev

Ajustes

Direção

Barra

Bordas esmaecidas

Exemplos

Faixa de filtros no celular

Texto longo com a barra sempre à vista

1. Licença

Cada design comprado pode ser usado em projetos seus e de clientes, sem limite de quantidade.

2. O que não pode

Revender ou distribuir o design como template, tema ou kit, pago ou gratuito.

3. Atualizações

Correções e versões novas do mesmo design ficam em Minhas compras, sem custo.

4. Reembolso

Em até 7 dias depois da compra, respondendo o e-mail do recibo.

Até uma altura, depois rola

14:32Pix de R$ 297,00 confirmadoPedido #4821
14:31Pedido criadoAcesso anual · Marina Rocha
13:58Componente aprovadoBotão tecla · @caio
13:40Design publicadoAurora · landing
12:15Reembolso concluídoPedido #4790 · R$ 49,00
11:02Novo cadastrolia@prado.design
10:47Componente recusadoMenu radial · faltou foco visível

Instalação

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

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

Opções

Opção	Tipo	Padrão	O que faz
direcao	"vertical" \| "horizontal" \| "ambas"	"vertical"	Para onde rola.
rotulo	string	—	Nome da área para leitores de tela (vira uma região). Quando há o que rolar, a área entra no Tab e as setas rolam.
sombras	boolean	true	Esmaece a borda do lado em que ainda há conteúdo.
barra	"auto" \| "sempre"	"auto"	Some sozinha depois de rolar, ou fica à vista enquanto houver o que rolar.
className / classeViewport	string	—	A altura (h-72, max-h-96) vai no className; classeViewport vai na área que rola.
refViewport	Ref<HTMLDivElement>	—	Ref da área que rola, para scrollTo e scrollIntoView.