Components
Browse all available components in ikui.
Browse all available components in ikui. Click on a component to view its documentation.
Introduction
Build elegant React interfaces with premium, copy-ready Tailwind CSS components.
Get Started
A quick guide to adding ikui components to your application.
Components
Browse all available components in ikui.
Skills
An agent skill that teaches AI assistants how to find, install, and compose ikui components and blocks.
MCP
Integrating MCP with ikui lets you control it via AI.
LLMs
Feed ikui docs to your AI coding agent: llms.txt, llms-full.txt, and per-page Markdown.
Audio Waveform
A static, width-explicit waveform for timelines. Decodes audio (URL / Blob / AudioBuffer) into normalized peaks — or takes precomputed peaks — and renders mirrored canvas bars at any pixel width, with optional played-progress coloring. Backs the waveform-player.
Waveform Player
A compact audio player built on audio-waveform: play/pause, elapsed and total time, played-progress coloring, and click/drag-to-seek on the waveform.
Thumbnail Strip
A viewport-virtualized canvas strip rendering video thumbnails along a horizontal timeline. Pairs with video-thumbnail-cache for the frame decoding.
Segmented Timeline Strip
Multi-clip timeline overview built by composing one thumbnail-strip per segment with DOM chrome (active border, dim mask, label, playhead, total duration badge) and click-to-seek.
Timeline Ruler
A pure, zoom-aware, horizontally-scrollable time ruler: adaptive tick density and MM:SS / frame labels, with viewport virtualization. Just the scale — playhead, seeking, and tracks are left to the consumer.
Timeline Element
A positioned, trimmable timeline clip: places itself on a track by time (startTime/duration × pixelsPerSecond × zoom, the same basis as timeline-ruler) and renders any content inside — an audio waveform, a thumbnail strip, a label. Selectable, with left/right trim handles that emit the new geometry. The track, playhead, and seeking are left to the consumer.
Timeline Playhead
A draggable timeline playhead: a vertical line with a top knob, positioned by time (currentTime × pixelsPerSecond × zoom, the same basis as timeline-ruler) and scrubbable. Drag it to seek; it scrolls with the tracks it sits over. Spans whatever container it is placed in. The playback clock and click-to-seek on the tracks are left to the consumer.
Image Compare
A before/after image comparison slider. Drag (or hover) to reveal one image over another, horizontally or vertically, with optional labels, a custom handle, and a loading skeleton. Responsive out of the box.
Image Crop
A responsive, pointer- and keyboard-driven image cropping tool. Draw, drag, and 8-way resize a crop over any image or video, with fixed aspect ratios, circular crops, min/max bounds, rule-of-thirds guides, and percent/pixel crop callbacks. Self-contained Tailwind styling, zero dependencies.
Image Grid
An adaptive photo grid that lays out 1 to 9 images in WeChat-moments style: 1–8 use hand-tuned collage layouts on a 6×6 grid (every cell stays a healthy size) and 9 fills a uniform 3×3 grid, with the container always staying square. Responsive, dependency-free, with optional keyboard-accessible per-cell click and custom rendering for lightbox integration.
Particle Image
Turn any image into an interactive particle field that scatters from the pointer and settles back toward its origin.
Media Viewer
A full-screen media lightbox that pages through a mixed list of images, videos, and audio in one swipeable carousel. Images fit the viewport, videos play inline with native controls, and audio slides show a waveform player under an optional cover that scales while it plays. Renders through a portal with its own fade, scroll lock, Escape-to-close, and slide counter — no dialog dependency. Controlled via open / onOpenChange with an initialIndex.
Copy Button
A copy-to-clipboard button with blur transition effect.
Cascader
A column-based cascading dropdown for selecting a path through hierarchical data (region → city → district, category trees). Desktop popover / mobile drawer, keyboard navigable, controlled or uncontrolled, with clear and custom display rendering.
Password Input
A password field with a trailing show/hide toggle, composed from the input-group primitive. Spreads native input props (name, value, onChange, placeholder).
Date Range Picker
A popover date range picker with a quick-preset side panel (Today, Last 7 days, This month, …), a two-month calendar with live hover-range preview, min/max clamping, and a clearable trigger. Controlled or uncontrolled, with configurable presets and date-fns locale.
Chart
Recharts-based chart primitives (container, tooltip, legend) with theme-aware colors. Compose bar, area, line, pie, radar, and radial charts from a single config.
Spark Chart
Dependency-free interactive line chart with a cursor-tracked tooltip, snap-to-point hover, reveal effect, and built-in X-axis labels.
QR Code
QR code generator with rounded finder patterns and dot-style data modules.
Tree
A data-driven hierarchical tree view of folders and leaves with selection, expand/collapse, per-node icons, an actions slot, and a custom renderItem. Self-managed expand state, animated open/close, ARIA roving-tabindex keyboard navigation, and native drag-and-drop to reorder or re-parent nodes via onDocumentDrag. Controlled or uncontrolled selection reported through onSelectChange.
Heatmap Calendar
A GitHub-style contribution heatmap. Buckets dated values into color levels across a weeks × weekdays grid, with month/weekday axis labels, a Less→More legend, a shared hover tooltip, and custom palettes. Driven purely by data — no card or title scaffolding.
Data Table
A full-featured data table built on TanStack Table: sticky column pinning, row virtualization for large datasets, dnd-kit drag-to-reorder rows, a paginated footer, a filter toolbar with text / number / range (slider) / date / faceted (select) filters driven by per-column meta, a column-visibility view menu, sortable column headers, and a loading skeleton. Bring your own TanStack table instance; the pieces are composable.