Developer Docs

Component Library

Core UI components for the Mallnline design system. All components support light and dark modes.

🎨 Component Showcase

Interact with the core components in the library.

[[Demo:ComponentShowcase]]

🛠️ Design Principles

  • Workspace Integration: Centralized in the ngwenya-packages/ui workspace to ensure single-source-of-truth across ngwenya-front, ngwenya-deck, and ngwenya-tower.
  • Rune-driven: Components use Svelte 5 Runes for state and props.
  • Themeable: All styles use CSS variables sourced from the globally shared @mallnline/ui/styles/tokens.css.
  • Accessible: Semantic HTML and ARIA attributes used where applicable.

📂 File Reference

The core components are now centralized in the @mallnline/ui npm workspace package to share them across the Storefront, Deck, and Tower frontends.

Component Package Path Import Path
Button @mallnline/ui/src/lib/components import { Button } from '@mallnline/ui'
Input @mallnline/ui/src/lib/components import { Input } from '@mallnline/ui'
Modal @mallnline/ui/src/lib/components import { Modal } from '@mallnline/ui'
ErrorBoundary @mallnline/ui/src/lib/components import { ErrorBoundary } from '@mallnline/ui'
Spinner @mallnline/ui/src/lib/components import { Spinner } from '@mallnline/ui'
Skeleton @mallnline/ui/src/lib/components import { Skeleton } from '@mallnline/ui'

NOTE

State-heavy forms like IdentityForm or BlogEditor remain in the application-specific directories (src/lib/components/) since they rely on local SvelteKit $page state and domain specific GraphQL mutations.