Los componentes que tu dashboard ya debería tener
58 componentes de React para dashboards e interfaces agénticas, con 20 charts escritos en SVG propio. Un comando y el código queda en tu repositorio: sin runtime de librería, sin overrides de CSS, sin pelearte con la API de nadie.
npx orbitui-cli initnpx orbitui-cli add line-chart composer task-listIngresos
$19.4008.4%
Tráfico por origen
Últimos 30 días
29.100sesiones
- Orgánico43%
- Directo28%
- Social18%
- Email12%
Migración a Orbit UI
2/4- Leer el sistema de tokens actual
packages/tokens/src/theme.css
- Migrar los componentes base
12 primitivas
- Escribir el motor de charts
curva Catmull-Rom
- Generar el registry
Todo el catálogo
58 componentes · 37 ProBase20
- Accordionadd accordion
- Alertadd alert
- Avataradd avatar
- Buttonadd button
- Cardadd card
- Checkboxadd checkbox
- Chipadd chip
- Dialogadd dialog
- Divideradd divider
- Icon Buttonadd icon-button
- Inputadd input
- Menuadd menu
- Popoveradd popover
- Segmented Controladd segmented-control
- Selectadd select
- Skeletonadd skeleton
- Stat Cardadd stat-card
- Switchadd switch
- Tabsadd tabs
- Tooltipadd tooltip
Charts20
- Activity RingsPROadd activity-rings
- Area ChartPROadd area-chart
- Bar ListPROadd bar-list
- Chart CardPROadd chart-card
- Chart CorePROadd chart-core
- Combo ChartPROadd combo-chart
- ContributionsPROadd contributions
- Earnings ChartPROadd earnings-chart
- Funnel ChartPROadd funnel-chart
- Heatmap ChartPROadd heatmap-chart
- Line ChartPROadd line-chart
- Most Active DaysPROadd most-active-days
- Radar ChartPROadd radar-chart
- Radial ChartPROadd radial-chart
- Sankey ChartPROadd sankey-chart
- Scatter ChartPROadd scatter-chart
- Sleep ScorePROadd sleep-score
- SparklinePROadd sparkline
- Stage BarsPROadd stage-bars
- Steps ChartPROadd steps-chart
Blocks10
- Agent LimitsPROadd agent-limits
- Agent ProgressPROadd agent-progress
- Agent ThinkingPROadd agent-thinking
- CalendarPROadd calendar
- ComposerPROadd composer
- Composer AttachmentsPROadd composer-attachments
- Composer PanelPROadd composer-panel
- QuestionnairePROadd questionnaire
- Task ListPROadd task-list
- Web SearchPROadd web-search
Templates7
Utilidades1
La paleta de series
8 colores · OKLCHElegidos con contraste validado contra el fondo de tarjeta en ambos temas, y con distancia perceptual mínima entre series contiguas. Con 20 charts encima, improvisar estos colores se paga caro.
chart-1chart-2chart-3chart-4chart-5chart-6chart-7chart-8
Cómo está construido
- Tokens en dos capas
- Las primitivas viven fuera de
@theme, así que no existe ninguna utilidad de Tailwind que apunte a un valor crudo. La regla la impone la herramienta, no la disciplina. - Dependencias derivadas del AST
- Ningún listado a mano: el registry se genera parseando los imports de cada archivo con el compilador de TypeScript.
- Accesibilidad de base
- Los componentes interactivos se apoyan en React Aria: roles, teclado, foco y anuncios de lector de pantalla vienen resueltos.
- Charts sin librería
- Escalas, curvas, arcos y diagramas de flujo escritos a mano en SVG. Cero kilobytes de dependencias de gráficos.
- Preview abierta, código cerrado
- Los 37 componentes Pro se ven y se usan completos acá. Lo que requiere licencia es el código fuente, que nunca se envía al navegador.
- Reinstalar no pisa tus cambios
- El CLI guarda el hash de cada archivo que escribió. Si lo editaste, te pregunta antes de sobrescribirlo.