Inicio / Componentes

Showcase de Componentes

Visualización interactiva de todos los componentes UI de Particoolar. Cambia el tema de color y el modo claro/oscuro para ver cómo se adaptan.

Tema
Color
Color base:
Tema: orange / light

colorsColor Palette

Variables CSS del sistema de diseño. Cambian automáticamente con el tema de color y modo claro/oscuro.

background
foreground
primary
primary-fg
secondary
muted
accent
destructive
card
border
input
ring
chart-1
chart-2
chart-3
chart-4

typographyTypography

Heading 4xl Black

Heading 3xl Bold

Heading 2xl Semibold

Text xl Medium

Text base — La plataforma colaborativa donde estudiantes se enseñan unos a otros.

Text sm muted — Clases personalizadas, apuntes descargables y cursos completos.

Text xs muted — Todos los derechos reservados.

font-mono code snippet

buttonButton

Variant
Size
State
Loading

badgeBadge

VariantDefaultSecondaryOutlineDestructiveGhost

cardCard

Tarjeta básica
Usa las variables --card y --card-foreground.

Contenido de la tarjeta. Puede incluir cualquier elemento HTML o componente de React.

Clase de Matemáticas
Prof. Ana García · 12 sesiones
NivelIntermedio
Precio8 € / h
Valoración★ 4.9

accordionAccordion

tabsTabs

Variant: default (horizontal)

Explora clases impartidas por otros estudiantes. Filtra por materia, nivel y precio.

Variant: line

Contenido del perfil.

selectSelect

sliderSlider

40 €/h
0 €50 €
20 € – 75

labelLabel

combinedEjemplo combinado

Buscar clases
Encuentra la clase perfecta para ti
BásicoIntermedioAvanzado