Component Specs

Visual specifications for core components. These define the physical dimensions, spacing, and interactive boundaries that every mukoko component follows.

Global Standards

48px

Minimum touch target

12px

Base border radius

APCA 3.0 AAA

Contrast standard

Component Dimensions

Each component has defined sizes and variants. Install any component via the registry.

buttonradius: 12px

Heights

sm:32pxdefault:36pxlg:44pxicon:36px

Padding

px-3 (sm), px-4 (default), px-6 (lg)

Variants

defaultdestructiveoutlinesecondaryghostlink

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/button

inputradius: 12px

Heights

default:40pxsm:32px

Padding

px-3

Variants

defaulterror

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/input

avatarradius: 9999px

Heights

xs:24pxsm:32pxdefault:40pxlg:48pxxl:64px

Padding

none

Variants

imagefallback

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/avatar

badgeradius: 9999px

Heights

default:22px

Padding

px-2.5 py-0.5

Variants

defaultsecondarydestructiveoutline

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/badge

cardradius: 16px

Heights

auto:0px

Padding

p-6

Variants

defaultaccentedclickable

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/card

toggleradius: 9999px

Heights

default:24px

Padding

none

Variants

onoff

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/toggle

checkboxradius: 4px

Heights

default:20px

Padding

none

Variants

checkeduncheckedindeterminate

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/checkbox

Touch Targets

All interactive elements maintain a minimum 48px touch target for accessibility, even when visually smaller.

24px

32px

36px

48px

Dashed outline shows the 48px minimum hit area for elements smaller than the target.