Components

UI component library aligned with shadcn/ui patterns and the Five African Minerals palette.

Buttons

All buttons use 12px border-radius. Minimum touch target: 44px.

Mineral Buttons

Button Variants

Button Sizes

Badges & Chips

Pill-shaped badges use 9999px border-radius.

Mineral Badges

cobalt tanzanite malachite gold terracotta

Semantic Badges

Success Warning Error Info

Outline Badges

cobalt tanzanite malachite gold terracotta

Chips (Removable)

React × TypeScript × Node.js × Tailwind ×

Labels

Form labels with required indicators and helper text.

Email Address *

We'll never share your email.

Password

Password must be at least 8 characters.

Avatars

User avatars with fallback initials. Sizes defined in components.avatar.sizes.

Sizes

default

Mineral Avatars

Avatar Group

Checkboxes & Toggles

Checkbox size: 20px | Toggle: 44px × 24px

Checkboxes

✓

Checked option

Unchecked option

✓

Disabled checked

Toggle Switches

Enabled toggle

Disabled toggle

Cards

Cards use 16px border-radius with var(--shadow-card).

Standard Card

Basic card with title and content.

Accented Card

Primary color background fills the card.

Clickable Card

Hover for elevation effect.

Brand Cards (Accented)

nyuchi

Collective action, pollination, community building

mukoko

Where community gathers and stores

shamwari

AI companion that serves

Alerts

Alerts use 4px left border accent with container background.

Information

This is an informational message.

Success

Action completed successfully.

Warning

Please review before continuing.

Error

Something went wrong. Please try again.

App Icons

Ecosystem app icons use 24px border-radius.

nyuchi

mukoko

shamwari

nhimbe

Icon Groups

Common icon patterns for actions and navigation.

Action Icons

Icon-Only Buttons

Icon Button Group (Pill Container)

Group related icon buttons in a pill container for compact action bars.


            .icon-button-group { display: inline-flex; border-radius: var(--radius-badge); overflow: hidden; }

            .icon-button-group button { width: var(--btn-icon-size); height: var(--btn-icon-size); flex-shrink: 0; }

Design Tokens

Radii & Shadows

Token	Value	Usage
`--radius-button`	12px	Buttons, CTAs
`--radius-card`	16px	Cards, containers
`--radius-input`	8px	Inputs, text fields
`--radius-badge`	9999px	Pills, tags
`--radius-appIcon`	24px	App icons
`--shadow-card`	0 4px 20px rgba(20, 20, 19, 0.08)	Card elevation
`--shadow-card-hover`	0 8px 30px rgba(20, 20, 19, 0.15)	Card hover state

Button Sizes

Size	Height	Padding	Font Size
sm	32px	6px 12px	12px
default	40px	10px 20px	14px
lg	48px	14px 28px	16px
icon	40px × 40px (icon: 20px)

Avatar Sizes

Size	Value
xs	24px
sm	32px
default	40px
lg	48px
xl	64px

Form Components

Component	Property	Value
Input	Height	40px
Input	Padding	10px 14px
Input	Font Size	14px
Checkbox	Size	20px
Toggle	Dimensions	44px × 24px
Toggle	Thumb Size	20px
Badge	Padding	4px 12px
Badge	Font Size	12px

shadcn/ui Integration

These components are designed to match shadcn/ui patterns. When implementing:

Use Tailwind CSS with the brand tokens as CSS variables
Install shadcn/ui components and customize with mineral colors
Apply container colors for accented cards (not borders)
Maintain 12px button radius and 16px card radius
Use mineral badges for status indicators

// tailwind.config.ts
extend: {
  colors: {
    cobalt: '#0047AB',
    tanzanite: '#4B0082',
    malachite: '#004D40',
    gold: '#5D4037',
    terracotta: '#8B4513',
  },
  borderRadius: {
    button: '12px',
    card: '16px',
    input: '8px',
  }
}