Home

Use j3w1/theme in your application

True Black / Rose: true-black canvas, warm-dark panels, rose text, red interaction, square geometry and monospace typography. j3w1/theme supplies the design contract and an official reusable web implementation, @j3w1/ui.

This handbook targets v1.1.0. It is for developers, designers and agents integrating the theme into their own applications. The pinned repository owns the rules and values; this wiki explains how to use them.

Start here

Your task	Guide
Install and render your first component	Quick start
Build a Vue 3 JavaScript application	Vue integration
Have an agent build a screen using j3w1 components	Agent integration and copyable prompts
Choose package imports or complete source ownership	Package and copy workflows
Find a component, API, maintained example or composition	Components
Integrate with HTML, React, Astro or an existing design framework	Web integration
Theme existing selects, dates and other form controls	Themed controls and Forms
Adapt layout, typography or token usage	Tokens and customization
Explore the portal and complete Vue application	Portal and demo
Upgrade or verify an artifact	Versioning and Verification
Theme an editor, terminal or native application	Ports
Work with Figma Variables	Figma bridge
Resolve integration problems	Troubleshooting
Understand reuse and attribution	Licensing

Install the published package archive

From an existing npm application using Node 24 or newer:

npm install --save-exact https://github.com/j3w1/theme/releases/download/v1.1.0/j3w1-ui-1.1.0.tgz
npx --no-install j3w1-ui kit --components text-field,button,dialog --mode copy --framework vue --out ./j3w1-kit

The first command installs the release archive. The second produces a selected component kit; it does not create an entire Vue application. Use Quick start for rendering instructions and digest verification. npm registry publication is separate: these instructions work without assuming this version exists on npm.

What you get

• 67 consumable inventory entries: controls, navigation, data display, feedback, overlays, developer views and compositions.
• Modular ESM registration and class imports, typed APIs, component styles and maintained examples.
• Complete copy bundles including runtime dependencies, CSS, tokens and notices.
• An independently authored Vue 3 JavaScript demo with 31 destinations and resettable synthetic data.
• Compact, pinned machine contracts and task kits so agents do not need to scrape documentation pages.
• True Black / Rose as the permanent approved default, themed choices/date/time editors, red charts and links, and distinct text hierarchy.

Browse the product

Design-system portal · Vue demo · Component catalogue · Agent kit picker · Complete specification · v1.1.0 release and evidence

The portal replaces the old long homepage. The complete specification remains at /theme/reference/. GitHub Pages hosts both the portal and demo; applications consuming the package do not need that website at runtime.

Keep these distinctions clear

tokens/ and spec/ define the design. @j3w1/ui implements it. Your application owns its data, persistence, authentication, authorization and domain validation. A functioning demo is not a backend. A component implementation or automated test pass is not an accessibility certification for your application.

Use the approved default profile, preserve pending-decision disclosures, and pin one release for code and contracts. Start with Concepts if these terms are new.

Sources: release manifest, consumption guide, agent protocol.