Pular para o conteúdo
Fieldbook
Menu
Entrar
PT-BR

Componentes originais, renderizados ao vivo

Componentes que já se movem.

Crie uma interface útil com identidade própria. Explore componentes interativos, obtenha o código ou deixe seu agente buscar a versão certa pelo MCP.

Explorar componentesConecte seu agente

1,381 componentes · 20 categorias · 5,524 versões testadas

Cada prévia está funcionando. Deslize ou use as setas para navegar; toque para pausar.

Pulse button
1524Pulse buttonBotões
Area chart lite
1525Area chart liteGráficos
Aurora veil
1526Aurora veilFundos
Command palette
1527Command paletteSobreposições
Dock menu
1528Dock menuNavegação
Floating label input
1529Floating label inputCampos de entrada
Masonry flow
1532Masonry flowLayout
Morph menu icon
1533Morph menu iconÍcones
Progress ring
1538Progress ringMensagens de status
Scramble text
1539Scramble textEfeitos de texto
Spotlight card
1544Spotlight cardCartões
Blur reveal
1669Blur revealAnimação
Bracket lock cursor
1764Bracket lock cursorCursor
Blur fade reveal
1843Blur fade revealRolagem

Explore os detalhes.

Um arquivo com ritmo. Uma gravação com profundidade. Um menu que acompanha sua mão. Experimente os componentes aqui mesmo.

Explorar a biblioteca
Masonry flow

FB-1532 Masonry flow

Um pouco de ordem. Muito caráter.

Role dentro do arquivo para explorar as mudanças na composição.

Ver componente
Tilt card
Membros

FB-1545 Tilt card

Profundidade que se sente.

Mova o cursor sobre a gravação e observe a luz acompanhar.

Ver componente
Dock menu

FB-1528 Dock menu

Navegação que responde.

Passe o cursor ou selecione um ícone para mudar de espaço.

Ver componente

Comece pelo que você quer criar

Escolha uma família de produtos para encontrar componentes específicos ou siga um guia para montar uma interface completa.

Explore os guias de criação

Botões

442

Botões, interruptores e chamadas para ação que respondem ao ponteiro.

Ver todos
Add Then Confirm Chip
2466Add Then Confirm ChipBotõesUm chip escuro com um rótulo quente cujo sinal de mais balança de um lado para o outro ao passar o mouse, depois gira em uma marca e informa o item adicionado.
Amber upload pill
2707Amber upload pillBotõesUma pílula de upload gradiente quente com uma borda brilhante que amplia seu tom colorido e ilumina o rótulo por trás ao passar o mouse.
Anaglyph wobble button
2625Anaglyph wobble buttonBotõesUm botão que fica pendurado em um movimento 3D lento e, quando pairado ou focado, lança duplicatas quentes e frias de si mesmo fora de registro com uma oscilação excessiva.
Annotated anatomy button
2518Annotated anatomy buttonBotõesUm botão que se explica: ao passar o mouse, aparecem marcas de medição e linhas de chamada nomeando seu preenchimento, preenchimento, raio do canto e slot do ícone.

Campos de entrada

104

Campos, códigos, seletores e interruptores com estados claros.

Ver todos
Addon Input Group
2297Addon Input GroupCampos de entradaUm campo de texto envolto em um shell com borda que pode conter um ícone inicial, um botão final ou texto e compartilha um anel de foco em todo o grupo.
Appointment Range Card
2108Appointment Range CardCampos de entradaUm cartão que combina uma grade de data de um único mês com um campo de hora de início e de término abaixo dela, para escolher um dia mais uma janela de tempo em um bloco compacto.
Appointment Scheduler Card
2109Appointment Scheduler CardCampos de entradaUm seletor de data único emoldurado dentro de um cartão intitulado com um botão pular para hoje no canto, projetado para agendar um compromisso.
Auto Grow Textarea
2792Auto Grow TextareaCampos de entradaUm campo de texto de várias linhas que fica mais alto à medida que a pessoa digita mais, em vez de rolar dentro de uma caixa fixa.

Fundos

95

Telas de ponta a ponta, campos e manchas de cor atrás do conteúdo.

Ver todos
Assistant Ripple Glow
1665Assistant Ripple GlowFundosUma ondulação em forma de anel se espalha sobre uma duplicata do próprio conteúdo de um painel enquanto sua borda acende enquanto uma tarefa está em execução.
Aurora band glow
2110Aurora band glowFundosUma faixa suave de luz atravessando uma moldura escura, sua borda vagando em camadas de ruído enquanto a cor caminha ao longo de sua extensão.
Aurora curtain
1666Aurora curtainFundosUma suave cortina de luz pendurada na borda superior, sua bainha inferior subindo e descendo em uma lenta onda de ruído enquanto sua cor muda ao longo da largura.
Aurora veil
1526Aurora veilFundosUm fundo sem margens de três faixas de luz flutuantes que se somam onde se cruzam, sobre um fundo escuro, com uma camada de legenda que permanece legível.

Efeitos de texto

87

Palavras que aparecem, se embaralham, contam ou fluem.

Ver todos
Ascii Art Heading
2301Ascii Art HeadingEfeitos de textoUma palavra grande é representada como um mosaico de caracteres monoespaçados cuja densidade imita o formato das letras, ondulando suavemente e inclinando-se em direção ao ponteiro.
Aurora glow heading
1915Aurora glow headingEfeitos de textoUm título onde uma palavra carrega um preenchimento gradiente multicolorido e lento recortado em suas letras, como a luz de uma aurora brilhando atrás do tipo.
Binary Decode Text
1921Binary Decode TextEfeitos de textoCada letra pisca brevemente em um dígito binário brilhante antes de ser decodificada novamente em seu caractere real, percorrendo a palavra da esquerda para a direita.
Blur in word reveal
2307Blur in word revealEfeitos de textoAs palavras em uma frase passam de um borrão suave para um foco nítido, uma após a outra, à medida que a frase aparece.

Gráficos

83

Linhas, áreas, barras e anéis desenhados em SVG, sem biblioteca de gráficos.

Ver todos
Activity cell heatmap
1840Activity cell heatmapGráficosUma grade de calendário com pequenos quadrados coloridos que se estende em uma onda diagonal e permite que uma faixa de nível isole uma intensidade de cada vez.
Animated Time Axis
2104Animated Time AxisGráficosUma linha de rótulos de data abaixo de um gráfico de linhas que seleciona automaticamente um subconjunto com espaçamento uniforme para evitar aglomeração e esmaece os rótulos perto do ponto pairado.
Animated Value Axis
2097Animated Value AxisGráficosUma coluna de rótulos de valores ao lado de um gráfico que abrevia números grandes e desliza suavemente para novas posições sempre que o intervalo de dados do gráfico muda.
Area chart lite
1525Area chart liteGráficosUm gráfico de área SVG responsivo com marcas de eixo redondo, um preenchimento gradiente, uma cruz que lê a amostra sob o ponteiro e uma limpeza de desenho.

Ícones

82

Glifos animados e indicadores de carregamento desenhados à mão.

Ver todos
Accessibility icon
1585Accessibility iconÍconesUma figura em pé, com braços abertos e postura ampla que respira com pulso lento.
Activity icon
1612Activity iconÍconesUm traço de sinais vitais que se desenha da esquerda para a direita ao longo de uma linha plana, aumenta uma vez e depois se achata novamente.
Airplay icon
1586Airplay iconÍconesUma tela com uma lacuna na borda inferior e um triângulo abaixo que desliza para baixo e para trás, exibindo a imagem.
Alarm clock icon
1613Alarm clock iconÍconesUm despertador de campainha dupla que vibra enquanto os ponteiros ficam meio segundo atrás da caixa.
Abrir o índice completo

Como os componentes são verificados

Trinta sinais

Cada componente e página são avaliados segundo hábitos que fazem um design parecer gerado automaticamente. As pontuações correspondem às regras do orientações e o analisador.

  1. 01Degradês estridentes
  2. 02Ícones Lucide
  3. 03Fundos brancos puros
  4. 04Cores de arco-íris
  5. 05Sombras excessivas
  6. 06Três cartões de recursos em uma linha
  7. 07Emojis como interface
  8. 08Vidro líquido e glassmorfismo
  9. 09Travessões por toda parte
  10. 10Inter, Geist ou Space Grotesk
  11. 11Faixas de seções coloridas
  12. 12Depoimentos falsosFalha crítica
  13. 13Grades bento
  14. 14Janelas falsas de terminal
  15. 15Frases “Não é X, é Y”
  16. 16Marcadores de lista com marcas de verificação
  17. 17Três planos de preços
  18. 18Nenhuma demonstração real do produtoFalha crítica
  19. 19O mesmo arredondamento em todos os elementos
  20. 20Roxo e preto
  21. 21Esqueletos de carregamento
  22. 22Orbes radiais
  23. 23Fundos com grade de pontos
  24. 24Ícones de brilho ao lado de recursos de IA
  25. 25Setas animadas
  26. 26Termos ou política de privacidade ausentesFalha crítica
  27. 27Animações ao passar o ponteiro em tudo
  28. 28Cores neon
  29. 29Paletas pastel básicas
  30. 30Selo arredondado acima do título

Para agentes de programação

Escolha. Seu agente implementa.

Seu agente pode construir quase tudo; escolher a aparência é a parte difícil. Explore o catálogo, escolha visualmente e informe ao agente o número da ficha. Pelo MCP do Fieldbook, ele obtém o componente, suas propriedades e suas versões nos cinco frameworks. A configuração está em a documentação do MCP.

Codex · Terminal

codex mcp add fieldbook --url https://fieldbook.lizardi.mx/api/mcp --bearer-token-env-var FIELDBOOK_TOKEN

Seu projeto precisa de mais que uma biblioteca?

Trabalhe com a Lizardi Studio