Kokonut UIPro
ComponentsTemplatesPricing
Sign inGet Pro
Kokonut UIPro
TemplatesPricingSign in
Get Kokonut UI Pro

01Get started

InstallationAgentsChangelog

02Templates

FleetNewMarlowNewAgentaNewLumeNewSonaeFutur

03Blocks & sections48

Login2 new4Features2 new9FAQs3 new5Footers1 new4HeroesNew9Pricings5 new8
Testimonials2 new3

04Components91

Cards11 new15Charts & DataNew5Headline3 new4Banners2 new5Buttons5 new12Forms2 new9Inputs12 new13Modals3 new8Toolbars2 new5Animated List3 new4Action Search Bar3 new4Action ToolbarUpdatedKanban BoardNewFile TreeNewReview PinsNewVersion HistoryNewTab StripNewAgent QuestionsNew

05More2

Team InvitationUpdatedCalendar Schedule
04Components91

15 components11 new, October 21, 2026

Cards

Cards for messages, feature rollouts, API keys, deployments, checkout, AI images, workspaces, courses, polls, profiles, contacts, jobs and order tracking.

01Image Generation CardNew, Oct 15

AI image panel: Generate resolves the image from coarse pixel blocks to sharp with a step counter, then four variations land. Pick one, or change the ratio.

Install with
no extra packages
Live sample
Preview width

02Rollout ControlNew, Oct 21

A feature flag's rollout panel: two hundred cells light up in hashed bucket order as you drag the percentage, with what a change adds or takes back marked against what's live.

Install with
lucide-react, motion

03API Keys CardNew, Oct 21

Developer API keys: a new secret resolves into place the one time it's shown, rolling keeps the old key alive through a grace countdown, and revoking is a press and hold.

Install with
lucide-react, motion

04Audio Player CardNew, Oct 15

Podcast or voice note player with a scrubbable waveform, chapter tooltips and a speed chip.

Install with
no extra packages

05Message ThreadNew, Oct 21

A direct message thread: a sent message flies from the input to its bubble, the read receipt glides to it, and double-click reacts.

Install with
lucide-react

06Onboarding ChecklistNew, Oct 15

Get-started checklist with a progress ring, steps that collapse as you check them and an all-set state at the end.

Install with
no extra packages

07Deployment CardNew, Oct 15

Deployment card with a site preview, commit and status. Redeploy runs a build along a step rail, with a ticking timer and the latest log line swapping in place.

Install with
no extra packages

08Order Summary CardNew, Oct 15

Calm checkout summary with drawn product tiles, quiet quantity controls, an Express delivery switch and an inline promo code. Totals roll only the digits that change, and Pay eases from a spinner to Paid.

Install with
no extra packages

09Workspace SwitcherNew, Oct 15

Workspace switcher for the top of an app sidebar. The trigger row expands into the panel and becomes a search field, with arrow keys, ⌘1-9 shortcuts and a compact account footer.

Install with
no extra packages

10Continue Learning CardNew, Oct 15

Continue-watching card for courses. Scrub the lesson thumbnail like a storyboard, click to resume from that moment, and pick from the next lessons below.

Install with
no extra packages

11Poll CardUpdated, Oct 15

One-question poll where choosing is voting: bars grow to their share, percentages count up, and Undo stays for five seconds.

Install with
no extra packages

12Profile CardUpdated, Oct 15

Portrait profile card with stats and mutual followers. Follow morphs into Following while the follower count rolls up.

Install with
no extra packages

13Contact CardUpdated, Oct 15

Teammate card built around when you can reach them: a 24-hour strip of both working days with the overlap in ink. Scrub it to read any time on both clocks. Rows copy on click, and Save contact downloads a real vCard.

Install with
no extra packages

14Job Listing CardUpdated, Oct 15

Job post where you apply without leaving the card. The salary band sits on a market range with the median marked, and Quick apply folds into a short form with a résumé drop, then an Applied status track with Undo.

Install with
no extra packages

15Order TrackerNew, Oct 16

Delivery card with a milestone rail. Details unfolds it into the full scan history, each stop moving into its row.

Install with
no extra packages
PreviousTestimonialsNextCharts & Data

On this page

01Image Generation CardNew02Rollout ControlNew03API Keys CardNew04Audio Player CardNew05Message ThreadNew06Onboarding ChecklistNew07Deployment CardNew08Order Summary CardNew09Workspace SwitcherNew10Continue Learning CardNew11Poll CardUpdated12Profile CardUpdated13Contact CardUpdated14Job Listing CardUpdated15Order TrackerNew
Variation 1 of 4: A quiet valley at dusk, layered hills, low sun, muted film tones

1152 × 864·Seed 89702