{showImage && (
),
);
SkeletonCard.displayName = "SkeletonCard";
export {
Skeleton,
SkeletonText,
SkeletonAvatar,
SkeletonButton,
SkeletonCard,
skeletonVariants,
};
```
npmpnpmyarnbun
```
npx hextaui@latest add skeleton
```
```
pnpm dlx hextaui@latest add skeleton
```
```
yarn dlx hextaui@latest add skeleton
```
```
bun x hextaui@latest add skeleton
```
## [Usage](https://www.hextaui.com/docs/ui/components/skeleton\#usage)
```
import {
Skeleton,
SkeletonText,
SkeletonAvatar,
SkeletonButton,
SkeletonCard,
} from "@/components/ui/Skeleton";
```
```
{showHeader && (
{/* Full card with image, header, content, and footer */}
{/* Card without footer */}
```
### [Profile Card Skeleton](https://www.hextaui.com/docs/ui/components/skeleton\#profile-card-skeleton)
PreviewCode
### Profile Card
```
{Array.from({ length: 3 }).map((_, i) => (
```
### [Data Table Skeleton](https://www.hextaui.com/docs/ui/components/skeleton\#data-table-skeleton)
PreviewCode
### Data Table
```
{/* Header */}
Circle
Secondary
Custom Size
No Shimmer
{/* Header */}
```
## [Props](https://www.hextaui.com/docs/ui/components/skeleton\#props)
| Prop | Type | Default |
| --- | --- | --- |
| `className?` | `string` | `undefined` |
| `shimmer?` | `boolean` | `true` |
| `duration?` | `number` | `2` |
| `height?` | `string | number` | `undefined` |
| `width?` | `string | number` | `undefined` |
| `size?` | `"sm" | "default" | "lg" | "xl" | "2xl"` | `"default"` |
| `variant?` | `"default" | "secondary" | "text" | "circle" | "avatar"` | `"default"` |
### [SkeletonCard Props](https://www.hextaui.com/docs/ui/components/skeleton\#skeletoncard-props)
| Prop | Type | Default |
| --- | --- | --- |
| `showFooter?` | `boolean` | `true` |
| `showHeader?` | `boolean` | `true` |
| `showImage?` | `boolean` | `true` |
[Edit on GitHub](https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/skeleton.mdx)
Last updated on 6/23/2025
[Sidebar\\
\\
A flexible and responsive sidebar component with animations, collapsible behavior, and comprehensive customization options.](https://www.hextaui.com/docs/ui/components/sidebar) [Slider\\
\\
A customizable range input component for selecting numeric values with multiple variants and sizes.](https://www.hextaui.com/docs/ui/components/slider)
### On this page
[Installation](https://www.hextaui.com/docs/ui/components/skeleton#installation) [Usage](https://www.hextaui.com/docs/ui/components/skeleton#usage) [Examples](https://www.hextaui.com/docs/ui/components/skeleton#examples) [Basic Skeleton](https://www.hextaui.com/docs/ui/components/skeleton#basic-skeleton) [Avatar Skeletons](https://www.hextaui.com/docs/ui/components/skeleton#avatar-skeletons) [Button Skeletons](https://www.hextaui.com/docs/ui/components/skeleton#button-skeletons) [Card Skeleton](https://www.hextaui.com/docs/ui/components/skeleton#card-skeleton) [Profile Card Skeleton](https://www.hextaui.com/docs/ui/components/skeleton#profile-card-skeleton) [Article List Skeleton](https://www.hextaui.com/docs/ui/components/skeleton#article-list-skeleton) [Data Table Skeleton](https://www.hextaui.com/docs/ui/components/skeleton#data-table-skeleton) [Custom Variants](https://www.hextaui.com/docs/ui/components/skeleton#custom-variants) [Loading States](https://www.hextaui.com/docs/ui/components/skeleton#loading-states) [Props](https://www.hextaui.com/docs/ui/components/skeleton#props) [SkeletonCard Props](https://www.hextaui.com/docs/ui/components/skeleton#skeletoncard-props)
Psst, here! If you like my work, consider buying me a coffee. ☕
## Checkbox Component
[Build websites 10x faster with HextaUI Blocks —Learn more](https://pro.hextaui.com/blocks)
UI/UI
# Checkbox
A customizable checkbox component with smooth animations and multiple states.
PreviewCode
Default checkbox
Checked checkbox
Indeterminate checkbox
Disabled checkbox
Disabled checked
```
{Array.from({ length: 6 }).map((_, i) => (
{/* Tags */}
{Array.from({ length: 3 }).map((_, i) => (
{label && (
)}
{description && (
)}
{description}
)}{error}
)}
{items.map((item) => (
handleItemChange(item.id, !!checked)}
/>
))}
Select your skills:
{skills.map((skill) => (
handleSkillChange(skill.id, !!checked)}
/>
))}
{selectedSkills.length > 0 && (
Selected: {selectedSkills.join(", ")}
)}
autoHide && isPlaying && setShowControlsState(false)
}
tabIndex={0}
>
{" "}
{showControls && (
<>
{/* Play/Pause Overlay - Only visible when not playing or on hover */}
)}
);
},
);
VideoPlayer.displayName = "VideoPlayer";
export { VideoPlayer, videoPlayerVariants };
```
npmpnpmyarnbun
```
npx hextaui@latest add video-player
```
```
pnpm dlx hextaui@latest add video-player
```
```
yarn dlx hextaui@latest add video-player
```
```
bun x hextaui@latest add video-player
```
## [Usage](https://www.hextaui.com/docs/ui/components/video-player\#usage)
```
import { VideoPlayer } from "@/components/ui/VideoPlayer";
```
```
{" "}
{/* Controls Bar */}
{/* Progress Bar */}
{formatTime(currentTime)}
{/* Control Buttons */}
{" "}
{
e.stopPropagation();
handleSeek(e);
}}
className="w-full h-1 bg-white/30 rounded-full appearance-none cursor-pointer
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white
[&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:cursor-pointer
[&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-200
group-hover/progress:[&::-webkit-slider-thumb]:scale-125"
style={{
background: `linear-gradient(to right, #ffffff 0%, #ffffff ${
(currentTime / duration) * 100
}%, rgba(255,255,255,0.3) ${
(currentTime / duration) * 100
}%, rgba(255,255,255,0.3) 100%)`,
}}
/>
{formatTime(duration)}
{" "}
{" "}
{" "}
{" "}
{
e.stopPropagation();
handleVolumeChange(e);
}}
className="w-full h-1 bg-white/30 rounded-full appearance-none cursor-pointer
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-2 [&::-webkit-slider-thumb]:h-2
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white
[&::-webkit-slider-thumb]:cursor-pointer"
style={{
background: `linear-gradient(to right, #ffffff 0%, #ffffff ${
(isMuted ? 0 : volume) * 100
}%, rgba(255,255,255,0.3) ${
(isMuted ? 0 : volume) * 100
}%, rgba(255,255,255,0.3) 100%)`,
}}
/>
{" "}
{tags.map((tag, index) => (
removeTag(tag)}
className="pointer-events-auto"
>
{tag}
))}
= maxTags : false)}
className="flex-1 min-w-[120px] bg-transparent outline-none placeholder:text-[hsl(var(--hu-muted-foreground))] disabled:cursor-not-allowed"
{...props}
/>
{Icon && iconPosition === "left" && (
);
}
);
Chip.displayName = "Chip";
export { Chip, chipVariants };
```
npmpnpmyarnbun
```
npx hextaui@latest add chip
```
```
pnpm dlx hextaui@latest add chip
```
```
yarn dlx hextaui@latest add chip
```
```
bun x hextaui@latest add chip
```
## [Usage](https://www.hextaui.com/docs/ui/components/chip\#usage)
```
import { Chip } from "@/components/ui/Chip";
```
```
Technologies
Team Members
Product Tags
Selected Filters
Event Attendees
{text}
);
}
```
npmpnpmyarnbun
```
npx shadcn@latest add "https://21st.dev/r/hextaui/animated-underline"
```
```
pnpm dlx shadcn@latest add "https://21st.dev/r/hextaui/animated-underline"
```
```
yarn dlx shadcn@latest add "https://21st.dev/r/hextaui/animated-underline"
```
```
bun x shadcn@latest add "https://21st.dev/r/hextaui/animated-underline"
```
## [Usage](https://www.hextaui.com/docs/og-blocks/text/animated-underline\#usage)
```
import { AnimatedUnderline } from "@/components/ui/AnimatedUnderline";
```
```
Ready to build something amazing?
Join thousands of developers who are already using HextaUI to create stunning websites with less effort. Start building today!
preett
{children}
HextaStudio
{tabs.map((tab) => {
const isActive = activeTabId === tab.id;
const Icon = tab.icon;
return (
setActiveTabId(tab.id)}
initial={false}
animate={{
width: isActive ? 140 : 50,
}}
transition={{
type: "spring",
stiffness: 400,
damping: 30,
}}
>
{isActive && (
{tab.label}
)}
);
})}
);
};
```
npmpnpmyarnbun
```
npx shadcn@latest add "https://21st.dev/r/hextaui/expandable-tabs"
```
```
pnpm dlx shadcn@latest add "https://21st.dev/r/hextaui/expandable-tabs"
```
```
yarn dlx shadcn@latest add "https://21st.dev/r/hextaui/expandable-tabs"
```
```
bun x shadcn@latest add "https://21st.dev/r/hextaui/expandable-tabs"
```
## [Usage](https://www.hextaui.com/docs/og-blocks/application/expandable-tabs\#usage)
```
import { ExpandableTabs, type TabItem } from "@/components/ui/expandable-tabs";
import { Zap, User, Sparkles, Mail } from "lucide-react";
```
```
export const ExpandableTabsDemo = () => {
const tabs: TabItem[] = [\
{\
id: "important",\
icon: Zap,\
label: "Important",\
color: "bg-blue-600",\
},\
{\
id: "profile",\
icon: User,\
label: "Profile",\
color: "bg-pink-500",\
},\
{\
id: "features",\
icon: Sparkles,\
label: "Features",\
color: "bg-pink-600",\
},\
{\
id: "messages",\
icon: Mail,\
label: "Messages",\
color: "bg-purple-500",\
},\
];
return (
<>
{tooltipText}
}
clearable
/>
}
/>
}
clearable
/>
```
### [Form Layout Examples](https://www.hextaui.com/docs/ui/components/label\#form-layout-examples)
PreviewCode
Email\*
Password\*
Confirm Password\*
Bio(optional)
```
```
### [Disabled State](https://www.hextaui.com/docs/ui/components/label\#disabled-state)
PreviewCode
Disabled Field
Disabled Required Field\*
```
Content above separator
Home
Content above
Content below
Content above
Content below
Content above
Content below
Left content
```
### [Sizes](https://www.hextaui.com/docs/ui/components/separator\#sizes)
PreviewCode
Small (1px)
Medium (2px)
Large (4px)
```
Home
```
### [Text Variants](https://www.hextaui.com/docs/ui/components/separator\#text-variants)
PreviewCode
Different text examples
OR
AND
Continue with
More options
Vertical text separator
Option A
OR
Option B
```
{/* Horizontal text separators */}
Option A
Option B
{avatarsToShow.map((child, index) => {
if (React.isValidElement(child)) {
return React.cloneElement(child, {
key: index,
size,
className: cn(
"border-2 border-[hsl(var(--hu-background))]",
(child.props as any)?.className,
),
} as any);
}
return child;
})}
{remainingCount > 0 && (
+{remainingCount}
)}
);
},
);
AvatarGroup.displayName = "AvatarGroup";
export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants };
export type { AvatarGroupProps };
```
npmpnpmyarnbun
```
npx hextaui@latest add avatar
```
```
pnpm dlx hextaui@latest add avatar
```
```
yarn dlx hextaui@latest add avatar
```
```
bun x hextaui@latest add avatar
```
## [Usage](https://www.hextaui.com/docs/ui/components/avatar\#usage)
```
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar";
```
```
Default Group (max 3)
Large Group (max 5)
Tight Spacing
Normal Spacing
Loose Spacing
Ctrl
⌘
Shift
Alt
Enter
Esc
Space
Tab
```
## [Installation](https://www.hextaui.com/docs/ui/components/kbd\#installation)
ManualCLI
Install following dependencies:
npmpnpmyarnbun
```
npm install pnpm add class-variance-authority
```
```
pnpm add pnpm add class-variance-authority
```
```
yarn add pnpm add class-variance-authority
```
```
bun add pnpm add class-variance-authority
```
Copy and paste the following code into your project.
components/ui/kbd.tsx
```
"use client";
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const kbdVariants = cva(
"inline-flex items-center justify-center font-mono text-xs bg-[hsl(var(--hu-muted))] text-[hsl(var(--hu-muted-foreground))] border border-[hsl(var(--hu-border))] rounded-md border-b-3 transition-all duration-75 cursor-pointer select-none active:translate-y-[1px] active:border-b-[1px] hover:bg-[hsl(var(--hu-muted))]/80 shadow-sm/2",
{
variants: {
variant: {
default:
"bg-[hsl(var(--hu-muted))] text-[hsl(var(--hu-muted-foreground))] border-[hsl(var(--hu-border))]",
outline:
"bg-transparent border-[hsl(var(--hu-border))] text-[hsl(var(--hu-foreground))] hover:bg-[hsl(var(--hu-accent))]",
solid:
"bg-[hsl(var(--hu-foreground))] text-[hsl(var(--hu-background))] border-[hsl(var(--hu-foreground))] hover:bg-[hsl(var(--hu-foreground))]/90",
secondary:
"bg-[hsl(var(--hu-secondary))] text-[hsl(var(--hu-secondary-foreground))] border-[hsl(var(--hu-border))] hover:bg-[hsl(var(--hu-secondary))]/80",
},
size: {
xs: "h-5 px-1.5 text-[10px] min-w-[1.25rem]",
sm: "h-6 px-2 text-xs min-w-[1.5rem]",
md: "h-7 px-2.5 text-sm min-w-[1.75rem]",
lg: "h-8 px-3 text-sm min-w-[2rem]",
},
},
defaultVariants: {
variant: "default",
size: "sm",
},
},
);
export interface KbdProps
extends React.HTMLAttributes
Press
Enter
to submit
```
### [Sizes](https://www.hextaui.com/docs/ui/components/kbd\#sizes)
PreviewCode
`Ctrl` `Ctrl` `Ctrl` `Ctrl`
```
Ctrl
Ctrl
Ctrl
Ctrl
```
### [Variants](https://www.hextaui.com/docs/ui/components/kbd\#variants)
PreviewCode
`Default` `Outline` `Solid` `Secondary`
```
Default
Outline
Solid
Secondary
```
### [Key Combinations](https://www.hextaui.com/docs/ui/components/kbd\#key-combinations)
PreviewCode
Save:`Ctrl` + `S`
Copy:`⌘` + `C`
Select All:`Ctrl` + `Shift` + `A`
Force Quit:`⌘` + `⌥` + `Esc`
```
Save:
Copy:
Select All:
Force Quit:
Undo
Redo
Find
Replace
New Tab
Close Tab
Refresh
F5
Dev Tools
F12
{Array.from({ length: 12 }, (_, i) => (
F{i + 1}
))}
```
### [Arrow Keys](https://www.hextaui.com/docs/ui/components/kbd\#arrow-keys)
PreviewCode
`↑`
`←` `↓` `→`
```
↑
```
### [Special Characters](https://www.hextaui.com/docs/ui/components/kbd\#special-characters)
PreviewCode
Command: `⌘`
Option: `⌥`
Shift: `⇧`
Control: `⌃`
Return: `↩`
Delete: `⌫`
```
←
↓
→
Command:
⌘
Option:
⌥
Shift:
⇧
Control:
⌃
Return:
↩
Delete:
⌫
{showFormatSelector && (
Format
)}{" "}
{formatLabels[currentFormat]} Value
handleInputChange(e.target.value)}
placeholder={getFormatPlaceholder(currentFormat)}
/>
{showEyeDropper &&
{presets.length > 0 && (
Current color: {color}
Article:
Published
React
Tutorial
User:
Premium
Admin
Issue:
Critical
Bug
P1
Status:
Active
Created:
Jan 20, 2024
Members:
5 people
A
{collapsed ? (
// Show only toggle button when collapsed
collapsible && (
)
) : (
// Show header content and toggle button when expanded
<>
{headerChild && (
{headerChild}
)}
{collapsible && (
)}
)}
)}
{/* Body */}
{bodyChild}
{/* Footer */}
{footerChild && (
{footerChild}
)}
{badge}
{hasChildren && (
)}
)}
{/* Tooltip for collapsed state */}
{collapsed && (
{label}
)}
);
return (
-
{React.Children.map(children, (child) => {
if (React.isValidElement(child) && child.type === SidebarItem) {
return React.cloneElement(
child as React.ReactElement
{children}
{children}
);
};
const SidebarFooter: React.FC<{
children: React.ReactNode;
className?: string;
}> = ({ children, className }) => {
return {children}
;
};
const SidebarSeparator: React.FC<{
className?: string;
children?: React.ReactNode;
}> = ({ className, children }) => {
const { collapsed } = useSidebar();
if (collapsed && children) {
// In collapsed mode, just show the separator without text
return (
Welcome to HextaUI
This is the main content area. The sidebar will affect the width of this content.
{getModifierKey().symbol}
K
)}
{children}
{heading && (
));
CommandMenuGroup.displayName = "CommandMenuGroup";
// Individual command item
const CommandMenuItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes
{heading}
)}
{children}
setSelectedIndex(index)}
{...props}
>
{icon && (
);
}
);
CommandMenuItem.displayName = "CommandMenuItem";
// Separator between groups
const CommandMenuSeparator = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes{icon}
)}
{children}
{shortcut && (
{shortcut.split("+").map((key, i) => (
{i > 0 && (
+
)}
{key === "cmd" || key === "⌘"
? getModifierKey().symbol
: key === "shift"
? "⇧"
: key === "alt"
? "⌥"
: key === "ctrl"
? getModifierKey().key === "cmd"
? "⌃"
: "Ctrl"
: key}
))}
)}
{children}
));
CommandMenuEmpty.displayName = "CommandMenuEmpty";
// Hook for global keyboard shortcut
export const useCommandMenuShortcut = (callback: () => void) => {
React.useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
callback();
}
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [callback]);
};
export {
CommandMenu,
CommandMenuTrigger,
CommandMenuContent,
CommandMenuTitle,
CommandMenuDescription,
CommandMenuInput,
CommandMenuList,
CommandMenuEmpty,
CommandMenuGroup,
CommandMenuItem,
CommandMenuSeparator,
CommandMenuClose,
useCommandMenu,
};
```
Use the CLI to add the component to your project:
npmpnpmyarnbun
```
npx hextaui@latest@latest add command-menu
```
```
pnpm dlx hextaui@latest@latest add command-menu
```
```
yarn dlx hextaui@latest@latest add command-menu
```
```
bun x hextaui@latest@latest add command-menu
```
## [Usage](https://www.hextaui.com/docs/ui/components/command-menu\#usage)
```
import * as React from "react";
import {
CommandMenu,
CommandMenuTrigger,
CommandMenuContent,
CommandMenuInput,
CommandMenuList,
CommandMenuGroup,
CommandMenuItem,
useCommandMenuShortcut,
} from "@/components/ui/command-menu";
import { Button } from "@/components/ui/button";
import { Search, Settings, User } from "lucide-react";
```
```
export const BasicCommandMenu = () => {
const [open, setOpen] = React.useState(false);
useCommandMenuShortcut(() => setOpen(true));
return (
{item.name}
{item.type}
Experience the perfect blend of aesthetics and functionality with our comprehensive component library.
Card content goes here.
Push Notifications
Send notifications to device.
Default card content with standard border.
Outline card with emphasized border.
Ghost card with no border or shadow.
Small card with reduced padding.
Default card with standard padding.
Large card with increased padding.
}
/>
Welcome!
This is a simple card without header or footer.
{" "}
{children}
);
};
```
npmpnpmyarnbun
```
npx shadcn@latest add "https://21st.dev/r/hextaui/spotlight-card"
```
```
pnpm dlx shadcn@latest add "https://21st.dev/r/hextaui/spotlight-card"
```
```
yarn dlx shadcn@latest add "https://21st.dev/r/hextaui/spotlight-card"
```
```
bun x shadcn@latest add "https://21st.dev/r/hextaui/spotlight-card"
```
## [Usage](https://www.hextaui.com/docs/og-blocks/animation/spotlight-card\#usage)
```
import { SpotlightCard } from "@/components/ui/spotlight-card";
```
```
Optimized for performance with minimal bundle size. Build fast, responsive
websites without compromise.
Loading content...
Fetching data...
Please wait while we process your request{" "}
Status:
Upload progress: