Components Overview

Clidey UX ships composable UI components, a theme system, and a shared icon catalog. All components are available with a single import from @clidey/ux.

TSX

import { Button, Card, Input, Badge } from '@clidey/ux';

Try the components#

Clicked 0 times

These are actual UX buttons. Click them or use Tab, Enter, and Space.

Actions#

Button

Primary action element with 6 variants (default, destructive, outline, secondary, ghost, link) and 4 sizes.

ButtonGroup

Groups multiple buttons together with connected borders. Supports horizontal and vertical orientation.

Inputs#

Input

Text input with optional password toggle, plus SearchInput and TextArea variants.

Checkbox

Accessible checkbox with checked, unchecked, and disabled states.

Switch

Toggle switch for boolean options with smooth animation.

Select

Dropdown selector plus a SearchSelect with search filtering and icon support.

Label

Accessible form label that links to its associated control.

Display#

Badge

Small status or category label with 4 variants.

Card

Container with header, title, description, action, content, and footer sub-components.

Alert

Contextual feedback message with default and destructive variants.

Spinner

Animated loading indicator with 5 color variants and 3 sizes.

Skeleton

Pulsing placeholder for loading states.

Progress

Linear progress bar with configurable value.

EmptyState

Placeholder UI for empty lists, results, or data sets.

Separator

Horizontal or vertical divider line.

Tabs

Tab navigation for switching between content sections.

Breadcrumb

Hierarchical navigation path with ellipsis support.

Pagination

Page navigation with previous/next and numbered links.

Sidebar

Full-featured sidebar with collapsible menus, submenus, mobile support, and multiple variants.

Overlays#

Dialog

Modal dialog with overlay, title, description, and close button.

AlertDialog

Blocking confirmation dialog for destructive or critical actions.

Drawer

Slide-out panel from any screen edge (top, bottom, left, right).

Sheet

Side panel overlay with directional variants.

Tooltip

Small label appearing on hover for supplementary information.

Popover

Floating panel anchored to a trigger element.

Menus#

DropdownMenu

Menu triggered by a button with items, checkboxes, radio groups, and sub-menus.

ContextMenu

Right-click context menu with the same rich item types.

Command

Fast command palette with search, groups, and keyboard navigation.

Layout#

Accordion

Collapsible sections with animated expand/collapse and chevron rotation.

Resizable

Resizable panel layout system for split views.

ScrollArea

Custom scrollable container with styled scrollbar.

StackList

Key-value pair list with separators for metadata display.

Data & Visualization#

Table

Full-featured table with virtualization support for large datasets and JSON preview drawer.

Chart

Recharts wrapper with consistent theming, tooltips, and legend.

Tree

Hierarchical tree/file explorer with expand/collapse and item selection.

Map

Declarative MapLibre GL components for markers, lines, arcs, polygons, circle layers, and heatmaps.

Utilities#

Icon

Wrapper for SVG icons with consistent sizing.

Toaster

Toast notification system powered by Sonner with automatic theme support.

Was this page helpful?