03 — UI Components

Component gallery

35 components across 6 tiers. Preview, inspect code, toggle states, switch design systems, and export to CSV. Enterprise data table with 120 rows and 20 columns.

Design Systems · 3 active

Minimal Futurism

35 components · Outfit + Inter + JetBrains Mono

Student Profile Card

Core

Student identity with avatar, grade, balance, and payment stats

Sofía Martínez Reyes

3° Secundaria · Campus Norte

Activo

María Elena Reyes

[email protected]

Inscrito desde Aug 2022

Saldo Pendiente

$18,450

94%

Puntualidad

11/12

Pagados

Pendientes

Invoice / Charge Card

Core

Invoice with CFDI status, amount, due date, and payment method

INV-2024-0312

Colegiatura — Marzo 2024

Pagado

Monto

$8,500

Vencimiento

2024-03-05

A1B2C3D4-E5F6-7890-ABCD-EF1234567890

Payment Terminal

Core

Multi-method payment form: Card, SPEI, and cash reference

Terminal de Pago

Sandbox

Total a Pagar

$8,500.00

Colegiatura — Marzo 2024

Número de tarjeta

Expiración

CVV

Reconciliation Match

Core

Three-level match: Bank transaction vs Platform payment vs CFDI

Conciliación Automática

Match 99.7%

Banco

$8,500

REF-0847-MAR24

2024-03-03

Plataforma

$8,500

PAY-2024-0312

Sofía Martínez Reyes

CFDI

$8,500

A1B2C3D4-E5F6-7890-ABCD-EF1234567890

Timbrado

Confianza del Match99.7%

AI Agent Chat

Core

Conversational AI interface with tool-calling and report generation

Aulā. AI

Online

¿Cuál es la tasa de cobranza de marzo?

Enterprise Data Table

Core

120-row TanStack table: column hiding, filters, sorting, grouping, row selection, CSV export, density modes

120 of 120 rows


TXN-0065	2024-12-29	Regina Vargas V.	Campus Sur	Cuota Extra	$9,200	Card	refunded	cancelled
TXN-0117	2024-12-29	Fernanda López L.	Campus Poniente	Seguro Escolar	$25,000	Domiciliación	completed	stamped
TXN-0069	2024-12-20	Paula López G.	Campus Sur	Transporte	$18,000	Card	refunded	cancelled
TXN-0081	2024-12-20	Mateo Martínez M.	Campus Sur	Evento Especial	$12,000	OXXO	failed	error
TXN-0008	2024-12-17	Santiago Jiménez T.	Campus Centro	Colegiatura	$2,500	Cash	completed	pending
TXN-0073	2024-12-09	Renata Morales V.	Campus Centro	Comedor	$10,000	OXXO	failed	error
TXN-0112	2024-12-07	Sebastián Ortiz S.	Campus Norte	Material Didáctico	$18,000	SPEI	completed	stamped
TXN-0047	2024-11-29	Gabriel Jiménez C.	Campus Norte	Comedor	$3,500	Card	processing	pending
TXN-0054	2024-11-27	Diego García V.	Campus Sur	Transporte	$2,500	Cash	refunded	cancelled
TXN-0061	2024-11-22	Lucía Hernández C.	Campus Norte	Inscripción	$6,800	OXXO	pending	pending
TXN-0028	2024-11-21	Ana Torres F.	Campus Centro	Evento Especial	$12,000	SPEI	pending	pending
TXN-0106	2024-11-20	Mateo Torres R.	Campus Centro	Evento Especial	$25,000	Cash	processing	pending
TXN-0025	2024-11-17	María José Cruz G.	Campus Poniente	Cuota Extra	$18,000	Domiciliación	refunded	cancelled
TXN-0118	2024-11-14	Alejandro Flores G.	Campus Centro	Cuota Extra	$18,000	SPEI	completed	stamped
TXN-0072	2024-11-13	Gabriel Sánchez R.	Campus Poniente	Cuota Extra	$10,000	Cash	pending	pending
TXN-0041	2024-10-30	Daniel Ramírez T.	Campus Poniente	Evento Especial	$15,000	OXXO	refunded	cancelled
TXN-0039	2024-10-23	Nicolás Mendoza R.	Campus Norte	Uniforme	$9,200	Cash	refunded	cancelled
TXN-0111	2024-10-20	Lucía Flores R.	Campus Norte	Transporte	$5,000	Card	failed	error
TXN-0114	2024-10-17	Nicolás Flores S.	Campus Sur	Material Didáctico	$4,200	Cash	refunded	cancelled
TXN-0070	2024-10-16	Andrés Romero T.	Campus Centro	Transporte	$2,500	OXXO	refunded	cancelled
TXN-0014	2024-10-14	Nicolás Martínez M.	Campus Poniente	Actividad Extracurricular	$10,000	OXXO	refunded	cancelled
TXN-0116	2024-10-13	Daniel López O.	Campus Norte	Inscripción	$25,000	Card	processing	pending
TXN-0080	2024-10-11	Valentina Mendoza H.	Campus Poniente	Inscripción	$2,500	Domiciliación	pending	pending
TXN-0093	2024-10-11	Alejandro Ortiz H.	Campus Sur	Material Didáctico	$9,200	Card	processing	pending
TXN-0101	2024-10-11	Sofía Hernández O.	Campus Sur	Seguro Escolar	$9,200	OXXO	failed	error

Rows per page

Page 1 of 5

Data Table (Simple)

Core

Sortable, filterable transaction table with pagination

Transacciones

ID	Fecha	Alumno	Concepto	Monto	Estado
TXN-001	2024-03-15	Sofía Martínez R.	Colegiatura Mar	$8,500	Completado
TXN-002	2024-03-14	Carlos Vega P.	Colegiatura Mar	$8,500	Completado
TXN-003	2024-03-14	Ana López G.	Inscripción	$15,000	Completado
TXN-004	2024-03-13	Diego Ramírez S.	Colegiatura Mar	$8,500	Pendiente
TXN-005	2024-03-12	Valentina Cruz M.	Colegiatura Mar	$8,500	Completado
TXN-006	2024-03-11	Mateo Flores T.	Cuota Extra	$2,500	Fallido

6 transacciones

Portal Switcher

Tier 1

Switch between Management, Backoffice, and Parent portals

Portal

Top App Bar

Tier 1

Global search, notifications, and user profile menu

⌘K

Gerardo T.

Breadcrumbs

Tier 1

Hierarchical navigation trail with truncation

Floating Label Input

Tier 2

Text input with animated floating label and validation

Nombre del Alumno

Correo del Padre

Monto de Colegiatura

Search / Select Dropdown

Tier 2

Searchable dropdown with multi-select and tags

Campus

Date Range Picker

Tier 2

Calendar-based date range selector with presets

Período

01 Mar — 31 Mar 2024

File Upload Zone

Tier 2

Drag-and-drop file upload with progress indicator

Documentos

Arrastra archivos aquí

PDF, XML, XLSX — máx. 10MB

Toggle Switch

Tier 2

Animated toggle with label and description

Facturación automática

Generar CFDI al recibir pago

Notificaciones por email

Avisar a padres de nuevos cargos

Conciliación en tiempo real

Sincronizar con banco cada hora

Toast Notification

Tier 3

Stacked toast notifications with actions

Pago recibido

SPEI de $8,500.00 — Sofía Martínez

CFDI pendiente

3 facturas sin timbrar

Conciliación completa

47 de 48 movimientos conciliados

Slide-out Drawer

Tier 3

Side panel for detail views and forms

Loading State

Tier 3

Skeleton loaders and progress indicators

Revenue Bar Chart

Tier 4

Monthly revenue comparison with drill-down

Ingresos por Mes

Real

Proyectado

Sep

Oct

Nov

Dec

Jan

Feb

Mar

Collection Rate Donut

Tier 4

Animated donut chart with center metric

Tasa de Cobranza

94%Cobrado

Cobrado

92.5%

Pendiente

5.2%

Vencido

2.3%

Activity Timeline

Tier 4

Chronological event feed with icons and timestamps

Actividad Reciente

Pago recibido

Sofía Martínez — Colegiatura Mar $8,500

Hace 5 min

CFDI timbrado

INV-2024-0312 — UUID: A1B2...7890

Hace 5 min

Conciliación automática

Match 99.7% — BNK-78234 ↔ PAY-0312 ↔ INV-0312

Hace 6 min

Pago fallido

Mateo Flores — Cuota Extra $2,500 — Fondos insuficientes

Hace 2 hrs

Reporte generado

Estado de cuenta mensual — Marzo 2024

Hace 3 hrs

Pago recibido

Carlos Vega — Colegiatura Mar $8,500

Hace 4 hrs

Status Badge

Tier 4

Contextual status indicators with dot and label

Pagado

Pendiente

Vencido

Timbrado

Cancelado

En proceso

Progress Bar

Tier 4

Segmented progress with percentage and labels

Colegiaturas95%

95 de 100

Inscripciones78%

78 de 100

Cuotas extras62%

62 de 100

Donativos45%

45 de 100

Hover Border Gradient

Tier 5

Button with animated gradient border on hover

Glowing Effect Container

Tier 5

Card with animated glow effect following cursor

AI Agent

Consulta financiera en lenguaje natural

Tiempo Real

Conciliación automática cada hora

Seguridad

Cifrado end-to-end y RLS

Text Generate Effect

Tier 5

Character-by-character text reveal animation

AutonomousFinanceforEducation

Cada palabra aparece con un efecto de desenfoque y desvanecimiento

Meteors Background

Tier 5

Animated meteor shower background effect

Meteors Effect

Partículas animadas como fondo decorativo

Spotlight Card

Tier 5

Card with spotlight effect following cursor

$2.4M

Recaudado este ciclo

1,247

Alumnos activos

4,892

CFDIs timbrados

Link Preview

Tier 5

Inline link with hover preview card

Portal de Padres

padres.aula.mx

SAT — Verificación CFDI

verificacfdi.facturaelectronica.sat.gob.mx

Documentación API

docs.aula.mx/api/v2

Number Ticker

Tier 5

Animated number counter with easing

$1,576,575

Ingresos

711

Alumnos

2,333

CFDIs

36%

Tasa Cobro

35 of 35 components shown

Minimal Futurism · Enterprise DataTable with 120 rows × 20 columns

All live

Component gallery

Glassmorphic Light

Minimal Futurism

Academic Magic

Minimal Futurism

Student Profile Card

Sofía Martínez Reyes

Invoice / Charge Card

Colegiatura — Marzo 2024

Payment Terminal

Terminal de Pago

Reconciliation Match

Conciliación Automática

AI Agent Chat

Aulā. AI

Enterprise Data Table

Data Table (Simple)

Transacciones

KPI Dashboard Widget

Portal Switcher

Sidebar Navigation

Top App Bar

Breadcrumbs

Page Header

Alumnos

Floating Label Input

Search / Select Dropdown

Date Range Picker

File Upload Zone

Toggle Switch

Toast Notification

Modal Dialog

Slide-out Drawer

Tooltip

Loading State

Revenue Bar Chart

Ingresos por Mes

Collection Rate Donut

Tasa de Cobranza

Activity Timeline

Actividad Reciente

Status Badge

Progress Bar

Hover Border Gradient

Glowing Effect Container

AI Agent

Tiempo Real

Seguridad

Text Generate Effect

Meteors Background

Meteors Effect

Spotlight Card

Link Preview

Number Ticker