Showcase

Live previews of every custom component in the registry, plus the hooks and utilities that ship alongside them. Hit Show code on any variant to see exactly which props produced it.

Components11

Custom components

Hand-built and composed pieces that go beyond the base shadcn primitives. Each component lists the variants worth knowing about.

Data Combobox

@kaotypr-ui/data-combobox

Single-select combobox with search, optional grouping, custom item rendering, and async loading driven by onSearch / onLoadMore + hasMore.

Static + groupedLocal data, optional group field renders sections — fine for short lists.

Server-side searchonSearch fires after debounceTime — drive the request, hand back data + loading. The component skips its built-in filter when onSearch is set.

Infinite scroll + custom renderonLoadMore fires when the sentinel hits the viewport. renderItem prints a richer row (avatar + email + team) without changing the value contract.

Data Multi-Combobox

@kaotypr-ui/data-multi-combobox

Multi-select variant with badge chips, overflow expander, and the same async hooks as DataCombobox — search, paginate, hold selection across pages.

Tag input with overflowMany preselected values render as chips; overflow rolls into a +N counter that expands on click.

PlatformGrowth+1 more

Server-side search + infinite scrollSame hooks as DataCombobox: onSearch resets to page 1, onLoadMore appends. Selection persists across pages because values are referenced by id, not array index.

Invite teammates…

Data Table

@kaotypr-ui/data-table

TanStack-table-powered grid built for server-driven data — manualPagination is on by default, loading overlays the body, and ColumnDef.cell renders any node.

Rich cellsColumnDef.cell can return any node — avatar+identity, status badges, and relative timestamps in a static slice.

Member	Team	Role	Status	Last active
AL Ada Lovelaceada.lovelace@kaotypr.com	Platform	Engineer	active	7d ago
GD Grace Dijkstragrace.dijkstra@kaotypr.com	Growth	Designer	active	7d ago
LT Linus Thompsonlinus.thompson@kaotypr.com	Design	Manager	active	7d ago
MM Margaret Matsumotomargaret.matsumoto@kaotypr.com	DevRel	Lead	invited	7d ago
AL Alan Lerdorfalan.lerdorf@kaotypr.com	Ops	Director	paused	7d ago

Server-side pagination + loading overlaymanualPagination is on internally — pass only the current page's rows. The loading prop overlays a spinner so the table stays mounted between requests (no layout jump).

Showing 0–0 of 0 membersfetching…

	Member	Team	Role	Status	Last active

Rows per page

Page 1

Date Picker

@kaotypr-ui/date-picker

Calendar-driven date input. Optional inline time picker, ISO-string or Date round-tripping.

Date onlyCalendar popover; round-trips Date or ISO string.

Selected: —

Date + timeInline time picker docks under the calendar when showTime is set.

Selected: —

Custom time pickerForward TimePicker options via timePickerProps — here we enable seconds, switch to 12-hour meridiem, and snap minutes to 5-minute increments.

Selected: —

Date Range Picker

@kaotypr-ui/date-range-picker

Two-month range calendar with optional from/to time pickers and a clear/done footer.

Date rangeResponsive default — two months side-by-side on desktop, collapses to a single month on mobile (via useIsMobile). Clear/Done footer included.

Selected: — → —

Range + timeAdds From/To time pickers under the calendar; the time row stacks vertically on narrow viewports so the popover stays usable on mobile.

Custom time pickerPass timePickerProps to tune both From/To time pickers at once — here we enable seconds, switch to 12-hour meridiem, and quantize minutes to 15-minute increments.

Single monthForce a one-month layout via calendarProps. When only one month is visible, outside days that fall inside the selected range receive the same range styling — the selection looks continuous even when it spills past the visible month.

Time Picker

@kaotypr-ui/time-picker

Scrollable column-based time picker with optional meridiem, seconds, and step snapping.

12-hour with meridiemAM/PM column appears when meridiem is enabled.

Selected: 09:30 AM

24-hourDefault mode — hours roll 00–23.

Selected: 13:45

Seconds + stepAdd a seconds column and snap minutes to a step (5 min in this demo).

Selected: 06:15:30

Theme

@kaotypr-ui/theme

next-themes wrapper exposing <Theme.Provider /> for the root layout and <Theme.Toggle /> for switching modes — with Slot support for any custom trigger.

Icon buttonDefault — sun/moon swap based on resolved theme.

With labelPass any Button props through (variant, size) and render children alongside the icon.

Slot childPass any element via asChild — Theme.Toggle hands the toggle behavior off via Radix Slot for full control over markup and styling.

Timeline

@kaotypr-ui/timeline

Composable timeline primitive with header, date, and description slots — vertical or horizontal.

Vertical (default)Stacked items along a left-anchored axis — best for changelogs and history.

Registry initialized
2025 - Present
Bootstrapped with the radix-luma style and zinc base color.
Custom components landed
2026 - Present
Data combobox, time picker, JSON viewer, and timeline shipped.
Showcase page
2026 - Present
Live previews for every custom component.

HorizontalPass orientation="horizontal" — items flow left to right along a top axis.

Plan
2026 - Present
Scope the showcase.
Build
2026 - Present
Compose live demos.
Ship
2026 - Present
Publish to the registry.

With footer & date rangeUse TimelineFooter for badges or actions, and pass a custom Intl date format to TimelineDate for finer-grained ranges.

v0.1.0 — Foundations
Sep 1, 2025 - Dec 15, 2025
Registry scaffolding, theming primitives, and base shadcn integration.
releasedinfra
v0.2.0 — Data inputs
Jan 10, 2026 - Mar 20, 2026
Data combobox, multi-combobox, date range picker, and time picker.
releasedforms
v0.3.0 — Showcase
Apr 1, 2026 - Present
Public showcase page with live demos and copy-paste code samples.
in progressdocs

Copy Button

@kaotypr-ui/copy-button

One-tap clipboard button with success state, built on the use-copy-to-clipboard hook.

Inline with snippetDrop next to anything copyable — the icon swaps to a check on success.

pnpm dlx shadcn@latest add @kaotypr-ui/copy-button

StandaloneJust the button — same auto-resetting state.

JSON Viewer

@kaotypr-ui/json-viewer

Collapsible, type-aware JSON tree — drop API responses in directly. Line numbers, color-coded indents, and copy support.

API responseDrop a real fetch result in — defaultExpanded={2} opens the meta and the first level of data so reviewers can scan without clicking.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{
'meta': {
'requestId': 'req_01HZX3K7P9QAB6N4D2SVTM',
'durationMs': 142,
'page': 1,
'pageSize': 3,
'total': 64,
'hasMore': true
},
'data': [
{
'id': 'usr_001',
'name': 'Ada Lovelace',
'email': 'ada.lovelace@kaotypr.com',
'team': 'Platform',
'role': 'Engineer',
'status': 'active',
'permissions': [...] (3 items),
'profile': {...} (3 items),
'joinedAt': '2023-01-01T00:00:00.000Z'// 3 years ago,
'lastActive': '2026-04-25T16:00:00.000Z'// 6 days ago
},
{
'id': 'usr_002',
'name': 'Grace Dijkstra',
'email': 'grace.dijkstra@kaotypr.com',
'team': 'Growth',
'role': 'Designer',
'status': 'active',
'permissions': [...] (3 items),
'profile': {...} (3 items),
'joinedAt': '2023-02-02T00:00:00.000Z'// 3 years ago,
'lastActive': '2026-04-25T15:13:00.000Z'// 6 days ago
},
{
'id': 'usr_003',
'name': 'Linus Thompson',
'email': 'linus.thompson@kaotypr.com',
'team': 'Design',
'role': 'Manager',
'status': 'active',
'permissions': [...] (3 items),
'profile': {...} (3 items),
'joinedAt': '2023-03-03T00:00:00.000Z'// 3 years ago,
'lastActive': '2026-04-25T14:26:00.000Z'// 6 days ago
}
]
}

CompactDisable line numbers and the colored indent guides for a quieter inline log.

{
'meta': {
'requestId': 'req_01HZX3K7P9QAB6N4D2SVTM',
'durationMs': 142,
'page': 1,
'pageSize': 3,
'total': 64,
'hasMore': true
},
'data': [
{...} (10 items),
{...} (10 items),
{...} (10 items)
]
}

Color Picker

@kaotypr-ui/color-picker

Popover-anchored hex color picker built on react-colorful. Optional alpha channel and brand swatch grid.

BasicHex picker in a popover. Trigger shows a swatch + the current hex; the inline input accepts manual hex entry.

With swatchesPass a swatches array to render quick-pick presets under the picker — useful for brand palettes.

With alphaSet alpha to enable an 8-digit hex picker with a transparency slider.

Blocks0

Blocks

Higher-level compositions assembled from multiple primitives. None published yet.

Coming soon

Nothing here yet — coming soon.

Hooks2

Hooks

Reusable React hooks distributed through the registry.

use-copy-to-clipboard

Tiny clipboard helper with auto-resetting isCopied state. Powers <CopyButton />.

use-mobile

Reactive viewport breakpoint hook used by responsive primitives like the comboboxes.

Lib1

Lib utilities

Shared utility functions consumer projects pick up by name.

cn()

clsx + tailwind-merge wrapper. The single utility every registry component depends on.

Showcase

Custom components

Data Combobox

Data Multi-Combobox

Data Table

Date Picker

Date Range Picker

Time Picker

Theme

Timeline

Registry initialized

Custom components landed

Showcase page

Plan

Build

Ship

v0.1.0 — Foundations

v0.2.0 — Data inputs

v0.3.0 — Showcase

Copy Button

JSON Viewer

Color Picker

Blocks

Hooks

Lib utilities