Cómo usarlos
BetaPáginas enteras armadas solo con componentes de Polen, para arrancar una pantalla desde algo que ya funciona y ver cómo se combinan las piezas.
Un template es una página completa, no un componente: el login, el panel de inicio, un listado, la configuración de la cuenta, un checkout. Está armado únicamente con componentes del registry y con los tokens, así que lo que copies se ve igual que acá, en light y en dark, y responde a los mismos breakpoints.
Los cinco templates
| Template | Para qué | Qué muestra |
|---|---|---|
| Login | Entrar a la app | Validación al enviar, error de servidor, contraseña visible, acceso alternativo. |
| Dashboard | La primera pantalla después de entrar | Shell con Navbar + Sidebar, resumen en cards, tabla con pestañas, avisos. |
| Listado | Buscar y elegir entre muchos ítems | Búsqueda, filtros, lista o grilla, orden, paginación, vacío, detalle en Drawer. |
| Configuración | Editar el perfil y las preferencias | Pestañas con guardado propio, campos deshabilitados con motivo, borrado con confirmación. |
| Checkout | Un flujo con pago | Stepper, método de pago condicional, resumen pegado, confirmación y estado final. |
Cómo se usan
- Para diseño. Son la referencia de cómo se compone una pantalla con el sistema: qué shell, qué jerarquía de acciones, qué estados hay que diseñar (vacío, error, cargando, confirmación). Si una pantalla nueva se parece a uno de estos, partí de ahí.
- Para código. Cada página se instala con un comando y aterriza en
app/<nombre>/page.tsxcon los imports apuntando acomponents/ds/; shadcn trae los componentes que use. Después reemplazás los datos de ejemplo por tu API. - El preview es la página real en un iframe. Cambiá el ancho (escritorio, tablet, móvil) o abrila en una pestaña nueva para probarla con teclado y lector de pantalla.
Reglas que siguen
- Un
h1por página, breadcrumb arriba y una sola acción primaria por pantalla; el resto va enstroke,tonalotext. - El mismo shell. Navbar arriba; Sidebar desde 768 px y, por debajo, la
misma navegación en el Drawer que abre ☰. Footer
compactdonde hay poco que mostrar. - Estados resueltos. Cada template muestra al menos un estado no feliz: errores de formulario, listado vacío, acción destructiva, pago pendiente.
- Datos de ejemplo coherentes. Todos hablan de Campus, una app de una universidad, en voseo. Cambialos, pero mantené el tono de Contenido.
- Accesibles de entrada. Pasan por axe en los tests, se navegan con teclado y cada ícono-botón tiene nombre.