U
UIPKGE
AccordionVertically stacked, collapsible panels — one or many open at a time. Use for FAQs, settings groups, and any place where space is tight but content needs to stay browsable. Built on Radix UI with smooth animation and full keyboard support.
Advance Selectadvance-selectSearchable, async-capable select with keyboard navigation, multi-select, and option grouping. Drop in when the native `<select>` or the basic Select primitive runs out of room — large lists, debounced server-side filtering, custom rendered items.
AlertStatic, in-flow notice block with a leading icon, title, and description. Use for inline page-level messages — info banners, success confirmations, warning callouts. Two tones: `default` and `destructive`.
Alert Modalalert-modalProps-driven shortcut for confirm and destructive prompts — pass `title`, `description`, `actionLabel`, and a `tone` and you get a fully styled modal with a leading icon ring, action button, and optional async loading state. Skip it and use Dialog when you need a free-form modal instead.
Alluvial Chartalluvial-chartReact mirror of @uipkge/alluvial-chart — see the Vue registry item for the canonical description.
Animated Numberanimated-numberTweened number display — counts up on mount and smoothly retargets when the value changes. Ease-out cubic via requestAnimationFrame, custom formatter (Intl-ready), delay/stagger support, honors prefers-reduced-motion, SSR-safe.
Area Chartarea-chartReact mirror of @uipkge/area-chart — see the Vue registry item for the canonical description.
Aspect Ratioaspect-ratioWraps content (typically images, video, or iframes) at a fixed width:height ratio so it never letterboxes or jumps as it loads. Common ratios: 16/9 for video, 1/1 for avatars, 4/3 for cards.
AttachmentSingle file or image chip. Drive look with props: state, size, orientation, media, src, removable. Not a dropzone (see file-upload).
AvatarRound or rounded-square user image with a fallback that shows initials or an icon when the image is missing or fails to load. Sizes from xs to 2xl, optional status dot, and a group composition for stacked avatar lists.
Back Topback-topScroll-to-top floating button. Appears after the target container scrolls past a threshold and smooth-scrolls back on click. Supports custom target container, visibility threshold, scroll behavior, custom icon slot, four edge anchors, size variants, and edge offset.
BadgeSmall inline label for status, counts, or tags — sits beside other content, not as a standalone control. Seven variants: `default`, `secondary`, `destructive`, `outline`, `success`, `warning`, `info`.
Bar Chartbar-chartReact mirror of @uipkge/bar-chart — see the Vue registry item for the canonical description.
Bar Race Chartbar-race-chartReact mirror of @uipkge/bar-race-chart — see the Vue registry item for the canonical description.
Beeswarm Chartbeeswarm-chartReact mirror of @uipkge/beeswarm-chart — see the Vue registry item for the canonical description.
Block Uiblock-uiOverlay that blocks interaction during loading. Wraps content and shows a spinner + message overlay. The blocking prop toggles the blocked state with configurable overlay opacity, color, background blur, and custom icon/message slots. Composes the spinner primitive.
Board — compositional kanban / sortable-list primitiveboardSix small composable components for any board / kanban / sortable-list surface — opinionated about drop targeting and animation, agnostic about layout, data, and chrome. Drop `<Board>` around a grid of `<BoardLane>` columns; nest `<BoardLaneHeader>`, `<BoardLaneBody>`, `<BoardLaneEmpty>`, and `<BoardCard>` items inside each lane. State lives in a sibling `useBoard()` hook (insertion-index drop math, keyboard a11y, accept predicate). Cards use native HTML5 drag-and-drop (draggable + onDragStart / onLaneDragOver / onLaneDrop) — the lane components emit drag events up to the consumer, which threads them through useBoard and feeds the resulting state back in as props. Three-level React context (board → lane → card) mirrors the Timeline / Card sub-component pattern.
Border Beamborder-beamRotating conic light beam that traces the border ring of its parent. Place inside a `relative` parent (e.g. a Card); the overlay is absolutely positioned, pointer-events-none, and masked down to a ring of `size` px thickness. Tune `duration`, `delay`, and `color`, or set `paused` to freeze it. Keyframes and the `--uipkge-border-angle` @property ship in the canonical tailwind tokens — re-pull init/tailwind if upgrading.
Bottom Navigationbottom-navigationMobile bottom tab bar with icon + label items. Supports value/defaultValue for the active item, an active color, fixed positioning at the viewport bottom, badges on items, and a `to` prop for link integration.
Boxplot Chartboxplot-chartReact mirror of @uipkge/boxplot-chart — see the Vue registry item for the canonical description.
BreadcrumbHierarchical wayfinding strip that shows a user’s position in a nested page tree. Built from `<BreadcrumbList>` and `<BreadcrumbItem>` primitives so you can drop in custom separators, dropdowns for collapsed parents, and ellipsis for overflow.
Bubble Chartbubble-chartReact mirror of @uipkge/bubble-chart — see the Vue registry item for the canonical description.
Bubble Mapbubble-mapProportional symbol bubble map as dependency-free SVG. Eliminates geographic landmass distortion by scaling circle areas to continuous quantitative values with mathematical square-root radius normalization, pulsating concentric ripple rings, multi-tier size legend, and interactive hover cards.
Bullet Chartbullet-chartReact mirror of @uipkge/bullet-chart — see the Vue registry item for the canonical description.
ButtonInteractive button component with variants (default, destructive, outline, secondary, ghost, link), sizes, and composite ButtonGroup container for segmented toolbars and split buttons.
CalendarSingle-month calendar grid for date selection (react-day-picker). Use inline or in a custom popover. For form fields, use Date Picker. Supports min/max, disabled dates, multi-month, and locale.
Calendar Heatmapcalendar-heatmapReact mirror of @uipkge/calendar-heatmap — see the Vue registry item for the canonical description.
Candlestick Chartcandlestick-chartReact mirror of @uipkge/candlestick-chart — see the Vue registry item for the canonical description.
CardBordered container with an opinionated header / content / footer layout. Use it as the wrapper around any self-contained block of content — settings panels, dashboard tiles, list cells.
CarouselHorizontal or vertical scroller with previous/next controls. Built on embla-carousel-react (the official shadcn carousel pattern) and wired through a React context. Drop in images, cards, or any custom slide content.
Cascade Selectcascade-selectHierarchical cascading select where each level selection determines the next level options. Displays the selected path as labels. Supports search, clearable, disabled, and loading states.
Category Distribution Chartcategory-distribution-chartReact mirror of @uipkge/category-distribution-chart — see the Vue registry item for the canonical description.
ChartsMeta-bundle that installs every chart wrapper at once -- 65 charts spanning cartesian (area / bar / stacked-bar / stacked-area / line / range-area / control / slope / scatter / effect-scatter / bubble / quadrant / candlestick / heikin-ashi / range-bar / marimekko / theme-river / waterfall / combo / pareto / polar-bar / pictorial-bar / lollipop / dumbbell / histogram / gantt / bar-race / population-pyramid), circular (pie / donut / nightingale / radar / gauge / segmented-gauge / liquid-fill / progress-ring), hierarchy (treemap / funnel / smooth-funnel / sunburst / icicle / tree), flow (sankey / chord / alluvial / graph / parallel), distribution (boxplot / violin / beeswarm / error-bar / bullet), specialty (heatmap / calendar-heatmap / sparkline / word-cloud / waffle / uptime-tracker / category-distribution), maps (dotted-map / choropleth-map / us-choropleth / us-tile-grid / us-symbol-map), and the raw escape hatch. Each is also installable on its own.
CheckboxStandalone or in-form binary toggle, built on Radix UI. Supports indeterminate state for tri-state lists, sizes, and proper keyboard / screen-reader behavior. Pair with Label for clickable text.
ChipCompact, removable tag — typically used inside `tags-input` or as a filter pill. Seven variants (`default`, `filled`, `outlined`, `elevated`, `success`, `warning`, `destructive`), three sizes, and an optional close button.
Chord Chartchord-chartReact mirror of @uipkge/chord-chart — see the Vue registry item for the canonical description.
Choropleth Map Chartchoropleth-map-chartReact mirror of @uipkge/choropleth-map-chart — see the Vue registry item for the canonical description.
Circular Progresscircular-progressRadial/circular progress indicator. Supports value (0-100), size presets or custom pixel size, stroke thickness, custom arc and track colors, indeterminate spinning mode, a label slot for center content, and a show-value prop that renders the percentage in the center.
ClipboardCopy-to-clipboard button with success/error feedback. Swaps the icon to a check on success, shows a tooltip with configurable feedback text, supports a visible label, disabled state, a custom timeout for feedback reset, and copy/success/error events. Includes a legacy execCommand fallback for non-secure contexts. Composes the tooltip primitive.
Code Blockcode-blockSyntax-highlighted code preview with a language header, copy button, optional line numbers, and collapsible `<pre>` content. Use for installation snippets, API examples, and source you want users to copy verbatim.
CollapsibleHeadless single-region show/hide primitive. Use it when Accordion is overkill — a single toggle reveals one panel of content. Smooth height animation built in.
Color Pickercolor-pickerHex / RGB color input with a popover swatch grid. Supports controlled and uncontrolled modes, alpha channel, and a recent-colors row.
Combo Chartcombo-chartReact mirror of @uipkge/combo-chart — see the Vue registry item for the canonical description.
CommandSearchable command palette à la Cmd-K — keyboard-driven menu with grouped items, icons, shortcuts, and fuzzy filtering. Use as a global launcher (mounted in a Dialog) or inline as a typeahead select.
Context Menucontext-menuRight-click menu — same primitives as Dropdown Menu but triggered by `contextmenu` events. Drop on any element you want to attach row actions, file-system style operations, or copy/paste menus to.
Control Chartcontrol-chartReact mirror of @uipkge/control-chart — see the Vue registry item for the canonical description.
CountdownCountdown timer that shows time remaining to a target date. Digits flip on each tick. Supports DD:HH:MM:SS, HH:MM:SS, MM:SS, and SS formats plus custom token formats, render props for days/hours/minutes/seconds, a label, leading-zero padding, a custom separator, paused state, and on-finish/tick events.
Data Listdata-listVertical key/value list for showing read-only metadata — invoice details, settings summaries, profile fields. Pair items in label/value rows; supports inline edit triggers and trailing actions per row.
Data Tabledata-tableFull-feature table with sorting, filtering, column pinning, pagination, row selection, and an opinionated header/toolbar. Built on TanStack Table — pass `columns` + `data` and configure as needed.
Date Pickerdate-pickerForm date control: trigger + popover + Calendar/RangeCalendar + optional time. Single/multiple/range, week/month/quarter/year pickers, presets, confirm mode, min/max and disabled dates. For an always-visible grid, use Calendar instead.
DialogFree-form modal primitive — composable from `Dialog`, `DialogTrigger`, `DialogContent`, and friends. Use for forms, info cards, pickers, and any custom modal layout. For confirm/destructive prompts, prefer the prebuilt `AlertModal` shortcut.
DockmacOS-style dock menu with magnification on hover. Items expand as the cursor approaches using a cosine bell curve. Supports an items array (icon + label + handler), magnification scale, base size, tooltips on hover, click handlers, and an active state indicator.
Donut Chartdonut-chartReact mirror of @uipkge/donut-chart — see the Vue registry item for the canonical description.
Dotted Map Chartdotted-map-chartReact mirror of @uipkge/dotted-map-chart — see the Vue registry item for the canonical description.
Dropdown Menudropdown-menuFloating menu launched from a trigger button — for account switchers, row actions, editor menus, and any short list of commands. Supports labels, icons, separators, keyboard shortcuts, checkbox/radio items, and nested submenus. Built on Radix UI; ARIA + keyboard navigation handled.
Dumbbell Chartdumbbell-chartReact mirror of @uipkge/dumbbell-chart — see the Vue registry item for the canonical description.
Effect Scatter Charteffect-scatter-chartReact mirror of @uipkge/effect-scatter-chart — see the Vue registry item for the canonical description.
Empty Stateempty-stateCentered placeholder with icon, headline, supporting text, and one or two actions. Drop into empty lists, blank dashboards, and unauthenticated views — the standard "nothing here yet" pattern.
Error Bar Charterror-bar-chartReact mirror of @uipkge/error-bar-chart — see the Vue registry item for the canonical description.
Event Calendarevent-calendarFull-featured event calendar primitive supporting month, week, day, work-week, and category/resource views, timed interval grids with collision clustering, all-day header, live current-time indicator, and customizable event templates.
FabFloating action button — a fixed or absolute positioned circular button for the primary screen action. Supports an icon (default), an extended label variant, mini/large sizes, four color variants, six anchor positions, and a disabled state.
File Uploadfile-uploadDrag-and-drop file dropzone with click-to-browse fallback, file-type filtering, multi-file support, and per-file progress + remove controls. Wraps native `<input type="file">` with proper a11y.
Float Labelfloat-labelFloating label wrapper for any input element. The label floats up when the input is focused or has a value. Wrap it around any input, select, or textarea. Supports required indicator and disabled state.
FormZod-first form block built on React Hook Form. Wires field labels, descriptions, error messages, and validation together; bind a field once and the rest is automatic.
Funnel Chartfunnel-chartReact mirror of @uipkge/funnel-chart — see the Vue registry item for the canonical description.
GanttInteractive Gantt chart primitive with multi-scale timeline (day/week/month/year), collapsible task tree, progress fill, milestone markers, dependency lines, and right-click GanttContextMenu.
Gantt Chartgantt-chartReact mirror of @uipkge/gantt-chart — see the Vue registry item for the canonical description.
Gauge Chartgauge-chartReact mirror of @uipkge/gauge-chart — see the Vue registry item for the canonical description.
Gradient Textgradient-textApplies a CSS gradient as text color via background-clip: text. Supports preset gradients (sunset, ocean, forest, fire, candy, aurora, rainbow, gold, neon, grape), custom from/to colors with a direction, a fully custom CSS gradient string, and an animated mode that shifts the gradient.
Graph Chartgraph-chartReact mirror of @uipkge/graph-chart — see the Vue registry item for the canonical description.
GridResponsive CSS grid container with `cols`, `gap`, and breakpoint props. A small but useful primitive for laying out card grids, KPI tiles, and form sections without writing repetitive Tailwind classes.
HeatmapReact mirror of @uipkge/heatmap — see the Vue registry item for the canonical description.
Heikin Ashi Chartheikin-ashi-chartReact mirror of @uipkge/heikin-ashi-chart — see the Vue registry item for the canonical description.
Hexbin Maphexbin-mapReact mirror of @uipkge/hexbin-map — see the Vue registry item for the canonical description.
HighlightHighlights matching substrings in text for search results. Supports string or regex queries, case-sensitive and whole-word matching, custom highlight tag, and a max-highlight cap.
Histogram Charthistogram-chartReact mirror of @uipkge/histogram-chart — see the Vue registry item for the canonical description.
Hover Cardhover-cardRich popover triggered by hover/focus instead of click. Use for inline previews — user cards on @mentions, link previews, KPI explanations. Built on reka-ui with a configurable open/close delay.
Icicle Charticicle-chartReact mirror of @uipkge/icicle-chart — see the Vue registry item for the canonical description.
Icon Boxicon-boxIcon container primitive with calibrated sizes (2xs to xl), surface variants (solid, outline, subtle, primary, muted), and 2.5D layered IconStack for empty states and feature hero cards.
Icon Transitionicon-transitionAnimated icon swap for click acknowledgements — copy → check, bookmark → bookmark-filled, follow → follower. Pass two icon components and an async `action`; clicking runs the action then springs the active icon in. Auto-reverts after `resetAfter` ms (default 1500), or pass `0` to keep the active icon and call the exposed `reset()` method to flip it back. Renders as a `<button>` by default; use `as="span"` plus the `active` prop when you want an externally controlled, non-interactive icon swap inside another control. Honors `prefers-reduced-motion`.
IconsShowcase + recipe page for the registry’s default icon set (Lucide). Not a runtime component — install the npm package directly. Documented here so consumers can browse names and import recipes.
Image Compareimage-compareBefore/after image comparison slider with a draggable divider. Two images overlaid via clip-path, pointer-driven (mouse + touch), horizontal or vertical orientation, custom handle render prop, labels, and disabled state.
Image Cropperimage-cropperSingle image cropper. Drive look with props: aspectRatio, showZoom, rounded, minZoom, maxZoom, disabled.
Infinite Scrollinfinite-scrollLoad-more-on-scroll sentinel. Calls an onLoadMore callback when the user scrolls near the bottom (or top, in reverse mode). Supports a window or element scroll target, distance threshold, loading/hasMore/disabled gating, and slots for custom loading and end-of-list states.
InputText input — single-line. Three sizes, three variants (outlined / filled / borderless), error / warning status, prefix / suffix nodes, addonBefore / addonAfter, allow-clear, password toggle, char count, and composite InputGroup with addons and action buttons.
Json Tree Viewjson-tree-viewCollapsible JSON tree viewer with color-coded value types, click-to-copy, live search/filter, and expand/collapse-all controls. Renders objects, arrays, and primitives with configurable depth and contained scrolling.
KanbanComposable compound Kanban primitive for building board, pipeline, and agile workflows with tactile card drag-and-drop mechanics.
KbdInline keyboard-key indicator — renders a single key or shortcut in monospace with a subtle bordered chip.
KnobCircular dial input. Drag to rotate, keyboard accessible, SVG-rendered. Useful for compact numeric controls (volume, brightness, gauges).
Kpi Gridkpi-gridBare responsive grid wrapper (2 / 3 / 4 columns). Pass any children — Cards, inline charts, custom tiles. No items prop, no item rendering.
LabelAccessible label primitive — wraps text and binds to its child input via `htmlFor`. Disabled-state styling and proper screen-reader behavior.
Labeled Valuelabeled-valueRead-only label/value pair for surface details — "Email: jane@…" or "Status: Active". Compose them in a Data List, a Stat Card, or a Section Card detail row.
Lazy Imagelazy-imageLazy-loaded image with aspect-ratio reservation, skeleton placeholder, fade-in transition, and error fallback. Composes loading="lazy" with IntersectionObserver for off-viewport hold and pairs with the skeleton primitive for the placeholder state.
Leaflet Mapleaflet-mapA thin, theme-aware Leaflet wrapper rendering free raster tiles (OpenStreetMap, OpenTopoMap, Esri) — no API key required. Drop LeafletMarker / LeafletPopup / LeafletPolyline / LeafletGeoJson into the children to build any map — fleet boards, journey maps, store locators. The base style follows light/dark automatically, an opt-in `muted` prop desaturates the tile pane so overlaid data is the only colour, and `onCreated` hands you the raw L.Map instance for custom layers and fitBounds. The Mapbox counterpart (`map`) adds GL styles, 3D, and globe; this one trades those for zero-key setup. Import `leaflet/dist/leaflet.css` once — the component does it for you.
Line Chartline-chartReact mirror of @uipkge/line-chart — see the Vue registry item for the canonical description.
LinkStyled anchor with router integration. Renders an <a> for href, a router-link for to, and handles external links with target/rel. Supports underline variants (always/hover/none), color variants (default/primary/muted), disabled state, left/right icon slots, size variants, and asChild composition.
Liquid Fill Chartliquid-fill-chartReact mirror of @uipkge/liquid-fill-chart — see the Vue registry item for the canonical description.
ListList and Item row primitives with List, ListItem, ListItemMedia, ListItemContent, ListItemTitle, ListItemDescription, ListItemActions, and ListSubheader for structured rows, settings lists, and feeds.
Loading Barloading-barTop-of-viewport NProgress-style progress bar. Drive it imperatively via the useLoadingBar hook (start/finish/error/inc) or with value/onChange. Supports indeterminate mode, custom color and height, top/bottom anchoring, and an optional trailing spinner.
Lollipop Chartlollipop-chartReact mirror of @uipkge/lollipop-chart — see the Vue registry item for the canonical description.
MapA thin, theme-aware Mapbox GL JS wrapper (built on react-map-gl). Pass an access token and drop MapMarker / MapPopup / MapLayer into the children to build any map — fleet boards, journey maps, store locators. The base style follows light/dark automatically, an opt-in `muted` prop desaturates the basemap so overlaid data is the only colour, and `onCreated` hands you the raw map instance for custom layers and fitBounds. Import `mapbox-gl/dist/mapbox-gl.css` once in your app.
Marimekko Chartmarimekko-chartReact mirror of @uipkge/marimekko-chart — see the Vue registry item for the canonical description.
MarqueeContinuously auto-scrolling content. Scrolls horizontally or vertically in any direction, with configurable speed, gap, repeat count for a seamless loop, pause-on-hover, and a hard pause prop. Respects prefers-reduced-motion.
Masked Inputmasked-inputInput with a fixed format mask — phone numbers, credit cards, dates, postal codes. Pass a mask string (e.g. `(###) ###-####`) and the input enforces it as the user types. Customizable placeholder character and replacement marker.
MentionsTextarea with trigger-character autocomplete and companion MentionTag with Twitter/X-style hover profile card popup.
MenubarTop-level menu bar — File / Edit / View — for desktop-style apps. Same primitives as Dropdown Menu but laid out horizontally and keyboard-navigable across siblings (left/right arrows).
Navigation Menunavigation-menuTop-of-page horizontal navigation with hover/click triggered megamenus. Use for marketing sites and product navs that need rich content — featured links, mini-cards, and submenu columns.
Nightingale Chartnightingale-chartReact mirror of @uipkge/nightingale-chart — see the Vue registry item for the canonical description.
Number Fieldnumber-fieldNumeric input with stepper buttons, min/max bounds, step size, and decimal precision. Use for quantities, prices, and any field that should be a number rather than free text.
Organization Chartorganization-chartOrganization hierarchy visualization with a tree of nodes (name, title, avatar). Expand/collapse branches, top-down or left-right direction, connector lines, optional zoom/pan controls, node click events, and a customizable node render prop.
Overlay Scrolloverlay-scrollSlack-style overlay scrollbar. Hides the native scrollbar so the scrolled content uses the full container width (no gutter reservation), then draws a thin auto-fading thumb absolutely positioned on top. Drag-to-scroll via Pointer Events covers mouse, touch, and pen. Vertical only. The component does not enforce a height — give it a bounded height via the parent (`flex-1 min-h-0` in a flex column, or a fixed `h-*` / `max-h-*`).
PagePage-level layout shell — title row, optional breadcrumbs, action bar, and slotted content well. The standard wrapper for route pages so every screen looks consistent.
PaginationPage-number bar with previous/next, ellipsis collapse, and a configurable visible-window size. Pair with a data-table or any paged list.
Parallel Chartparallel-chartReact mirror of @uipkge/parallel-chart — see the Vue registry item for the canonical description.
Pareto Chartpareto-chartReact mirror of @uipkge/pareto-chart — see the Vue registry item for the canonical description.
Password Inputpassword-inputPassword input with show/hide toggle (Eye/EyeOff) and optional strength meter (weak/fair/good/strong with colored bar). Supports min length display, disabled, placeholder, and size variants.
Payment Cardpayment-cardPremium metallic credit-card visual with embossed type, holographic foil, and per-digit typing animation. Auto-detects brand (Visa, Mastercard, Amex, Discover), flips in 3D, and supports opt-in mouse-parallax tilt and shimmer. Pure presentational — pass typed values in via props.
PhoneFront device frames for iPhone 17 Pro and Galaxy S26 Ultra. Real chassis aspect ratios (71.9×150 / 78.1×163.6), Dynamic Island / punch-hole, side buttons, status bar, home indicator / gesture bar, and official finish colors. Slot in any screen content.
Pictorial Bar Chartpictorial-bar-chartReact mirror of @uipkge/pictorial-bar-chart — see the Vue registry item for the canonical description.
Pie Chartpie-chartReact mirror of @uipkge/pie-chart — see the Vue registry item for the canonical description.
Pin Inputpin-inputOne-time-code input — N separate boxes that auto-advance and accept paste. Use for SMS verification, 2FA, and short numeric codes. Length, masking, and per-slot status all configurable.
Polar Bar Chartpolar-bar-chartReact mirror of @uipkge/polar-bar-chart — see the Vue registry item for the canonical description.
PopoverClick-triggered floating panel anchored to a trigger element. Supports optional localStorage persistence and configurable dismissal (click-outside, escape, manual). Built on @radix-ui/react-popover with collision detection.
Population Pyramid Chartpopulation-pyramid-chartReact mirror of @uipkge/population-pyramid-chart — see the Vue registry item for the canonical description.
ProgressLinear progress bar — determinate or indeterminate. Two visual densities (slim, default), four tones, and an optional inline percentage label.
Progress Itemprogress-itemLabeled progress row — item name on the left, progress bar in the middle, percent or count on the right. Use for batched task lists, file upload queues, or onboarding checklists.
Progress Linearprogress-linearTop-of-screen page-loading bar (à la NProgress / nuxt loading-indicator). Auto-advances while a navigation or fetch is in flight, then completes. Drop into the app shell once.
Progress Ring Chartprogress-ring-chartReact mirror of @uipkge/progress-ring-chart — see the Vue registry item for the canonical description.
Qr Codeqr-codeQR code renderer — pass `value` and a size, get a canvas PNG or SVG. Useful for sign-in links, share URLs, and Wi-Fi credentials. Depends on the `qrcode` package.
Quadrant Chartquadrant-chartReact mirror of @uipkge/quadrant-chart — see the Vue registry item for the canonical description.
QuestionnaireSingle multi-step question component. Pass items, shortcuts, and showProgress — variants are props, not extra files.
Radar Chartradar-chartReact mirror of @uipkge/radar-chart — see the Vue registry item for the canonical description.
Radio Groupradio-groupSingle-selection group of radio inputs. Vertical or horizontal layout, optional descriptions per item, and full keyboard navigation. Pair with Form for validation messages.
Range Area Chartrange-area-chartReact mirror of @uipkge/range-area-chart — see the Vue registry item for the canonical description.
Range Bar Chartrange-bar-chartReact mirror of @uipkge/range-bar-chart — see the Vue registry item for the canonical description.
Range Calendarrange-calendarInline from→to calendar grid. Click two dates; the range fills between. For a form field with a trigger, use Date Picker type="range" instead. Same min/max and disabled-date support as Calendar.
Range Sliderrange-sliderTwo-thumb range slider for "between X and Y" inputs — price filters, age ranges, time windows. Built on @radix-ui/react-slider with proper keyboard handling and aria-valuetext.
RatingStar (or custom icon) rating control — pick a value from 1 to N. Read-only mode for displaying review averages, with half-step support.
Raw Chartraw-chartReact mirror of @uipkge/raw-chart — see the Vue registry item for the canonical description.
Relative Timerelative-timeLive relative timestamp — "2 minutes ago", "yesterday", "in 3 days" — via Intl.RelativeTimeFormat. `display` switches the label to relative, absolute, or both. `timeZone` (IANA or `UTC`) formats the clock and tooltip; omit it for the browser local zone. `parseAs` treats naive ISO strings as local or UTC. Renders a semantic <time>. Pass `now` to freeze the clock for tests and SSR.
ResizableDrag-to-resize panel layout — horizontal or vertical splits with persistent sizes. Use for IDE-style sidebars, split views, and any layout the user should be able to reshape.
Rich Text Editorrich-text-editorWYSIWYG editor wrapped around TipTap — bold/italic/links/lists/headings/blockquote/code, plus a configurable toolbar. Drop into forms where Markdown is too low-level.
Route Flow Maproute-flow-mapReact mirror of @uipkge/route-flow-map — see the Vue registry item for the canonical description.
Sankey Chartsankey-chartReact mirror of @uipkge/sankey-chart — see the Vue registry item for the canonical description.
Scatter Chartscatter-chartReact mirror of @uipkge/scatter-chart — see the Vue registry item for the canonical description.
Scroll Areascroll-areaCustom scrollbar that always renders the same way across OSes (no flashing native scrollbars on Windows). Use for sidebars, dropdown content, and any overflow region you want to feel consistent.
Scroll Progressscroll-progressSlim reading-progress bar pinned to the top of the viewport or of any supplied scrollable container. Scales horizontally with scroll depth; supports fixed and absolute (contained) modes, lerp smoothing with a prefers-reduced-motion fallback, custom thickness, and any CSS color or gradient.
ScrollSpyscroll-spyIn-page navigation list with scroll-spy. Renders a vertical list of links; the active item highlights as the user scrolls through anchored sections.
Section Cardsection-cardCard variant tuned for settings pages — title, description, and content slots, with optional footer for save/cancel actions. The block-level building block for `.../settings/*` routes.
Segmented Gaugesegmented-gaugeReact mirror of @uipkge/segmented-gauge.
SelectDropdown select primitive — single-select with optional groups, per-item descriptions, Radix UI popover mode, and zero-JS styled NativeSelect for lightweight/mobile use.
SeparatorHorizontal or vertical visual divider — a `<div>` with the right ARIA role and a registry-token border color. Use between sections, list rows, and toolbar groups.
SheetSide-mounted modal that slides in from the top, right, bottom, or left edge. Use for filter panels, edit drawers, and mobile menus.
SidebarFull-height app sidebar — collapsible to icons, with grouping, sub-grouping, and integrated search. The navigation surface for product apps with many sections.
Signature Padsignature-padCanvas-based digital signature capture with pointer events (mouse + touch). The value is a PNG data URL, with pen color/thickness, background, clear method, disabled/readonly states, and a live point count.
SkeletonAnimated placeholder rectangles for loading states — drop one in shape of the content that’s about to render. Variants for text lines, avatars, rounded rectangles, and circles.
SliderSingle-thumb slider — pick a value within a range. Optional tick marks, step size, and inline value display.
Slope Chartslope-chartReact mirror of @uipkge/slope-chart — see the Vue registry item for the canonical description.
Smooth Funnelsmooth-funnelReact mirror of @uipkge/smooth-funnel.
SonnerToast notification system — non-blocking, auto-dismissing alerts that stack in a corner. Built on the `sonner` library with the registry’s tokens applied.
SparklineReact mirror of @uipkge/sparkline — see the Vue registry item for the canonical description.
Speed Dialspeed-dialExpanding floating action button that reveals a list of secondary action buttons. Supports click or hover triggers, four expansion directions (up/down/left/right), staggered entrance animation, a configurable main FAB icon, and close-on-action. Built on the fab and popover primitives.
SpinnerLightweight loading indicator — circular spinner with three sizes and tone variants. Use inside buttons (replacing the icon when an action is in flight) or as a centered page loader.
Stacked Area Chartstacked-area-chartReact mirror of @uipkge/stacked-area-chart — see the Vue registry item for the canonical description.
Stacked Bar Chartstacked-bar-chartReact mirror of @uipkge/stacked-bar-chart — see the Vue registry item for the canonical description.
StepperMulti-step indicator — horizontal or vertical, with completed / current / upcoming states and optional descriptions per step. Use for onboarding wizards and checkout flows.
Sunburst Chartsunburst-chartReact mirror of @uipkge/sunburst-chart — see the Vue registry item for the canonical description.
SwitchOn/off toggle — visual analog of a hardware switch. Use for binary settings where the change takes effect immediately, not for form fields that submit later (use Checkbox there).
TablePlain HTML table primitives — `<Table>`, `<TableHeader>`, `<TableRow>`, `<TableCell>` — with the registry’s borders, padding, and tokens already applied. Use this when Data Table is too heavy.
TabsHorizontal tab navigation with content panels — pick one panel at a time. Underline or pills variants. Built on Radix UI with full keyboard navigation.
Tags Inputtags-inputMulti-tag input — type a value, hit Enter, get a Chip. Backspace removes the last tag. Use for email recipient lists, tag sets, and free-form keyword inputs.
TerminalTerminal/command-line display with a macOS-style title bar, command history, prompt character, dark/light themes, auto-scroll, optional typing animation, and a line slot for custom formatting.
Text Revealtext-revealScroll-triggered staggered entrance for text — each word or character fades in, rises and un-blurs with a per-index delay. IntersectionObserver based, `once` toggle for replay-on-scroll, honors prefers-reduced-motion.
TextareaMulti-line text input. Auto-resize variant, character counter, and the same ring/border treatment as the rest of the form primitives.
Theme Rivertheme-riverReact mirror of @uipkge/theme-river — see the Vue registry item for the canonical description.
Theme Switchtheme-switchLight / dark / system theme toggle — drop in the header. Seven visual variants: `cards`, `icons`, `icon-only`, `dropdown`, `pill`, `pill-4`, and `switch`. Persists choice to `localStorage` and respects `prefers-color-scheme` for `system`.
Time Pickertime-pickerStandalone time input — hours, minutes, optional seconds, and 12h/24h modes. Pairs with Date Picker for full datetime entry.
TimelineVertical or horizontal sequence of events with connectors and node markers. Statuses (pending, current, completed, failed) tint the connector. Use for activity feeds, audit logs, and progress tracking.
ToggleOn/off button (different from Switch — this is shaped like a button and lives in toolbars). Three sizes, two variants. Use inside Toggle Group or standalone for "press to enable" buttons like bold / italic.
Toggle Grouptoggle-groupGroup of `Toggle` buttons that act as a single-select or multi-select control. Use for view-mode pickers (grid/list), text-format toolbars, and any "pick one of N" button bar.
TooltipSmall popover triggered by hover/focus, used for short labels — icon-button names, abbreviation expansions, keyboard shortcuts. Auto-positions and respects `prefers-reduced-motion`.
TourMulti-step guided overlay walkthrough. Highlights a target element with a dim mask cutout and shows a card next to it. Steps support targets by selector, ref, or function; centered (no-target) steps work as modal-style intros.
TransferDual-list move-between control. Two columns plus a center pair of move buttons. Optional search, pagination, and one-way mode.
Tree Charttree-chartReact mirror of @uipkge/tree-chart — see the Vue registry item for the canonical description.
Tree Selecttree-selectSelect from tree-structured data with expand/collapse nodes, single or multi-select with checkboxes, and search filtering. Dropdown shows a nested tree; parent selection cascades to leaf descendants.
Tree Tabletree-tableHierarchical data table with expandable parent/child rows. Supports tree-structured data, column configuration, expand/collapse with per-level indent, row selection checkboxes, a loading overlay, and an empty state. Built on the existing table primitives.
Tree Viewtree-viewIndented tree of expandable nodes — file browsers, taxonomy editors, nested settings. Discord-style elbow connectors, lazy-load branches, and full keyboard navigation.
Treemap Charttreemap-chartReact mirror of @uipkge/treemap-chart — see the Vue registry item for the canonical description.
TypewriterTypes text character-by-character with a blinking caret, optionally cycling through multiple phrases (type -> pause -> delete -> next). Configurable typing/deleting speeds, completion pause, start delay, looping, and caret visibility. Renders empty on the server for hydration-safe SSR, restarts when `phrases` changes, and shows phrases in full under `prefers-reduced-motion`.
Uptime Tracker Chartuptime-tracker-chartReact mirror of @uipkge/uptime-tracker-chart — see the Vue registry item for the canonical description.
Vector Mapvector-mapReact mirror of @uipkge/vector-map — see the Vue registry item for the canonical description.
Vertical Tabsvertical-tabsSettings-page navigation pattern — labels stack on the left, content panel on the right. Same API as Tabs but with a vertical orientation. Use for dense, multi-section settings UIs.
VideoVideo player wrapper with a custom controls overlay on a native video element. Supports src, poster, autoplay, loop, muted, custom or native controls, playback rate, fullscreen, time display, a progress bar, play/pause, skip, and volume control.
Violin Chartviolin-chartReact mirror of @uipkge/violin-chart — see the Vue registry item for the canonical description.
Virtual Listvirtual-listGeneric windowed scroller. Renders only visible items plus a small overscan, with fixed or dynamic item sizes. Use for long lists where most rows are off-screen.
Waffle Chartwaffle-chartReact mirror of @uipkge/waffle-chart — see the Vue registry item for the canonical description.
Waterfall Chartwaterfall-chartReact mirror of @uipkge/waterfall-chart — see the Vue registry item for the canonical description.
WatermarkOverlay watermark that repeats text or an image across the content area at a configurable angle. Supports rotate angle, gap between repeats, opacity, font size/color/weight, z-index, and pointer-event control. Wrap any content via children.
Word Cloud Chartword-cloud-chartReact mirror of @uipkge/word-cloud-chart — see the Vue registry item for the canonical description.
Xml Tree Viewxml-tree-viewCollapsible XML tree viewer with color-coded tags and attributes, click-to-copy, live search/filter, and expand/collapse-all controls. Parses XML strings and renders elements, text, comments, and CDATA with contained scrolling.