The Components
91 live, production components — Adinkra geometry and Kente colour, ready to ship. 49 free · 30 Pro · 12 Premium.
Button
Forms
The primary action control — variants, sizes, loading state.
variant, size, loading, leftIcon, rightIcon
import { Button } from '@kwacha-kulture/react';
<Button variant="primary">Continue</Button>Input
Forms
A labelled text input with error + hint states.
label, error, hint, leftIcon
import { Field, Input } from '@kwacha-kulture/react';
<Field label="Email"><Input placeholder="you@africa.com" /></Field>Textarea
Forms
A multi-line text field.
rows, error, hint
import { Textarea } from '@kwacha-kulture/react';
<Textarea rows={4} placeholder="Tell your story…" />Select
Forms
A styled native select.
options, value, onChange
import { Select } from '@kwacha-kulture/react';
<Select><option>Lusaka</option><option>Lagos</option></Select>Checkbox
Forms
A checkbox with label.
checked, label, onChange
import { Checkbox } from '@kwacha-kulture/react';
<Checkbox label="I agree" />Radio
Forms
A radio option.
name, value, label
import { Radio } from '@kwacha-kulture/react';
<Radio name="tier" label="Pro" />Toggle
Forms
An on/off switch.
checked, onChange
import { Toggle } from '@kwacha-kulture/react';
<Toggle checked onChange={() => {}} />Card
Data Display
A surface for grouping content, with a kente accent option.
title, accentTop, padding
import { Card } from '@kwacha-kulture/react';
<Card title="Savanna">The African design platform.</Card>Badge
Data Display
A small status/label pill.
variant, children
import { Badge } from '@kwacha-kulture/react';
<Badge variant="emerald">Live</Badge>Tag
Data Display
A removable tag/chip.
onRemove, children
import { Tag } from '@kwacha-kulture/react';
<Tag>Adinkra</Tag>Avatar
Data Display
A user/brand avatar with fallback initials.
src, name, size
import { Avatar } from '@kwacha-kulture/react';
<Avatar name="Venancio Gomani" />Counter
Data Display
An animated count-up for metrics — parses prefix/suffix.
value, duration
import { Counter } from '@kwacha-kulture/react-pro';
<Counter value="54" />Pro component
Unlock the code →Spinner
Feedback
A loading spinner.
size
import { Spinner } from '@kwacha-kulture/react';
<Spinner />Skeleton
Feedback
A loading placeholder shimmer.
width, height
import { Skeleton } from '@kwacha-kulture/react';
<Skeleton height={20} />Empty State
Feedback
A friendly empty/zero-data panel.
title, description, action
import { EmptyState } from '@kwacha-kulture/react';
<EmptyState title="Nothing here yet" />Tooltip
Feedback
A hover/focus tooltip.
content, placement
import { Tooltip } from '@kwacha-kulture/react';
<Tooltip content="Sovereign"><button>Bayete</button></Tooltip>Live Badge
Feedback
A pulsing "live/now" indicator.
label, color
import { LiveBadge } from '@kwacha-kulture/react-pro';
<LiveBadge label="Now" />Pro component
Unlock the code →Modal
Overlay
A centred dialog.
open, onClose, title
import { Modal } from '@kwacha-kulture/react';
<Modal open onClose={() => {}} title="Confirm">…</Modal>Drawer
Overlay
A slide-in side panel.
open, side, onClose
import { Drawer } from '@kwacha-kulture/react-pro';
<Drawer open side="right" onClose={() => {}}>…</Drawer>Pro component
Unlock the code →Popover Menu
Overlay
An anchored dropdown menu.
items, trigger
import { PopoverMenu } from '@kwacha-kulture/react-pro';
<PopoverMenu items={[{ label: 'Edit' }]} />Pro component
Unlock the code →Info Modal
Overlay
A richer informational dialog with motif framing.
open, title, motif
import { InfoModal } from '@kwacha-kulture/react-pro';
<InfoModal open title="About" />Pro component
Unlock the code →Tabs
Navigation
Tabbed navigation with an animated indicator.
items, value, onChange
import { Tabs } from '@kwacha-kulture/react';
<Tabs items={[{ id: 'a', label: 'One' }]} />Accordion
Navigation
Collapsible content sections.
items
import { Accordion } from '@kwacha-kulture/react';
<Accordion items={[{ title: 'Q', content: 'A' }]} />Reveal
Motion
Scroll-reveal wrapper (fade/slide in on view).
delay, children
import { Reveal } from '@kwacha-kulture/react';
<Reveal>Appears on scroll</Reveal>Tilt Card
Motion
A 3D pointer-tilt card.
max, children
import { TiltCard } from '@kwacha-kulture/react-pro';
<TiltCard><Card>Tilt me</Card></TiltCard>Pro component
Unlock the code →Magnetic
Motion
A pointer-magnetic element.
strength, children
import { Magnetic } from '@kwacha-kulture/react-pro';
<Magnetic><button>Pull</button></Magnetic>Pro component
Unlock the code →Eyebrow
Typography
A small uppercase kicker label.
color, children
import { Eyebrow } from '@kwacha-kulture/react';
<Eyebrow>The African design platform</Eyebrow>Kente Rule
Typography
A woven kente divider, optionally labelled.
label
import { KenteRule } from '@kwacha-kulture/react';
<KenteRule label="Foundations" />King Name
Typography
A carved-gold name display in the regal lockup.
name
import { KingName } from '@kwacha-kulture/react-pro';
<KingName name="Venancio Gomani" />Pro component
Unlock the code →Kente Strip
Motifs
A woven colour-band strip that fills its width.
height
import { KenteStrip } from '@kwacha-kulture/savanna';
<KenteStrip height={8} />Ndebele Border
Motifs
A geometric Ndebele border band.
height, color
import { NdebeleBorder } from '@kwacha-kulture/savanna';
<NdebeleBorder />Sankofa
Motifs
The Sankofa Adinkra symbol.
size, color
import { Sankofa } from '@kwacha-kulture/savanna';
<Sankofa size={48} />Gye Nyame
Motifs
The Gye Nyame Adinkra symbol.
size, color
import { GyeNyame } from '@kwacha-kulture/savanna';
<GyeNyame size={48} />Dwennimmen
Motifs
The Dwennimmen (ram’s horns) Adinkra symbol.
size, color
import { Dwennimmen } from '@kwacha-kulture/savanna';
<Dwennimmen size={48} />Pro component
Unlock the code →Bogolan Stamp
Motifs
A mudcloth (bogolan) stamp motif.
size, color
import { BogolanStamp } from '@kwacha-kulture/savanna';
<BogolanStamp size={120} />Pro component
Unlock the code →Kwacha Mark
Brand
The Sankofa-in-roundel brand mark.
size
import { KwachaMark } from '@kwacha-kulture/savanna/brand';
<KwachaMark size={40} />Kwacha Wordmark
Brand
A two-tone wordmark lockup.
lead, accent, fontSize
import { KwachaWordmark } from '@kwacha-kulture/savanna/brand';
<KwachaWordmark lead="Venancio" accent="Gomani" />Pro component
Unlock the code →Kwacha Logo
Brand
The full mark + wordmark lockup.
lead, accent, markSize
import { KwachaLogo } from '@kwacha-kulture/savanna/brand';
<KwachaLogo lead="Venancio" accent="Gomani" />Pro component
Unlock the code →Table
Data Display
A sortable, striped data table with sticky headers and row hover.
columns, rows, sortable, striped
import { Table } from '@kwacha-kulture/react';
<Table
sortable
columns={[{ key: 'name', header: 'Name', sortable: true }, { key: 'tier', header: 'Tier' }]}
rows={[{ name: 'Button', tier: 'Free' }]}
/>Stat
Data Display
A KPI tile with value and up/down delta — for dashboards.
label, value, delta, icon
import { Stat } from '@kwacha-kulture/react-pro';
<Stat label="Revenue" value="$68" delta={12} deltaLabel="vs last week" />Pro component
Unlock the code →Timeline
Data Display
A vertical event timeline with motif nodes.
items
import { Timeline } from '@kwacha-kulture/react-pro';
<Timeline items={[{ title: 'License issued', time: 'Today' }, { title: 'Checkout', time: '2m ago' }]} />Pro component
Unlock the code →Avatar Group
Data Display
Overlapping avatars with an overflow count.
people, max, size
import { AvatarGroup } from '@kwacha-kulture/react-pro';
<AvatarGroup people={[{ name: 'Venancio' }, { name: 'Kwacha' }]} max={4} />Pro component
Unlock the code →Alert
Feedback
An inline message — info, success, warning, or danger.
tone, title, onDismiss
import { Alert } from '@kwacha-kulture/react';
<Alert tone="success" title="Saved">Your changes are live.</Alert>Banner
Feedback
A full-width announcement bar with an action.
tone, action, onDismiss
import { Banner } from '@kwacha-kulture/react';
<Banner tone="info" action={<a href="/pricing">See plans</a>}>Savanna 1.0 is here.</Banner>Progress
Feedback
A linear progress bar with optional label and value.
value, max, label, showValue
import { Progress } from '@kwacha-kulture/react';
<Progress value={72} label="Uploading" showValue />Progress Ring
Feedback
A circular progress indicator with a centred value.
value, size, stroke, tone
import { ProgressRing } from '@kwacha-kulture/react-pro';
<ProgressRing value={72} size={80} />Pro component
Unlock the code →Rating
Feedback
A fractional star rating, read-only or interactive.
value, max, onChange, readOnly
import { Rating } from '@kwacha-kulture/react-pro';
<Rating value={4.5} readOnly />Pro component
Unlock the code →Breadcrumbs
Navigation
A path trail with a custom separator.
items, separator
import { Breadcrumbs } from '@kwacha-kulture/react';
<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Components' }]} />Pagination
Navigation
Page controls with ellipsis and prev/next.
page, pageCount, onChange
import { Pagination } from '@kwacha-kulture/react';
<Pagination page={3} pageCount={12} onChange={setPage} />Segmented Control
Navigation
A pill-style segmented toggle for switching views.
items, value, onChange, size
import { SegmentedControl } from '@kwacha-kulture/react';
<SegmentedControl items={[{ id: 'grid', label: 'Grid' }, { id: 'list', label: 'List' }]} value="grid" onChange={setView} />Stepper
Navigation
A horizontal multi-step progress indicator.
steps, current
import { Stepper } from '@kwacha-kulture/react-pro';
<Stepper current={1} steps={[{ label: 'Cart' }, { label: 'Pay' }, { label: 'Done' }]} />Pro component
Unlock the code →Slider
Forms
A range slider with a gold fill and label.
value, min, max, step, onChange
import { Slider } from '@kwacha-kulture/react';
<Slider value={value} onChange={setValue} label="Budget" showValue />Combobox
Forms
A searchable, filterable select.
options, value, onChange
import { Combobox } from '@kwacha-kulture/react-pro';
<Combobox options={cities} value={value} onChange={setValue} />Pro component
Unlock the code →Kbd
Typography
A keyboard-key glyph for shortcuts.
children
import { Kbd } from '@kwacha-kulture/react';
<Kbd>⌘</Kbd> <Kbd>K</Kbd>Divider
Typography
A functional separator, optionally labelled or vertical.
orientation, label
import { Divider } from '@kwacha-kulture/react';
<Divider label="or" />Box
Layout
A polymorphic styled div with shorthand padding/margin/bg/radius props.
as, p, px, py, m, bg, radius, border, shadow
import { Box } from '@kwacha-kulture/react';
<Box p={16} bg="var(--tz-bg-inset)" radius={12} border>Content</Box>Container
Layout
A centred, max-width content frame (sm/md/lg/xl).
maxWidth, gutter
import { Container } from '@kwacha-kulture/react';
<Container maxWidth="md">…</Container>Grid
Layout
A CSS-grid wrapper with column count and gap.
cols, gap, rows
import { Grid } from '@kwacha-kulture/react';
<Grid cols={3} gap={12}>{cells}</Grid>Stack
Layout
A flex wrapper with direction, gap, align and justify.
direction, gap, align, justify, wrap
import { Stack } from '@kwacha-kulture/react';
<Stack direction="row" gap={8} align="center">…</Stack>Image List
Layout
A responsive image grid with hover captions.
images, cols, gap, radius, ratio
import { ImageList } from '@kwacha-kulture/react-pro';
<ImageList cols={3} images={[{ src, title }]} />Pro component
Unlock the code →Chip
Data Display
A compact chip with avatar/icon, delete and click — filled or outlined.
label, icon, avatar, color, variant, onDelete
import { Chip } from '@kwacha-kulture/react';
<Chip label="Lagos" color="gold" onDelete={() => {}} />Autocomplete
Forms
A multi-select autocomplete with chips and type-to-filter.
options, value, onChange, multiple
import { Autocomplete } from '@kwacha-kulture/react-pro';
<Autocomplete options={opts} value={value} onChange={setValue} />Pro component
Unlock the code →Search Field
Forms
A search input with a leading icon and a clear/cancel button.
value, onValueChange, onClear
import { SearchField } from '@kwacha-kulture/react';
<SearchField value={q} onValueChange={setQ} />Transfer List
Forms
A dual-list picker with checkboxes and move-all/selected.
left, right, onChange, titles
import { TransferList } from '@kwacha-kulture/react-pro';
<TransferList left={left} right={right} onChange={setLists} />Pro component
Unlock the code →Backdrop
Overlay
A full-screen dimmer for loading or focus states.
open, blur, onClick
import { Backdrop } from '@kwacha-kulture/react';
<Backdrop open={busy}><Spinner /></Backdrop>Snackbar
Feedback
A positioned, auto-hiding notification with an action.
open, message, action, tone, position, autoHideMs
import { Snackbar } from '@kwacha-kulture/react';
<Snackbar open={open} message="Saved" onClose={close} />App Bar
Navigation
A top application bar with leading, title and actions.
title, leading, actions, color, elevated
import { AppBar } from '@kwacha-kulture/react';
<AppBar title="Dashboard" actions={<Avatar name="VG" />} />Bottom Navigation
Navigation
A mobile-style bottom tab bar with icons and labels.
items, value, onChange
import { BottomNavigation } from '@kwacha-kulture/react-pro';
<BottomNavigation items={tabs} value={tab} onChange={setTab} />Pro component
Unlock the code →Menu
Navigation
A full dropdown menu — sections, icons, shortcuts, danger items.
trigger, sections, align
import { Menu } from '@kwacha-kulture/react-pro';
<Menu trigger={<Button>File</Button>} sections={sections} />Pro component
Unlock the code →Image Viewer
Media
A full-screen lightbox with zoom and keyboard navigation.
images, open, index, onClose, onIndexChange
import { ImageViewer } from '@kwacha-kulture/react-pro';
<ImageViewer images={imgs} open={open} index={i} onClose={close} />Pro component
Unlock the code →Audio Player
Media
A compact audio player with a deterministic waveform scrubber.
src, title, artist, seed
import { AudioPlayer } from '@kwacha-kulture/react-pro';
<AudioPlayer src={url} title="Track" artist="Artist" />Pro component
Unlock the code →Data Grid
Data Display
A full data grid — sortable, per-column filtering, column resize & pin, pagination, and row selection.
columns, rows, pageSize, selectable, getRowId
import { DataGrid } from '@kwacha-kulture/react-pro';
<DataGrid
selectable
columns={[{ key: 'name', header: 'Name', sortable: true, filterable: true, pinned: true }]}
rows={rows}
/>Pro component
Unlock the code →Sparkline
Charts
A tiny inline trend line for KPI tiles.
data, color, width, height, fill
import { Sparkline } from '@kwacha-kulture/react';
<Sparkline data={[3, 7, 4, 9, 6, 11]} />Line Chart
Charts
An area line chart with gridlines and points.
data, color, height
import { LineChart } from '@kwacha-kulture/react-pro';
<LineChart data={[{ label: 'Jan', value: 12 }]} />Pro component
Unlock the code →Bar Chart
Charts
A labelled vertical bar chart.
data, color, height
import { BarChart } from '@kwacha-kulture/react';
<BarChart data={[{ label: 'A', value: 8 }]} />Donut Chart
Charts
A ring chart with a legend and percentages.
segments, size, thickness
import { DonutChart } from '@kwacha-kulture/react-pro';
<DonutChart segments={[{ label: 'Pro', value: 55, color: '#e0a91d' }]} />Pro component
Unlock the code →Area Chart
Charts
A responsive gradient area chart with a hover readout — the premium time-series.
data, color, height, unit
import { AreaChart } from '@kwacha-kulture/react';
<AreaChart data={[{ label: 'Mon', value: 12 }, { label: 'Tue', value: 19 }]} unit="visitors" />World Map
Charts
A choropleth world map — colour countries by a value and hover for a per-country readout. Compact public-domain geometry baked in (178 countries), joined by ISO alpha-2; every colour is a prop.
data[{code,value}], colorLow, colorHigh, valueSuffix, renderTooltip
import { WorldMap } from '@kwacha-kulture/react-pro';
<WorldMap
data={[{ code: 'ZA', value: 4200 }, { code: 'NG', value: 3100 }, { code: 'KE', value: 2600 }]}
valueSuffix="visitors"
/>Pro component
Unlock the code →Date Picker
Forms
A date input with a popover month calendar.
value, onChange, label
import { DatePicker } from '@kwacha-kulture/react-pro';
<DatePicker value={date} onChange={setDate} label="Date" />Pro component
Unlock the code →Time Picker
Forms
A compact HH:MM time picker with hour + minute steppers.
value, onChange, minuteStep
import { TimePicker } from '@kwacha-kulture/react-pro';
<TimePicker value={time} onChange={setTime} />Pro component
Unlock the code →Command Palette
Navigation
A ⌘K command palette — search, grouped results, full keyboard navigation.
open, onClose, commands
import { CommandPalette } from '@kwacha-kulture/react-pro';
<CommandPalette open={open} onClose={close} commands={cmds} />Pro component
Unlock the code →Kanban
Data Display
A drag-and-drop board — move cards between columns.
columns, onChange
import { Kanban } from '@kwacha-kulture/react-pro';
<Kanban columns={columns} onChange={setColumns} />Pro component
Unlock the code →Rich Text Editor
Forms
A formatting toolbar over a contentEditable surface — bold/italic, headings, lists, quote, links.
defaultValue, onChange, placeholder
import { RichTextEditor } from '@kwacha-kulture/react-pro';
<RichTextEditor onChange={setHtml} />Pro component
Unlock the code →Dropzone
Forms
A drag-and-drop (or click) file upload area.
onFiles, accept, multiple, hint
import { Dropzone } from '@kwacha-kulture/react';
<Dropzone onFiles={(files) => upload(files)} />Tree View
Navigation
An expandable hierarchical tree.
nodes, defaultExpanded
import { TreeView } from '@kwacha-kulture/react-pro';
<TreeView nodes={nodes} defaultExpanded={['root']} />Pro component
Unlock the code →Data Grid Pro
Data Display
A virtualized data grid — only visible rows mount (handles thousands of rows) — with inline editing, keyboard navigation (arrows/Enter/Esc) and per-column validation.
columns(+editable/validate), rows, rowHeight, height, onCellEdit
import { DataGridPro } from '@kwacha-kulture/react-pro';
<DataGridPro
rows={rows}
columns={[{ key: 'email', header: 'Email', editable: true, validate: (v) => v.includes('@') ? null : 'Invalid email' }]}
onCellEdit={(rowIndex, key, value) => save(rowIndex, key, value)}
/>Pro component
Unlock the code →Gantt
Charts
A Gantt chart — tasks as bars over a unit timeline, with progress fill.
tasks, units, unitLabel, labelWidth
import { Gantt } from '@kwacha-kulture/react-pro';
<Gantt units={12} tasks={[{ id: 't1', label: 'Design', start: 0, end: 3, progress: 80 }]} />Pro component
Unlock the code →Mentions
Forms
A textarea with @-mention autocomplete — type @ to pick people.
value, onChange, options, rows
import { Mentions } from '@kwacha-kulture/react-pro';
<Mentions value={text} onChange={setText} options={people} />Pro component
Unlock the code →Calendar
Data Display
A month calendar / scheduler with per-day events and selection.
events, value, onSelect
import { Calendar } from '@kwacha-kulture/react-pro';
<Calendar events={[{ date: '2026-08-14', label: 'Indaba' }]} onSelect={setDate} />Pro component
Unlock the code →Color Picker
Forms
An HSV colour picker — saturation/value field, hue slider and hex input.
value, onChange
import { ColorPicker } from '@kwacha-kulture/react-pro';
<ColorPicker value={color} onChange={setColor} />Pro component
Unlock the code →Spreadsheet
Data Display
A lightweight spreadsheet — editable cells, formula bar and live column sums.
rows, cols, initial, onChange
import { Spreadsheet } from '@kwacha-kulture/react-pro';
<Spreadsheet rows={8} cols={5} onChange={setData} />Pro component
Unlock the code →