FORGE
.ui
FORGE.ui
FORGE.motion
How it works
Docs
v0.4.2 · 40 components
⬡ npx init
⌘ Copy command
Primitives
14
⬛
ForgeButton
▭
ForgeCard
▱
ForgeInput
◉
ForgeBadge
⬭
ForgeToggle
▾
ForgeSelect
☑
ForgeCheckbox
◎
ForgeRadio
⊣
ForgeSlider
▤
ForgeTextarea
◎
ForgeAvatar
▣
ForgeStatCard
⊕
ForgeTagInput
◫
ForgeDatePicker
Motion
5
⟳
ForgeSpinner
↑
ForgeFadeUp
⇄
ForgeTicker
◐
ForgeMorphBlob
⓪
ForgeCountUp
Charts
5
▦
ForgeBarChart
╱
ForgeLineChart
◯
ForgeDonut
▬
ForgeProgress
╱
ForgeSparkline
Navigation
6
⌘
ForgeCommand
▬
ForgeNavbar
›
ForgeBreadcrumb
⊡
ForgePagination
◧
ForgeSideNav
⊟
ForgeTabs
Overlay
5
◨
ForgeModal
◫
ForgeToast
◳
ForgeTooltip
▾
ForgeDropdown
◁
ForgeDrawer
Feedback
4
▒
ForgeSkeleton
⚠
ForgeAlert
⊕
ForgeStepper
☰
ForgeAccordion
Data
1
⊞
ForgeTable
Preview
Grid
Dots
Dark
ForgeButton
Live
Hover · click · interact
Install command — updates as you customise
⬡ npx @forgelabs-studio/ui init
⌘ Copy command
$
npx @forgelabs-studio/ui
add
button
→
writes ForgeButton.tsx + ForgeButton.css → components/forge/
import { ForgeButton } from '@/components/forge/ForgeButton'
Properties
Button
↺ Reset
Global tokens
Font family
Inter
DM Sans
Geist
Manrope
Plus Jakarta Sans
Space Grotesk
Sora
system-ui
Text colour
Radius scale
sharp
default
rounded
Preview
Grid
Dots
Dark
ForgeButton
Live
Hover · click · interact
Install command — updates as you customise
⬡ npx @forgelabs-studio/ui init
⌘ Copy command
$
npx @forgelabs-studio/ui
add
button
→
writes ForgeButton.tsx + ForgeButton.css → components/forge/
import { ForgeButton } from '@/components/forge/ForgeButton'
Components
Preview
Props
Content
Label
Icon
×
→
↗
↑
★
⚡
♥
◆
●
✦
Variant
glow
solid
ghost
outline
soft
spectrum
Colour
Size
Size preset
sm
md
lg
xl
Font size
13px
Font weight
300
400
500
Border radius
8px
Padding X
20px
Padding Y
10px
Typography
Letter spacing
Tight
Default
Normal
Wide
Wider
Uppercase
Off
On
Interaction
Hover effect
lift
scale
glow
none
Click animation
ripple
scale
bounce
none
Shadow
glow
soft
hard
none
States
Full width
Off
On
Disabled
Off
On