forge.ui · v0.4.2

Ship polished React components
you own.

Configure visually. Copy once. Keep the code.

Forge UI gives you production-ready React components with editable props, CSS included, and no package lock-in. Generate the component, drop it into your app, and customise it like any other file.

terminal
$npx @forgelabs-studio/ui add button
ForgeButton.tsx
ForgeButton.css
import { ForgeButton } from '@/components/forge/ForgeButton'
ForgeButton·ForgeCard·ForgeInput·ForgeBadge·ForgeToggle·ForgeSelect·ForgeSlider·ForgeSpinner·ForgeMorphBlob·ForgeCountUp·ForgeToast·ForgeModal·ForgeAccordion·ForgeStepper·ForgeTable·ForgeBarChart·ForgeLineChart·ForgeDonut·ForgeButton·ForgeCard·ForgeInput·ForgeBadge·ForgeToggle·ForgeSelect·ForgeSlider·ForgeSpinner·ForgeMorphBlob·ForgeCountUp·ForgeToast·ForgeModal·ForgeAccordion·ForgeStepper·ForgeTable·ForgeBarChart·ForgeLineChart·ForgeDonut·

Configure every component visually,
then install it with one command.

Interact with the components below.

ForgeButton · interactive
ForgeMorphBlob · HOLD
hold to morph
ForgeSpinner · LOADING
loading state
ForgeSlider · BORDER RADIUS
border radius · px50
ForgeCountUp
0
components
0
MIT licence
0
zero runtime

Configure it visually.
Then make it yours.

No dependencies. No abstractions. Just components you control.

1
01 configure visually
Pick a component, tweak the props, and preview every change live in the playground.
2
02 copy one command
Copy the generated npx command when it feels right. One line adds everything you need.
3
03 own the code
The component and CSS live in your repo. No runtime package, no lock-in — just your code.
configurestep 01
// Open the playground
// Configure any component visually — no code needed.

Everything you need to build polished interfaces.

NameRoleStatusJoined
Alice ChenEngineerActiveJan 2024
Ben MarlowDesignerActiveMar 2024
Clara StonePMPendingJun 2024
40
components by group
13 of 9
preferences
Spectrum aware