The open-source product ecosystem
Build fast with AI. Go further with experts
Figma, React, design tokens and AI skills. One maintained foundation, with the Widelab product team behind it.
- Open source under MIT
- Designed in Figma, built for React
- Skills for Claude Code, Codex and Cursor
Example workspace
Website launch
A shared place for the next release.
One system, from design to release.
After the first prompt
Fast screens. Slow product?
Generate fifty screens without a shared system and you can end up with fifty versions of the same button.
The same UI, rebuilt
Small differences in spacing, states and behavior become daily rework.
Shortcuts that stick
A quick fix becomes a dependency. The next feature has to work around the last one.
The unfinished states
Loading, errors, keyboard navigation and dark mode still need care after the first screen looks right.
Start with a system you can keep building on
How it works
Your next prompt gets a foundation
Connect your agent to a system it can use, then build the interface from a brief.
Connect
Add the Wideset skills and docs to your project. Give your agent guidance on component choice, composition and tokens.
Build
Turn a brief into an interface using React components and shared tokens. Keep the design and code aligned.
Scale
Own the next release. Bring in Widelab when you need product design, engineering or ongoing support.
A prompt. A system. A product interface
Choose a brief to explore a prepared example built with real Wideset components. No live generation.
The brief
Build a billing workspace. Show invoices, payment states and subscription categories. Use Wideset.
The building blocks
Example workspace
Billing workspace
Keep every invoice in view.
A clear state for every payment.
The brief
Build a customer onboarding checklist. Show each step, who owns it and what is done. Use Wideset.
The building blocks
Example workspace
Customer onboarding
Every step with an owner.
Owners and progress, step by step.
The brief
Build a support inbox. Show the customer's question, the reply and its status. Use Wideset.
The building blocks
Example workspace
Support inbox
Every reply with a clear status.
A conversation with a visible state.
The Wideset ecosystem
More than a kit. A shared foundation
Design in Figma. Build in React. Give your agent the same rules. The pieces belong together because they are maintained together.
AI skills
Component APIs, composition rules and token guidance your coding agent can read before it builds.
Read the docsDesign tokens
Shared color, type, spacing and motion. Change the foundation without chasing every screen.
See theming
Built for the work that follows
No accumulated junk
Wideset is curated and maintained in real client work. Useful patterns stay. Your product gets a foundation worth keeping.
Less technical debt
Reuse a component instead of adding another implementation to maintain.
Shared components, fewer loose ends
Consistent by design
Give designers, developers and agents the same vocabulary.
The same tokens in Figma and React
Room to grow
Extend the foundation as your product changes. Keep control of how you ship.
Extend components with shared tokens
Faster future releases
Spend the next release on product work, with a maintained system underneath.
Versioned releases and migration notes
Product possibilities
One system. Different products
Explore example interfaces for the work your product needs to do. Each preview below is composed from Wideset components.
Example workspace
Accounts overview
Track which accounts are ready to use.
A clear state for every account.
Example / Fintech
Finance dashboard
Account status, verification and payroll in one workspace.
Example workspace
Team schedule
A clear handoff between shifts.
Keep the team and the schedule together.
Example / Workforce management
Team scheduling
Shift coverage and handoffs in one shared schedule.
Example workspace
Sales pipeline
Move each conversation forward.
The next step stays visible.
Example / CRM
Sales CRM
Opportunities, next steps and handoffs in a shared pipeline.
Example workspace
Product assistant
Answers with the right context.
A conversation grounded in your product.
Example / AI product
AI assistant console
A conversation with product context, source labels and clear response states.
The people behind the system
A foundation is the start. A team takes you further
Widelab builds and maintains Wideset in real client work. Bring the same team into your product, from the first prototype to the releases that follow.
Customize your product
Make it yours with product design, branding and extensions to the system.
Build your product
Connect the interface to a real product: frontend, backend, architecture and integrations.
Scale your product
Keep improving with engineering, performance, QA and ongoing product support.
Widelab has worked with
- WeWork
- CloudKitchens
- Fitch Ratings
Your next product starts here
Start on your own. Or start with the team behind the system.
Build with Wideset
Give your agent the foundation. Install the package and build on it today.
Build with Widelab
Bring in product designers and engineers to customize, build and support your product.
For React 18 and 19 projects
pnpm add @wlrx/design-system @remixicon/reactimport '@wlrx/design-system/styles'
The package is published to GitHub Packages; the installation guide covers registry access, styles and the optional Tailwind v4 utilities.
Wideset is open source under MIT. Expert support is there when you need it.
Before you start
The practical details: licensing, installation, your stack and the team behind it.
Yes. Wideset is open source under the MIT license. You can use the React components, design tokens and documentation in commercial products.