Para herramientas internas (dashboard, kitchen, futuras) usamos
shadcn/ui
temizado con la marca Seim Seim. Los componentes se instalan localmente en
cada proyecto vía npx shadcn add <nombre> y heredan
colores, fuentes y espaciado al importar theme.css.
Cuándo NO usar shadcn: superficies cara al cliente con personalidad fuerte (event app, site, reservas guest UI). Ahí van los componentes complejos del producto, documentados en su propia sección.
Cómo conectar tu proyecto a la marca
Importa theme.css al principio del CSS principal del proyecto
(típicamente src/index.css o src/styles/global.css):
@import url("https://raw.githubusercontent.com/monoku/seimseim/main/design-system/public/theme.css");Cuando design.seimseim.com esté desplegado, reemplaza la URL por:
@import url("https://design.seimseim.com/theme.css");
Eso es todo. Los componentes shadcn usan variables estándar
(--primary, --background, --ring) que el
theme.css ya cablea a tokens Seim Seim.
Catálogo
Documentamos aquí los componentes que se renderizan estáticamente con HTML + CSS — cada uno con su preview real en una página dedicada. Lista en el sidebar: alert, badge, button, checkbox, input, label, spinner, switch, table, tabs, textarea.
Los componentes interactivos (alert-dialog, calendar, dialog, drawer, popover,
sheet, tooltip) requieren JavaScript para demostrar su comportamiento — se
documentan en
ui.shadcn.com/docs/components.
Cuando se instalan en un proyecto que importa theme.css, heredan
la marca automáticamente igual que los estáticos.
Cómo agregar un componente nuevo
- En tu proyecto, corre
npx shadcn add <nombre>. - Asegúrate de que el
@importdeltheme.cssesté presente en el CSS principal. - Visualízalo y confirma que respeta colores, espaciado y radios de marca. Si no, abre issue.
- Agrega una nueva página en
src/pages/componentes/shadcn/<nombre>.astrovía PR (preview HTML o placeholder + link a docs oficiales) y registra el componente ensrc/lib/sidebar-data.ts.
Mapeo resumido de variables shadcn
| Variable shadcn | Token Seim Seim (light) | Token Seim Seim (dark) |
|---|---|---|
--background | --color-ss-piedra-100 | --color-ss-tinta-900 |
--foreground | --color-ss-tinta-900 | --color-ss-piedra-100 |
--primary | --color-ss-aji-500 | --color-ss-aji-500 |
--primary-foreground | --color-ss-piedra-100 | --color-ss-piedra-100 |
--accent | --color-ss-mantel-500 | --color-ss-mantel-500 |
--ring | --color-ss-mantel-500 | --color-ss-mantel-500 |
--destructive | --color-ss-aji-700 | --color-ss-aji-700 |
Para el mapeo completo, ver
public/theme.css .