Kokonut Labs

Kokonut UI

Action Search Bar

Animated

A command bar with keyboard shortcuts and an animated action menu.

Kokonut UI

AI Input Search

Minimal

A chat input that switches into a dedicated search mode.

Kokonut UI

AI State Loading

Animated

An animated pending state for code generation.

Kokonut UI

AI Input Selector

Chat

A chat prompt field with a model or mode selector.

Kokonut UI

AI Text Loading

Animated

A compact thinking indicator for AI responses.

Kokonut UI

AI Voice

Animated

A voice input mode for recording prompts.

Kokonut UI

Apple Activity Card

Animated

A fitness activity card with three colored progress rings.

Kokonut UI

Magnet Button

Animated

A button that pulls nearby particles toward the pointer.

Kokonut UI

Avatar Picker

Animated

A rotating avatar picker for browsing profile options.

Kokonut UI

Background Paths

Animated

Animated line paths converge behind centered page content.

Kokonut UI

Beams Background

Animated

Customizable light beams animate across a page background.

Kokonut UI

Bento Grid

Animated

A four-card grid combining product content with varied animations.

Kokonut UI

Card Flip

Animated

A two-sided card that flips to reveal secondary content.

Kokonut UI

Stack

Animated

An expandable stack of overlapping cards.

Kokonut UI

Carousel Cards

Animated

A card carousel with direct and previous or next navigation.

Kokonut UI

Command Button

Button

A button that presents its keyboard shortcut alongside the label.

Kokonut UI

Currency Transfer

Animated

A multi-step currency transfer card with animated transaction states.

Kokonut UI

Dynamic Text

Animated

A text switcher that animates between a sequence of phrases.

Kokonut UI

File Upload

Animated

A drag-and-drop file picker with animated upload progress.

Kokonut UI

Glitch Text

Animated

A text effect with adjustable glitch intensity and color schemes.

Kokonut UI

Gradient Button

Premium

A button with an animated gradient border and emerald, purple, and orange glow variants.

Kokonut UI

Hold Button

Animated

A press-and-hold button with configurable duration and color.

Kokonut UI

Liquid Glass

Glass

A translucent card with layered glass and refraction effects.

Kokonut UI

Matrix Text

Animated

Text flickers through Matrix-style binary characters before settling into place.

Kokonut UI

Particle Button

Animated

A button that releases an animated particle burst when clicked.

Kokonut UI

Profile Dropdown

Menu

A profile menu with account details and common actions.

Kokonut UI

Scroll Text

Animated

Text segments animate into view as the page scrolls.

Kokonut UI

Shapes Hero

Animated

A hero backdrop where geometric shapes fall from the top.

Kokonut UI

Shimmer Text

Animated

Text with a sweeping shimmer highlight animation.

Kokonut UI

Sliced Text

Animated

Text splits into offset halves that align again on hover.

Kokonut UI

Smooth Drawer

Animated

A drawer with a smooth slide-in transition and dimmed backdrop.

Kokonut UI

Smooth Tab

Animated

Tabs with an animated indicator that moves between selections.

Kokonut UI

Social Button

Animated

A button that reveals social actions with an animated expansion.

Kokonut UI

Switch Button

Animated

A theme switcher with animated shadow and thumb states.

Kokonut UI

Swoosh Text

Animated

Text accented by an animated athletic-style swoosh.

Kokonut UI

Team Selector

Input

A grouped selector for switching between teams.

Kokonut UI

Toolbar

Premium

A compact action toolbar with grouped controls.

Kokonut UI

X Card

Card

A post card with author details and a gradient hover treatment.

Kokonut UI

Typing Text

Animated

A typing effect with configurable text sequences and timing.

Kokonut UI

V0 Button

Button

A button that opens the current component in v0.