Xtyle

Todos os Componentes 64

Biblioteca completa de componentes UI para construir interfaces modernas e acessíveis.

Ações

6 componentes

Button

Botões para ações primárias e secundárias com múltiplas variantes.

Dropdown

Menu suspenso que revela opções ao clicar.
Scrollable content area...

FAB / Speed Dial

Botão de ação flutuante com opções expandidas.

Modal

Diálogo modal para confirmações e formulários.

Swap

Alternância animada entre dois estados.

Theme Controller

Controle de temas claro/escuro.

Exibição de Dados

19 componentes
Click to expand

Accordion content here.

Accordion

Painéis expansíveis para organizar conteúdo.
Avatar
AB

Avatar

Representação visual de usuários ou entidades.
Primary Secondary Outline

Badge

Indicadores e etiquetas pequenas.

Card Title

Card content here.

Card

Container flexível para agrupar conteúdo.
Card 1
Card 2
Card 3

Card Grid

Grid responsivo para exibir múltiplos cards.
Slide 1
Slide 2

Carousel

Exibição rotativa de imagens ou conteúdo.
Hello!
Hi there!

Chat Bubble

Balões de mensagem para interfaces de chat.
Click to open
Click to reveal

Hidden content.

Collapse

Conteúdo expansível com animação.
10h24m59s

Countdown

Contador regressivo animado.

Diff

Comparação visual lado a lado.
Hover Me

Hover 3D Card

Card com efeito 3D no hover.
1 2

Hover Gallery

Galeria interativa com efeitos de hover.
Ctrl + C

Kbd

Representação de teclas do teclado.
  • Item 1
  • Item 2
  • Item 3

List

Lista vertical de itens.
Downloads
31K
Jan 1st - Feb 1st

Stat

Exibição de estatísticas e métricas.
Online Away

Status

Indicador de status com cores.
NameJob
Cy GandertonQuality Control Specialist
Hart HagertyDesktop Support Technician

Table

Tabela para dados tabulares.
CoolAwesomeGreat

Text Rotate

Texto rotativo animado.
  • Step 1
  • Step 2

    • Timeline

    Linha do tempo para eventos.

    Entrada de Dados

    14 componentes

    Calendar

    Seletor de data em formato calendário.

    Checkbox

    Caixa de seleção múltipla.
    Profile Settings

    Options go here

    Fieldset

    Agrupamento de campos relacionados.

    File Input

    Campo para upload de arquivos.

    Filter

    Controles de filtro e ordenação.

    Text Input

    Campo de entrada de texto.

    Label

    Rótulo para campos de formulário.

    Radio

    Botão de seleção única.

    Range Slider

    Controle deslizante para valores.

    Rating

    Sistema de avaliação com estrelas.

    Select

    Menu de seleção dropdown.

    Textarea

    Área de texto multilinha.

    Toggle

    Interruptor liga/desliga.
    Password strength: Strong

    Validator

    Validação visual de campos.

    Feedback

    7 componentes

    Alert

    Mensagens de alerta e notificação.

    Loading

    Indicadores de carregamento.

    Progress

    Barra de progresso linear.
    70%

    Radial Progress

    Indicador de progresso circular.

    Skeleton

    Placeholder de carregamento.
    New message

    Toast

    Notificação temporária.

    Tooltip

    Dica flutuante ao passar o mouse.

    Layout

    6 componentes

    Top

    Bottom

    Divider

    Separador visual horizontal ou vertical.
    Content
  • Item A

    • Drawer Sidebar

    Painel lateral deslizante.
    new
    content

    Indicator

    Posiciona indicadores em elementos.

    Join (Group Items)

    Agrupa elementos visualmente.
    Mask

    Mask

    Aplica máscaras de recorte.
    1
    2
    3

    Stack

    Empilha elementos sobrepostos.

    Mockups

    4 componentes
    example.com
    Browser content

    Browser Mockup

    Moldura de navegador para screenshots.

     
    npm install

    Code Mockup

    Bloco de código estilizado.
    App content

    Phone Mockup

    Moldura de smartphone.
    Window content

    Window Mockup

    Moldura de janela de sistema.