How yuki930/kaze-design-system works
Kaze is a React design system for dashboard, application, and marketing interfaces, tuned for Japanese typography and light/dark themes. Its main workflow is for an application developer to import the library’s components and hooks, then compose them into screens; the repository also includes a Next.js showcase with dashboard, app, content, and landing-page examples. The README describes tokens and CSS as the shared foundation, although the CSS source files are not present in the supplied tree. Sampled source confirms component exports and theme behavior; example-page links are documented capabilities, not verified runtime calls.
Main entry points: index.ts Component exports · marketing.ts Marketing components · useTheme.tsx Theme provider · ShowcasePage.tsx Component showcase
Components 16
Design foundation
- Design tokens
src/tokens/tokens.ts
Application UI
- Component exports
src/components/index.ts - Forms and controls
src/components/Input/Input.tsx - Data and charts
src/components/BarChart/BarChart.tsx - Navigation and layout
src/components/Layout/Layout.tsx - Feedback and overlays
src/components/Dialog/Dialog.tsx
Marketing UI
- Marketing components
src/components/marketing.ts
Hooks
- Theme provider
src/hooks/useTheme.tsx - Focus trap
src/hooks/useFocusTrap.ts - Legend toggle
src/hooks/useLegendToggle.tsx
Showcase examples
- Component showcase
src/views/ShowcasePage/ShowcasePage.tsx - Dashboard examples
src/views/dashboards/Dashboard/Dashboard.tsx - App examples
src/views/apps/JobSearchPage/JobSearchPage.tsx - Content examples
src/views/content/BlogPage.tsx - Landing examples
src/views/landing/LandingPage/LandingPage.tsx
Other components
- Application developer
Connections 16
- Application developer → Component exports: imports
- Application developer → Marketing components: imports
- Component exports → Forms and controls: exports
- Component exports → Data and charts: exports
- Component exports → Navigation and layout: exports
- Component exports → Feedback and overlays: exports
- Marketing components → Application developer: imports into app
- Application developer → Theme provider: uses theme
- Theme provider → Design tokens: sets theme attributes
- Application developer → Focus trap: uses hook
- Application developer → Legend toggle: uses hook
- Component showcase → Component exports: composes
- Dashboard examples → Component exports: composes
- App examples → Component exports: composes
- Content examples → Component exports: composes
- Landing examples → Marketing components: composes