Ir al contenido

Framework

Next.js TanStack Start Astro Vike

Estilo

Tema

Idioma

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

Los 56 componentes.

Todos los componentes de la biblioteca, presentados con el estilo aprobado. La anatomía sigue los patrones de la plataforma: etiquetas sobre los controles, controles de 36–38px de alto, anillos de foco de 3px y un mismo azul para selección y acción.

Buscar componentes

Todos

T0

T1

T2

Filtrar por categoría

Todos56

Distribución5

Presentación de datos7

Gráficos2

Botones4

Entradas13

Capas superpuestas7

Menús2

Avisos4

Formularios6

Typography1

Se muestran 56 de 56 componentes

ButtonT0Botón de acción con variantes y tamaños, incluida una opción de solo ícono.

Nombre

InputT0Campo de texto de una línea basado en el elemento input nativo.

Notas

TextareaT0Campo de texto de varias líneas que crece con su contenido.

Aceptar los términos

CheckboxT0Casilla de verificación basada en el input nativo de tipo checkbox.

Gratis

Pro

Radio groupT0Grupo de botones de opción nativos con foco de teclado móvil.

Notificaciones por correoRecibe novedades sobre tu espacio de trabajo.

SwitchT0Control que activa o desactiva una configuración.

Negrita

ToggleT0Botón que alterna entre los estados presionado y no presionado.

L

C

R

Toggle groupT0Grupo de botones de alternancia con selección única o múltiple y foco móvil.

Volumen60%

SliderT0Control deslizante para elegir un valor o un rango entre dos límites.

T0Diálogo modal basado en el elemento dialog nativo.

T0Superficie de ventana emergente anclada a su activador.

Texto de ayuda para teclado y cursor.

T1Información emergente que aparece tras una breve espera al pasar el puntero o recibir el foco.

Espacio de trabajo

Abrir proyectoNueva ventana⌘O

Mostrar barra de herramientas

Copiar enlace

T2Menú de acciones con elementos enriquecidos, opciones y submenús que se abre antes de la hidratación.

Resumen

Ingresos mensualesActualizado ahora mismo

$12,480

Actividad

Actividad reciente12 eventos nuevos esta semana

Ajustes

Ajustes del espacio de trabajoGestiona miembros y preferencias

TabsT0Paneles con pestañas y navegación con teclado entre ellas.

Envío

Se envía en 2–3 días.

Devoluciones

Plazo de 30 días.

AccordionT0Conjunto de secciones plegables basadas en elementos details nativos.

ToastT1Cola de notificaciones breves.

Plan

SelectT0Envoltura del elemento select nativo.

ReactUI

React

UI

TypeScript

Accesibilidad

ComboboxT2Cuadro combinado ARIA con filtrado y uno o varios valores.

SpinnerT0Indicador animado de estado de carga.

SkeletonT0Formas que sirven como marcador de posición mientras se carga el contenido.

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 preferencesCorreo electrónicoText 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

Contenido del panel

CollapsibleT0Región que el usuario puede mostrar u ocultar.

T0Ruta de enlaces desde la raíz del sitio hasta la página actual.

PaginationT0Enlaces o botones para navegar entre páginas de resultados.

Nombre	Rol
Alicia	Admin
Bob	Editor

TableT0Tabla nativa con un adaptador interactivo 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 velas OHLC renderizado solo con CSS.

Ingresos anuales

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 líneas adaptable renderizado solo con CSS.

T0Diálogo que pide al usuario confirmar o cancelar una acción.

Aquí aparecen más detalles.

T1Tarjeta de vista previa que se abre al pasar el puntero.

T1Grupo de controles con una sola parada de tabulación y navegación mediante flechas.

DrawerT0Panel que entra deslizándose desde un borde de la pantalla.

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.

HeaderT0Encabezado nativo del sitio con mejora opcional para el desplazamiento.

Introducción

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.

Ejemplos

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 contentsT2Navegación compacta por encabezados con ampliación al pasar el puntero y seguimiento del desplazamiento.

Zona de clic derecho

Copiar

Pegar

T2Menú que se abre con un clic derecho.

Virtual scrollT2Lista virtualizada — 10 mil filas, ~25 nodos del DOM.

Number fieldT1Campo numérico con controles de incremento y decremento.

OTP inputT2Campo para códigos de un solo uso, con una casilla por carácter.

Día

Semana

Mes

Segmented controlT0Fila de segmentos para elegir una sola opción.

RatingT0Control para elegir una calificación en una fila de estrellas.

Subir archivos

Suelta los archivos aquí

File uploadT1Zona para soltar archivos + lista de archivos.

Color de marca

Color pickerT1Campo de color basado en el selector de color nativo.

Correo electrónico

FieldT0Envoltura de etiqueta, control y error.

Nombre

FormT0Formulario con comportamiento de validación.

NOTAS DE CAMPO01 / 03

FUNDAMENTOS

Créalo una vez. Úsalo en todas partes.

Bloques de construcción accesibles que encajan en cualquier producto.

SISTEMAS DE DISEÑOCOMPONENTES UIIFY

NOTAS DE CAMPO02 / 03

COMPOSICIÓN

Interfaces que escalan.

Patrones claros, compuestos con piezas pequeñas y fiables.

SISTEMAS DE DISEÑOCOMPONENTES UIIFY

NOTAS DE CAMPO03 / 03

ACCESIBILIDAD

Listo desde el primer renderizado.

Interfaces útiles y operables con teclado antes de que cargue JavaScript.

SISTEMAS DE DISEÑOCOMPONENTES UIIFY

CarouselT2Carrusel de diapositivas con gestos táctiles y controles anterior y siguiente.