Galería de componentes

Tokens y componentes del Tuscalcas Design System aplicados al proyecto.

Volver al inicio

Tokens

Paleta, sombras, tipografía y spectrum de charts del tema tuscalcas (Nokia Pure).

Brand · Tuscalcas Indigo

100

200

300

400

500

600

700

800

900

Color

background

--background

foreground

--foreground

card

--card

primary

--primary

primary-foreground

--primary-foreground

secondary

--secondary

muted

--muted

accent

--accent

border

--border

ring

--ring

sidebar

--sidebar

Estados semánticos

Destructive

--destructive

Success

--success

Warning

--warning

Info

--info

Elevación

shadow-xs

--shadow-xs

shadow-sm

--shadow-sm

shadow-md

--shadow-md

shadow-lg

--shadow-lg

Tipografía

H1 · Inter 700 · 32px

H2 · Inter 600 · 24px

H3 · Inter 600 · 20px

H4 · Inter 600 · 16px

Body · Inter 400 · 16px. Activa text-wrap: pretty para evitar huérfanos al final de párrafos largos y font-feature-settings: kern, liga, calt para kerning y ligaduras nativos.

Body small · Inter 400 · 14px — textos secundarios y descripciones.

Caption · 12px muted-foreground

Atajo:⌘K— en JetBrains Mono

Mono · JetBrains Mono · const radius = 8px

Spectrum (charts)

chart-1

chart-2

chart-3

chart-4

chart-5

Botones

Variantes (incl. gradient, soft, glass, success), tamaños y estados — con feedback táctil al click y loading nativo.

Variantes

Glass (sobre fondo de color)

Tamaños

Estados

Button Group

Botones encadenados con bordes y radii unificados — para barras de acciones, paginadores, split buttons y toolbars.

Confirmación (Cancel / Save)

Toolbar de acciones

Paginador (con separador)

Split button (acción + dropdown)

Con texto / addon

https://

Vertical

Identidad y estado

Badge, Avatar, Skeleton y Separator.

DefaultSecondaryOutlineDestructive

SCOE

Progreso y Slider

Indicadores con estado interactivo.

Progreso60%

Slider42

Formulario

Input, Textarea, Select, Checkbox, Radio y Switch.

Correo electrónico

Rol

Biografía

Checkbox

Acepto los términos

Switch

Notificaciones activas

Radio

Cómodo

Compacto

Mensajes

Alertas con variantes default y destructive.

Listo

Tu configuración se guardó correctamente.

Atención

No se pudo conectar a la base de datos. Reintenta en unos segundos.

Cards

Composición típica de una tarjeta con header, contenido y footer.

Plan Pro

$15/mes · facturado anualmente

Incluye proyectos ilimitados, soporte prioritario y exportaciones avanzadas.

Tabla

Listado tabular básico.

Últimas facturas del mes.
Factura	Estado	Método	Total
INV-001	Pagada	Tarjeta	$250.00
INV-002	Pendiente	PayPal	$150.00
INV-003	Vencida	Transferencia	$350.00
INV-004	Pagada	Tarjeta	$450.00

Pestañas y Acordeón

Navegación tabulada y revelado vertical.

Edita tu nombre, foto y preferencias de visualización.

Overlays

Dialog, Sheet, DropdownMenu y Tooltip.

Notificaciones

Sonner: toasts con variantes.

Date Picker

Calendar dentro de un Popover, con selección simple y de rango.

Block · Calendario de eventos

Block del DS (preview/blocks-calendar.html): calendario mensual con dots por día con evento y legend de categorías.

junio 2026

lu	ma	mi	ju	vi	sá	do

MantenimientosBackups

Combobox

Popover + Command para un selector con búsqueda.

Command Palette

CommandDialog accesible con ⌘K / Ctrl+K.

Toggle y Toggle Group

Botones presionables y grupos para barra de formato.

Activos: bold

Drawer

Panel deslizable desde el borde inferior (vaul).

Input OTP

Entrada de código de un solo uso, con separador.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Faltan 6 dígitos

Input Group

Input con addons en línea (icono, texto, botón).

Hover Card y Popover

Previews de información al pasar el cursor o hacer click.

Context Menu

Menú contextual: haz click derecho dentro del recuadro.

Click derecho aquí

Pagination

Navegación numérica de páginas.

Collapsible y Scroll Area

Mostrar/ocultar contenido y zona con scroll personalizado.

Repositorios destacados

@radix-ui/primitives

@base-ui/react

@tanstack/react-query

@vercel/next.js