Ir para o conteúdo

Framework

Next.js TanStack Start Astro Vike

Estilo

Tema

Idioma

English 简体中文日本語 العربية Русский Español Português (Brasil)

Todos os 56 componentes.

Todos os componentes da biblioteca, apresentados no estilo aprovado. A anatomia segue os padrões da plataforma: rótulos acima dos controles, controles com 36–38px de altura, anéis de foco de 3px e um mesmo azul para seleção e ação.

Buscar componentes

Todos

T0

T1

T2

Filtrar por categoria

Todos56

Layout5

Exibição de dados7

Gráficos2

Botões4

Campos13

Sobreposições7

Menus2

Retorno ao usuário4

Formulários6

Typography1

Mostrando 56 de 56 componentes

ButtonT0Botão de ação com variantes e tamanhos, incluindo opções só com ícone.

Nome

InputT0Campo de texto de uma linha baseado no elemento input nativo.

Notas

TextareaT0Campo de texto de várias linhas que cresce com seu conteúdo.

Aceitar os termos

CheckboxT0Caixa de seleção baseada no input checkbox nativo.

Grátis

Pro

Radio groupT0Grupo de inputs radio nativos com foco móvel por teclado.

Notificações por e-mailReceba novidades sobre o seu espaço de trabalho.

SwitchT0Controle que ativa ou desativa uma configuração.

Negrito

ToggleT0Botão que alterna entre os estados pressionado e não pressionado.

L

C

R

Toggle groupT0Grupo de botões de alternância com seleção única ou múltipla e foco móvel.

Volume60%

SliderT0Controle deslizante para escolher um valor ou um intervalo entre dois limites.

T0Diálogo modal baseado no elemento dialog nativo.

T0Superfície de janela flutuante ancorada ao acionador.

Texto de ajuda para teclado e mouse.

T1Dica que aparece após um breve atraso ao passar o ponteiro ou receber foco.

Espaço de trabalho

Abrir projetoNova janela⌘O

Mostrar barra de ferramentas

Copiar link

T2Menu de ações com itens de conteúdo rico, opções e submenus que abre antes da hidratação.

Visão geral

Receita mensalAtualizado agora há pouco

$12,480

Atividade

Atividade recente12 novos eventos esta semana

Configurações

Configurações do espaço de trabalhoGerencie membros e preferências

TabsT0Painéis com navegação por teclado entre abas.

Entrega

Entrega em 2–3 dias.

Devoluções

Prazo de 30 dias.

AccordionT0Conjunto de seções recolhíveis baseado em elementos details nativos.

ToastT1Fila de notificações temporárias.

Plano

SelectT0Componente que envolve o elemento select nativo.

ReactUI

React

UI

TypeScript

Acessibilidade

ComboboxT2Combobox ARIA de valor único ou múltiplo com filtragem.

SpinnerT0Indicador animado de estado de carregamento.

SkeletonT0Formas usadas como marcadores de posição enquanto o conteúdo carrega.

An amber sun above overlapping blue mountain ridges

Aspect RatioT0A media frame that preserves its width-to-height ratio.

Ready

BadgeT0Short label for a state, category, or count.

Release notes

A short summary of the latest product changes.

Read the release notes

CardT0Content container for headings, text, links, and actions.

Migration progress

ProgressT0Native progress element for determinate or indeterminate work.

Ada Lovelace

AvatarT0Named image or fallback initials for a person.

One check remains.

AlertT0Static message container for persistent inline feedback.

Website

https://

Enter a domain. Add https:// when using the value.

Input GroupT0A labeled native input with an optional prefix, suffix, or related action.

No projects yet

Create a project to organize your work.

EmptyT0A static empty collection message with a heading, explanation, and next step.

ItemT0A list row that pairs leading media and content with metadata and an action.

Start date

Date PickerT0A styled native date input that keeps the browser's picker and validation.

Contact preferencesE-mailText message

FieldsetT0A semantic group of related form controls named by a legend.

Form Error SummaryT0A server-rendered summary linking each error to its field.

Description ListT0A semantic list of terms and their descriptions.

Alternar

Conteúdo do painel

CollapsibleT0Região que o usuário pode exibir ou ocultar.

T0Trilha de links da raiz do site à página atual.

PaginationT0Links ou botões para navegar entre páginas de resultados.

Nome	Função
Alice	Admin
Bob	Editor

TableT0Tabela nativa com adaptador interativo opcional.

BTC / USD

Time	Open	High	Low	Close
2026-01-05	101.8	110.4	99.2	108.7
2026-01-12	109.1	114.8	106.7	112.6
2026-01-19	112.4	119.2	110.3	117.5
2026-01-26	117.8	121.6	113.9	115.2
2026-02-02	115.6	118.7	108.4	110.1
2026-02-09	109.8	112.5	100.6	103.2
2026-02-16	103.6	106.4	94.5	97.8
2026-02-23	98.4	101.1	88.2	91.5
2026-03-02	91.1	96.4	84.9	87
2026-03-09	86.7	90.3	79.5	82.2
2026-03-16	82.8	86.9	74.8	78.4
2026-03-23	78.9	87.5	76.3	85.9
2026-03-30	85.4	94.2	82.6	91.8
2026-04-06	92.1	100.6	89.9	98.7
2026-04-13	98.3	106.9	95.4	103.5
2026-04-20	103.8	111.4	100.7	109.6

Candle chartT0Gráfico estático de candles OHLC renderizado apenas com CSS.

Receita anual

Time	Value
Jan	42
Feb	48
Mar	45
Apr	58
May	62
Jun	59
Jul	71
Aug	78
Sep	74
Oct	86
Nov	91
Dec	98

Line chartT0Gráfico de linhas responsivo renderizado apenas com CSS.

T0Diálogo que pede ao usuário para confirmar ou cancelar uma ação.

Detalhes adicionais aparecem aqui.

T1Cartão com prévia de conteúdo que abre ao passar o ponteiro.

T1Grupo de controles com uma parada de Tab e navegação por setas.

DrawerT0Painel que desliza a partir de uma borda da tela.

Menu

Help New project

Team workspace

A shared view of what you are working on.

12Active projects

4Awaiting review

Workspace overview

Keep your team's projects and recent updates in one place.

Projects

Website refresh · In progress. Design library · Ready for review.

Recent activity

The team updated the roadmap and shared a new design proposal.

Create a project

Start with a name, invite your team, and plan your next milestone.

Workspace help

Find guides for organizing projects and collaborating with your team.

HeaderT0Cabeçalho nativo do site com melhoria opcional de rolagem.

Introdução

A table of contents gives readers a map of a longer article. Open the contents or choose a bar to jump to a section. Scroll this article to follow your position in the rail.

Exemplos

Keep navigation beside the content it describes. Each of the four bars and its matching link points to a real section in this preview, so you can explore without leaving the card.

API

Give each section a unique ID and use that same ID for its link and indicator. Scope scroll tracking to the article’s container when the content sits inside another page.

Estilos

Use CSS to adjust the rail, spacing and panel. The active bar follows the current section. Native heading links continue to work when JavaScript is unavailable.

Table of contentsT2Navegação compacta por títulos com ampliação ao passar o ponteiro e acompanhamento da rolagem.

Área de clique direito

Copiar

Colar

T2Menu que abre com um clique do botão direito.

Virtual scrollT2Lista virtualizada — 10 mil linhas, ~25 nós DOM.

Number fieldT1Campo numérico com botões de incremento e decremento.

OTP inputT2Campo para códigos de uso único, com um espaço por caractere.

Dia

Semana

Mês

Segmented controlT0Linha de segmentos para escolher exatamente uma opção.

RatingT0Campo para escolher uma avaliação em uma linha de estrelas.

Enviar arquivos

Solte os arquivos aqui

File uploadT1Área para soltar arquivos + lista de arquivos.

Cor da marca

Color pickerT1Campo de cor baseado no seletor de cores nativo.

E-mail

FieldT0Estrutura para rótulo, controle e erro.

Nome

FormT0Formulário com comportamento de validação.

NOTAS DE CAMPO01 / 03

FUNDAMENTOS

Crie uma vez. Use em qualquer lugar.

Blocos de construção acessíveis que se encaixam em qualquer produto.

SISTEMAS DE DESIGNCOMPONENTES UIIFY

NOTAS DE CAMPO02 / 03

COMPOSIÇÃO

Interfaces que escalam.

Padrões claros, compostos por peças pequenas e confiáveis.

SISTEMAS DE DESIGNCOMPONENTES UIIFY

NOTAS DE CAMPO03 / 03

ACESSIBILIDADE

Pronto desde a primeira renderização.

Interfaces úteis e prontas para o teclado antes de o JavaScript carregar.

SISTEMAS DE DESIGNCOMPONENTES UIIFY

CarouselT2Carrossel de slides com gestos de toque e controles de anterior e próximo.