How washingtonalvesviana/lexui-design-system works
LexUI is a reusable React design system for Next.js and Vite, with a CLI for adopting and checking its conventions. The principal workflow is for a developer to initialize a consumer project, then build an interface using LexUI foundations and component packages; charts and flow diagrams are optional capabilities. The SaaS demo shows how those pieces can support authentication, operational views, and design-system browsing. The README documents tokens and CLI capabilities beyond the sampled source, so those links reflect documentation; unsampled demo wiring is not inferred.
Main entry points: layout.tsx SaaS demo shell · index.ts React components · index.mjs LexUI CLI · page.tsx Metrics dashboard
Components 15
Project adoption
- LexUI CLI
packages/cli/src/index.mjs
Design foundations
- Tokens and themes
packages/tokens
UI capabilities
- React components
packages/react/src/index.ts - Accessible charts
packages/charts/src/index.tsx - Flow diagrams
packages/flow/src/index.tsx
SaaS reference
- SaaS demo shell
apps/demo-saas/app/(product)/layout.tsx - Sign-in and MFA
apps/demo-saas/app/(auth)/login/page.tsx - Metrics dashboard
apps/demo-saas/app/(product)/dashboard/page.tsx - Projects and calendar
apps/demo-saas/app/(product)/projects/page.tsx - Activity and chat
apps/demo-saas/app/(product)/activity/page.tsx - Account management
apps/demo-saas/app/(product)/settings/page.tsx - Design-system catalog
apps/demo-saas/app/(product)/design-system/page.tsx - Interactive examples
apps/demo-saas/components/design-system/component-example.tsx
Other components
- Developer
- Consumer project
Connections 17
- Developer → LexUI CLI: runs commands
- LexUI CLI → Consumer project: scaffolds and checks
- Developer → Consumer project: builds interface
- Consumer project → Tokens and themes: uses themes
- Consumer project → React components: imports components
- Consumer project → Accessible charts: optionally imports
- Consumer project → Flow diagrams: optionally imports
- SaaS demo shell → Sign-in and MFA: hosts routes
- SaaS demo shell → Metrics dashboard: hosts routes
- SaaS demo shell → Projects and calendar: hosts routes
- SaaS demo shell → Activity and chat: hosts routes
- SaaS demo shell → Account management: hosts routes
- SaaS demo shell → Design-system catalog: hosts routes
- Metrics dashboard → Accessible charts: renders charts
- Projects and calendar → React components: uses components
- Design-system catalog → Interactive examples: shows examples
- Interactive examples → React components: renders components