Pular para o conteúdo

Biblioteca 21st

Os componentes que a OCTA trouxe do 21st.dev, catalogados por função. Cada um tem a UI rodando, o código em duas versões e um código de referência — cite o código numa conversa e o Claude constrói com ele.

componentes: 10
funções: 9
com vanilla: 9

Botão BTN

BTN-01 Botão origem Botão inundado por um círculo que nasce no ponto exato do toque, do cursor ou no centro quando o foco vem do teclado. adotadovanilla
sem preview
BTN-02 Botão com halo em degradê Botão escuro com uma camada de degradê índigo → rosa → amarelo desfocada atrás, que vai a 100% de opacidade no hover. descartado

Tabela e dado TAB

TAB-01 Tabela de dados Tabela de largura total com borda inferior por linha, realce apagado no hover e célula de 16 px. Só estrutura — nenhum comportamento. adotadovanilla

FAQ e acordeão FAQ

FAQ-01 FAQ com abas e acordeão FAQ com abas por categoria e itens em acordeão: a aba ativa ganha um fundo que sobe de baixo, o painel entra subindo 20 px e o + gira 45°. adotadovanilla

Rodapé ROD

ROD-01 Rodapé de quatro colunas Rodapé de quatro colunas — newsletter com campo e botão de enviar dentro, links, contato, redes e chave claro/escuro. adotadovanilla

Galeria e mídia GAL

GAL-01 Galeria bento arrastável Grade de fotos em faixa horizontal arrastável, com entrada em cascata e modal que amplia a foto ao toque. adotadovanilla

Carrossel e depoimento CAR

CAR-01 Carrossel coverflow 3D Card central inteiro e vizinhos girados em perspectiva, com setas, pontos, passagem automática e swipe. React puro, sem dependências. adotadovanilla

Rolagem e seção presa ROL

ROL-01 Pilha que se espalha na rolagem Pilha de cards que se espalha conforme a rolagem avança, numa seção presa de 350 vh, com paralaxe do cursor. adotadovanilla

Gaveta e revelação GAV

GAV-01 Gaveta de revelação Cabeçalho clicável com ícone, título, resumo e seta; a lista abre animando grid-rows 0fr → 1fr, com as linhas entrando escalonadas a 75 ms. adotadovanilla

Autenticação AUT

AUT-01 Login em tela dividida Formulário à esquerda e mídia à direita com véu em degradê; os campos entram escalonados. No celular a mídia sai e sobra o formulário. adotadovanilla

O que ainda não existe

Prefixos reservados, com a grafia travada para quando o primeiro componente da função chegar: NAV, PAG, FOR, PRE, HER, MOD, CAL, AVI. Categoria vazia não aparece aqui — categoria sem componente é ficção que alguém aplica achando que é norma.

A licença dos componentes do 21st.dev não foi verificada. Vale para todos: o acervo é de uso interno enquanto isso não se resolver.