Portal and demo

Explore the portal and Vue demo

The design-system portal is the human entry point. It replaces the former long homepage; the complete specification remains a secondary reference with state matrices and detailed rules.

Where to go

Destination	Use it for
Foundations	Identity, typography, spacing, surfaces and interaction rules
Components	Component anatomy, variants, APIs, maintained examples and consumption routes
Patterns	Composed workflows such as validation and recovery
Tokens	Explore roles and their declared usage
Implement	Package, copy and mapping orientation
Agents	Select components and prepare a command/task kit
Tools	Workbench, forms, Figma bridge and other inspection tools
Ports	Declared host capabilities and honest support status
Releases	Release-oriented discovery and comparison

Global command search uses the packaged command palette. Search for a destination or component, navigate the results with the keyboard, and select it. The search field fills the dialog below its label. Essential specification prose remains available without JavaScript; interactive demos and tools document their own JavaScript needs.

Vue 3 JavaScript application

Open the Vue demo. Its 31 navigation destinations include:

• Dashboards: analytics, CRM, commerce, academy and logistics.
• Records: products, orders, customers, users and invoices.
• Applications: email, chat, calendar and Kanban.
• Forms/system: basic and advanced forms, wizard, uploads, builder, charts, developer views and the component gallery.
• Pages: profile, settings, permissions, sign-in, recovery, pricing, help and error views.

The demo uses official components and a synthetic data set. It illustrates composition, navigation, forms, selection and local interactions. Save actions, accounts, messages and permissions are simulations; they are not a production backend, identity service or authorization policy. Reset restores demo state. Supply real business behavior in your application.

Use the demo to understand layouts and interactions, then obtain maintained code from the package or copy bundles. Do not scrape rendered HTML to reconstruct components or copy private/commercial reference-template source. The demo is independently authored.

Run the demo from a pinned checkout

With Git and Node 24 installed:

git clone --branch v1.1.0 --depth 1 https://github.com/j3w1/theme.git j3w1-theme-example
cd j3w1-theme-example
npm ci
npm run ui:build
npm run dev --workspace @j3w1/demo

Open the local URL printed by Vite, respecting its /theme/demo/ base. The workspace preparation step is part of that dev script. For a normal consumer app you only need the released package/copies; cloning the complete theme repository is optional.

Sources: demo package, navigation, architecture.