UI Kit
JOYCO branded UI components, fonts, and theme values.
npx shadcn add @joyco/uiButton
npx shadcn add @joyco/buttonVariants
Sizes
sm
default
lg
icon
icon-sm
With Icons
Badge
npx shadcn add @joyco/badgeDefaultSecondaryMutedAccentOutlineDestructiveKey
Input
npx shadcn add @joyco/inputdefault
disabled
invalid
Textarea
npx shadcn add @joyco/textareaSelect
npx shadcn add @joyco/selectTabs
npx shadcn add @joyco/tabsOverview content goes here.
Switch
npx shadcn add @joyco/switchdefault
checked
sm
disabled
Slider
npx shadcn add @joyco/slidersingle
range
Card
npx shadcn add @joyco/cardProject Setup
Configure your project settings and preferences.
Avatar
npx shadcn add @joyco/avatarwith imageCN
fallbackJC
largeMP
Tooltip
npx shadcn add @joyco/tooltipPopover
npx shadcn add @joyco/popoverDropdown Menu
npx shadcn add @joyco/dropdown-menuCollapsible
npx shadcn add @joyco/collapsibleKbd
npx shadcn add @joyco/kbd⌘K⌘⇧PEnterEsc
Input Group
npx shadcn add @joyco/input-groupwith icon addon
with button addon
Button Group
npx shadcn add @joyco/button-groupicon buttons
text buttons
Separator
npx shadcn add @joyco/separatorhorizontal
brackets
vertical
Item AItem BItem C
Typography
Public Sans (sans)
The quick brown fox
jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
The five boxing wizards jump quickly. Pack my box with five dozen liquor jugs.
Regular · Medium · Semibold · Bold
Roboto Mono (mono)
The quick brown fox
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
const result = await fetch('/api/data')
console.log('Hello, World!')
Tabular Nums
1,234.5612,345.67123,456.78
Theme
Semantic Colors
background
foreground
card
card-foreground
popover
popover-foreground
primary
primary-foreground
secondary
secondary-foreground
muted
muted-foreground
accent
accent-foreground
destructive
border
input
ring
Chart Colors
chart-1
chart-2
chart-3
chart-4
chart-5
Brand Colors
joyco-blue
mustard-yellow
mint-green