# Icona
URL: /docs/icona
## Overview
Icona is a comprehensive icon library featuring over 200 icon sets from popular collections including Font Awesome, Material Design, Lucide, and many more. Each icon is available as an SVG that you can customize with colors, sizes, and transformations.
## Features
* **200+ Icon Sets** - Access to thousands of professional icons from popular libraries
* **Real-time Search** - Quickly find the perfect icon for your project
* **SVG Editor** - Customize icons with colors, sizes, and transformations
* **Copy & Download** - Easy one-click copying or downloading of customized icons
* **Zero Dependencies** - Pure SVG icons that work anywhere
## How to Use
1. **Browse Categories** - Select from 200+ icon categories using the dropdown menu
2. **Search Icons** - Use the search bar to find specific icons by name
3. **Customize** - Click any icon to open the editor and customize colors, size, and rotation
4. **Export** - Copy the SVG code or download the icon file
## Icon Sets Include
Popular icon libraries such as:
* Font Awesome (Regular, Solid, Brands)
* Material Design Icons
* Lucide Icons
* Heroicons
* Feather Icons
* Bootstrap Icons
* And 190+ more collections
## Usage in Your Project
After customizing an icon, you can:
1. **Copy the SVG** - Paste directly into your HTML/JSX
2. **Download as File** - Save as `.svg` file for use in design tools
3. **Integrate with Components** - Use inline SVG in your React components
```tsx
// Example usage in React
export function MyIcon() {
return (
);
}
```
## Customization Options
The SVG editor provides:
* **Color Picker** - Change icon colors with hex color codes
* **Size Control** - Adjust icon size from 16px to 256px
* **Rotation** - Rotate icons in 15° increments
* **Stroke Width** - Adjust stroke thickness for outlined icons
* **Reset Function** - Quickly reset all customizations
## Performance
All icons are:
* Loaded on-demand from CDN
* Cached for optimal performance
* Lightweight SVG format
* Zero JavaScript dependencies when exported
***
Visit the [Icona page](/icona) to start browsing and customizing icons for your project.
# Installation
URL: /docs/installation
**Note:** We use installation process as
[shadcn/ui](https://ui.shadcn.com/docs/installation).
### Initialize shadcn/ui
Run the `init` command to create a new project with shadcn/ui or setup an existing one.
npm
pnpm
yarn
bun
```bash
npx shadcn@latest init"
```
```bash
pnpm dlx shadcn@latest init"
```
```bash
yarn dlx shadcn@latest init"
```
```bash
bun x shadcn@latest init"
```
### Add Components
Run the `add` command to add a component to your project.
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/vercel-tabs"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/vercel-tabs"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/vercel-tabs"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/vercel-tabs"
```
### Import Components
Import the component to your project.
```tsx
import { Button } from '@/components/ui/button';
export default function Home() {
return (
);
}
```
# Introduction
URL: /docs/introduction
## Key Features
* **Composable by design** - Build complex interfaces by combining simple, focused components
* **Built on top of shadcn/ui** - Uses the same design principles and styling approach as shadcn/ui
* **Copy-paste ready** - Same installation experience as shadcn/ui components
* **Fully customizable** - Built with Tailwind CSS and designed to match your design system
* **Advanced functionality** - Complex components like data tables, media players, and drag-and-drop interfaces
## Why Joly UI?
Joly UI is a collection of fully composable components that extend shadcn/ui. These components are accessible and customizable to fit your needs. Joly UI is copy-paste ready, no complex setup or configuration required.
Every component follows WCAG guidelines, includes proper ARIA attributes, and supports keyboard navigation out of the box.
## Credits
* [Radix UI](https://radix-ui.com) - Core components.
* [shadcn/ui](https://ui.shadcn.com) - Components design and registry distribution.
* [Fumadocs](https://fumadocs.dev) - Documentation.
* [Motion](https://motion.dev) - Documentation.
# MCP
URL: /docs/mcp
import { CodeTabs } from '@/components/code-tabs';
import {
Tabs,
TabsList,
TabsTrigger,
TabsContents,
TabsContent,
} from '@/components/tabs';
For more information about the MCP server, please refer to the [shadcn/ui MCP documentation](https://ui.shadcn.com/docs/mcp).
## Automatic configuration
Select your MCP client and follow the instructions to configure the shadcn MCP server.
Claude Code
Cursor
VS Code
## Manual configuration
Install the shadcn package as a dev dependency:
Use the code below to configure the shadcn MCP server in your editor.
# Other animated registry
URL: /docs/other-animated-registry
**Joly UI is not the only registry of animated components.**
Our mission is to help you build animated UIs quickly and effortlessly. That’s why we also want to highlight other complementary registries that can help you animate your interfaces with the same simplicity and flexibility.
## React Registries
}
href="https://magicui.design"
title="Magic UI"
/>
}
href="https://reactbits.dev"
title="React Bits"
/>
}
href="https://www.hover.dev/"
title="Hover"
/>
}
title="Motion Examples"
href="https://examples.motion.dev/react"
/>
} href="https://ui.aceternity.com" title="Aceternity UI" />
## Vue Registries
}
href="https://vue-bits.dev"
title="Vue Bits"
/>
}
href="https://inspira-ui.com/"
title="Inspira UI"
/>
## Add your distribution
If you have a distribution of animated components, please create a pull request to add it to this page.
# Troubleshooting
URL: /docs/troubleshooting
## Verify your versions
| Dependency | Minimum recommended version |
| ---------------- | --------------------------- |
| **Motion** | `≥ 12.23.0` |
| **React** | `≥ 19` |
| **Tailwind CSS** | `≥ 4.1.0` |
| **Shadcn UI** | `latest` |
Make sure your environment meets or exceeds these versions to ensure Joly UI remains compatible and stable.
## Documentation display issues
Certain browser extensions can interfere with how the documentation is rendered. Common culprits include:
* **[Screen Shader | Smart Screen Tinting](https://chromewebstore.google.com/detail/screen-shader-smart-scree/fmlboobidmkelggdainpknloccojpppi?hl=fr\&utm_source=ext_sidebar)**
If problems persist after disabling extensions, clear your browser cache and refresh the page.
## The CLI installation does not respect aliases
In some projects, components may not install in the desired location that you configured in the aliases in the `components.json` file. This is because we can't use a target path with aliases.
We have filed an [issue on shadcn/ui](https://github.com/shadcn-ui/ui/issues/8169), Shadcn added it to the roadmap.
For now, we recommend using the manual installation.
## Flickering with the highlight component
If you are experiencing flickering issues with the `Highlight` component, this is likely due to React's strict mode. Set it to false to avoid issues during development.
## Other issues
If you encounter any other problem, don't hesitate to [open an issue here](https://github.com/johuniq/jolyui/issues/new/choose).
# Animated Beam
URL: /docs/components/animated-beam
## AI Agent Workflow
A demonstration of a complex AI agent workflow with multiple steps and feedback loops.
## Secure Cloud Sync
Demonstrating a secure data transfer from a local device to cloud storage through an encryption layer.
## Microservices Architecture
A complex architecture showing how an API gateway routes requests to various microservices and a shared database.
## Real-time Collaboration
Showing bidirectional communication between multiple users through a central relay server.
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/animated-beam"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/animated-beam"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/animated-beam"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/animated-beam"
```
Copy and paste the following code into your project. `globals.css`
```css
@layer utilities {
@keyframes beam-dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: -1000;
}
}
@keyframes beam-flow {
from {
transform: translateX(0%);
}
to {
transform: translateX(300%);
}
}
.animated-beam-path {
will-change: stroke-dashoffset;
}
}
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project. `component/ui/animated-beam.tsx`
## Usage
```tsx
import { AnimatedBeam, BeamContainer, BeamNode } from "@/components/ui/animated-beam";
function MyComponent() {
const containerRef = useRef(null);
const fromRef = useRef(null);
const toRef = useRef(null);
return (
StartEnd
);
}
```
## API Reference
### AnimatedBeam
### BeamContainer
### BeamNode
## Notes
* The `containerRef` must be attached to the parent container that holds both the start and end elements
* Use `BeamContainer` as the wrapper for proper positioning
* Use `BeamNode` for the elements you want to connect
* Curvature values range from -1 to 1, where 0 is straight
* The animation uses SVG paths and CSS animations for smooth performance
# Animated Table
URL: /docs/components/animated-table
## Basic Table
## Sorting
## Search
## Selection
## Expandable Rows
## Column Visibility
## Pagination
## Full Featured
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/animated-table"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/animated-table"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/animated-table"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/animated-table"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install lucide-react motion
```
```bash
pnpm add lucide-react motion
```
```bash
yarn add lucide-react motion
```
```bash
bun add lucide-react motion
```
Copy and paste the following code into your project.
## API Reference
### AnimatedTable
The main animated table component with comprehensive features.
### ColumnDef
Configuration for table columns.
### PaginationConfig
Configuration for pagination functionality.
# Animated Theme Toggle
URL: /docs/components/animated-theme-toggle
## Basic Usage
## Different Sizes
## In Navbar
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/animated-theme-toggle"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/animated-theme-toggle"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/animated-theme-toggle"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/animated-theme-toggle"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion next-themes
```
```bash
pnpm add motion next-themes
```
```bash
yarn add motion next-themes
```
```bash
bun add motion next-themes
```
Copy and paste the following code into your project. `component/ui/animated-theme-toggle.tsx`
Make sure you have the `ThemeProvider` set up in your app. In your root layout:
```tsx
import { ThemeProvider } from "next-themes"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## Usage
```tsx
import { AnimatedThemeToggle } from "@/components/ui/animated-theme-toggle"
export default function MyComponent() {
return
}
```
## API Reference
### AnimatedThemeToggle
## Notes
* Uses **Framer Motion** for smooth SVG path animations
* **Sun-to-moon** transition with synchronized path length animations
* Built on top of the **Button** component for consistent styling
* Includes **hover and focus states** out of the box
* The toggle uses **internal state** by default - integrate with your theme provider for actual theme switching
* SVG paths animate with **coordinated timing** for a polished effect
# Animated Toast
URL: /docs/components/animated-toast
## Basic Toast
## Minimal Toast
## Undo Toast
## Notification Toast
## Stacked Notifications
## Promise Toast
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/animated-toast"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/animated-toast"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/animated-toast"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/animated-toast"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
lucide-react
```
```bash
pnpm add motion
lucide-react
```
```bash
yarn add motion
lucide-react
```
```bash
bun add motion
lucide-react
```
Copy and paste the following code into your project. `component/ui/animated-toast.tsx`
## API Reference
### AnimatedToastProvider
### Toast Types
### MinimalToast
### UndoToast
### NotificationToast
### StackedNotifications
### PromiseToast
## Notes
* All toast components support different types: success, error, warning, info, and default
* Toast positions can be customized (top-right, top-left, bottom-right, etc.)
* Toasts automatically dismiss after a configurable duration
* The provider manages toast state and stacking
* Promise toasts provide automatic loading/success/error feedback
* Stacked notifications show multiple toasts with a maximum visible limit
* All animations use Framer Motion for smooth transitions
# Animated Tooltip
URL: /docs/components/animated-tooltip
## Placement Options
## Animation Types
## Icon Tooltips with Shortcuts
## Status Tooltips
## Rich Tooltip with Image
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/animated-tooltip"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/animated-tooltip"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/animated-tooltip"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/animated-tooltip"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project. `component/ui/animated-tooltip.tsx`
## API Reference
### AnimatedTooltip
### RichTooltip
### IconTooltip
### HoverCardTooltip
### ConfirmTooltip
### TooltipGroup
### FloatingLabel
### StatusTooltip
## Notes
* Tooltips automatically position themselves to stay within viewport bounds
* All tooltips support keyboard navigation and accessibility features
* Animation types include fade, scale, slide, and spring transitions
* Rich tooltips support images, titles, and descriptions
* Icon tooltips can display keyboard shortcuts
* Status tooltips show online/offline/away/busy indicators
* Tooltip groups are perfect for toolbar-style interfaces
# Bento Grid
URL: /docs/components/bento-grid
## AI Analytics Dashboard
A modern, data-driven dashboard layout showcasing AI metrics, system health, and real-time traffic.
## Feature Showcase
A premium "Bento Box" style feature grid perfect for SaaS landing pages and product showcases.
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/bento-grid"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/bento-grid"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/bento-grid"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/bento-grid"
```
### Manual
Copy and paste the following code into your project. `component/ui/bento-grid.tsx`
## API Reference
## Notes
* Responsive grid that adapts from 1 column on mobile to 3 columns on large screens
* Uses CSS Grid with auto-rows for consistent item heights
* Perfect for dashboard layouts, portfolio displays, and content grids
* Items can span multiple columns and rows using standard CSS Grid classes
* Supports all standard div props and custom className for styling
# Button
URL: /docs/components/button
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/button"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/button"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/button"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/button"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install @radix-ui/react-slot class-variance-authority
```
```bash
pnpm add @radix-ui/react-slot class-variance-authority
```
```bash
yarn add @radix-ui/react-slot class-variance-authority
```
```bash
bun add @radix-ui/react-slot class-variance-authority
```
Copy and paste the following code into your project. `component/ui/button.tsx`
Copy and paste the following code into your project. `globals.css`
```css
@theme inline {
--animate-shimmer: shimmer 2s linear infinite;
--animate-shimmer-slide: shimmer-slide 2s linear infinite;
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes shimmer-slide {
0% {
transform: translateX(-200%);
}
100% {
transform: translateX(200%);
}
}
}
```
## Usage
```tsx
import { Button } from "@/components/ui/button";
```
## Examples
### Variants
The Button component supports multiple visual variants with modern animations and effects.
**Available variants:**
* `default` - Gradient background with hover glow and radial mouse tracking
* `destructive` - Red gradient for dangerous actions
* `outline` - Bordered with backdrop blur
* `secondary` - Secondary gradient style
* `ghost` - Transparent with subtle hover
* `link` - Text link style
* `shimmer` - Animated shimmer effect on hover
* `glow` - Purple gradient with glowing border effect
### Sizes
Choose from different sizes to match your design needs.
### With Icons
Combine buttons with icons for enhanced visual communication.
## API Reference
### Button
A flexible button component that can be rendered as any element using the `asChild` prop.
## Notes
* Use `variant="default"` for primary actions
* Use `variant="destructive"` for dangerous actions like delete
* Use `variant="outline"` for secondary actions
* Use `variant="ghost"` for tertiary actions
* Use `variant="link"` for navigation
* The `asChild` prop allows polymorphic rendering with Radix UI's Slot component
# Calendar
URL: /docs/components/calendar
## Basic Calendar
## Date Range Selection
## Multiple Date Selection
## Date & Time Selection
## Calendar with Presets
## Calendar with Constraints
## Full Featured Examples
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/calender"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/calender"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/calender"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/calender"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install lucide-react motion
```
```bash
pnpm add lucide-react motion
```
```bash
yarn add lucide-react motion
```
```bash
bun add lucide-react motion
```
Copy and paste the following code into your project.
## Usage
```tsx
import { useState } from "react"
import { AnimatedCalendar } from "@/components/ui/calender"
export default function MyComponent() {
const [date, setDate] = useState()
return (
)
}
```
## API Reference
### AnimatedCalendar
# Character Morph
URL: /docs/components/character-morph
## Examples
### Variants
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/character-morph"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/character-morph"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/character-morph"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/character-morph"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project. `component/ui/character-morph.tsx`
## API Reference
## Notes
* Uses motion/react for smooth character-by-character animations
* Each character animates with opacity, vertical movement, blur, and 3D rotation
* Staggered animation delays create a wave-like morphing effect
* Automatically cycles through texts at specified intervals
* Supports custom CSS classes for styling
* Maintains consistent width by using the longest text as reference
* Perfect for dynamic headlines, loading states, or eye-catching text effects
# Code Block
URL: /docs/components/code-block
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/code-block"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/code-block"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/code-block"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/code-block"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install lucide-react motion prism-react-renderer
```
```bash
pnpm add lucide-react motion prism-react-renderer
```
```bash
yarn add lucide-react motion prism-react-renderer
```
```bash
bun add lucide-react motion prism-react-renderer
```
Copy and paste the following code into your project.
## Features
* **Syntax Highlighting**: Supports over 30 languages using `prism-react-renderer`.
* **Multiple Variants**: Default, Terminal, Minimal, Gradient, and Glass styles.
* **Animations**: Fade in, Slide in, Typewriter, and Highlight effects.
* **Interactive**: Copy to clipboard, download code, collapse/expand.
* **Line Handling**: Line numbers, line highlighting, added/removed lines (diff).
* **Special Components**: Includes `CodeCompare`, `CodeTabs`, and `TerminalBlock`.
## Examples
### Terminal
Terminal variant with fade in animation.
### Glass + Dracula Theme
Glass variant with dracula theme and highlight animation.
### Code Comparison
Display side-by-side code comparisons with diff highlighting.
### Code Tabs
Organize multiple code snippets into tabs.
## API Reference
### CodeBlock
The main component for displaying code.
### CodeCompare
A component for comparing two blocks of code.
### CodeTabs
A component for displaying multiple code blocks in tabs.
### TerminalBlock
A component for displaying terminal commands and outputs.
# Command Palette
URL: /docs/components/command-palette
## Basic Usage
The Command Palette is a versatile component that allows users to quickly access commands, search through content, and perform actions using their keyboard.
## Features
* **Fuzzy Search**: Intelligent searching that matches characters even if they aren't consecutive.
* **Keyboard Navigation**: Full support for arrow keys, Enter to select, and Escape to close.
* **Shortcuts**: Support for global shortcuts (default ⌘K) and individual command shortcuts.
* **Groups**: Organize commands into logical sections with headings.
* **Descriptions**: Optional sub-text for commands to provide more context.
* **Icons**: Support for Lucide icons for better visual recognition.
## Customization
You can customize the placeholder, empty message, and the global shortcut used to toggle the palette.
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/command-palette"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/command-palette"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/command-palette"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/command-palette"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install lucide-react
```
```bash
pnpm add lucide-react
```
```bash
yarn add lucide-react
```
```bash
bun add lucide-react
```
Copy and paste the following code into your project. `component/ui/command-palette.tsx`
## API Reference
### CommandGroup
### CommandItem
# Dock
URL: /docs/components/dock
## Basic Usage
## macOS Style
## Social Media
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/dock"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/dock"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/dock"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/dock"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion lucide-react
```
```bash
pnpm add motion lucide-react
```
```bash
yarn add motion lucide-react
```
```bash
bun add motion lucide-react
```
Copy and paste the following code into your project. `component/ui/dock.tsx`
## Usage
```tsx
import { Dock, DockIcon, DockItem, DockLabel } from "@/components/ui/dock";
function MyDock() {
return (
Home
{/* More items... */}
);
}
```
## API Reference
### Dock
### DockItem
### DockIcon
### DockLabel
### DockSeparator
## Notes
* The dock automatically applies magnification effects when hovering near items
* Use `DockSeparator` to group related items
* Icons are automatically sized and centered within `DockIcon`
* Labels appear as tooltips on hover
* The component uses Framer Motion for smooth animations
# Expanded Map
URL: /docs/components/expanded-map
## Basic Usage
Click the card to expand and reveal the map.
## Different Locations
Display any location by providing latitude and longitude coordinates.
## Dark Map Style
Use the dark Carto tile provider for a sleek dark map appearance.
## Zoom Levels
Control the map detail with different zoom levels (1-18).
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/expanded-map"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/expanded-map"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/expanded-map"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/expanded-map"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project. `component/ui/expanded-map.tsx`
## Usage
```tsx
import { LocationMap } from "@/components/ui/expanded-map"
export default function MyComponent() {
return (
)
}
```
## API Reference
### LocationMap
## Notes
* Uses **real map tiles** from OpenStreetMap or Carto tile providers
* **3D tilt effect** follows cursor movement with spring physics
* **Click to expand** reveals the full map with animated marker
* Coordinates are **automatically formatted** with N/S/E/W directions
* Map tiles are **preloaded** for smooth transitions
* Supports **three tile providers**: OpenStreetMap, Carto Light, and Carto Dark
* **Zoom levels 1-18** control map detail (higher = more zoomed in)
* Uses **Web Mercator projection** for accurate coordinate conversion
# Feedback Widget
URL: /docs/components/feedback-widget
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/feedback-widget"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/feedback-widget"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/feedback-widget"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/feedback-widget"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion react-markdown @radix-ui/react-toggle-group
```
```bash
pnpm add motion react-markdown @radix-ui/react-toggle-group
```
```bash
yarn add motion react-markdown @radix-ui/react-toggle-group
```
```bash
bun add motion react-markdown @radix-ui/react-toggle-group
```
Copy and paste the following code into your project.
## Custom Label
## API Reference
The main file tree component that renders a hierarchical structure of files and folders.
# File Tree
URL: /docs/components/file-tree
## Basic
## Expandable
## Fully Expanded
## Selectable
## Custom Icons
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/file-tree"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/file-tree"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/file-tree"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/file-tree"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install lucide-react motion
```
```bash
pnpm add lucide-react motion
```
```bash
yarn add lucide-react motion
```
```bash
bun add lucide-react motion
```
Copy and paste the following code into your project.
## API Reference
### FileTree
The main file tree component that renders a hierarchical structure of files and folders.
### TreeNode
The data structure for individual nodes in the file tree.
# GitHub Contributors
URL: /docs/components/github-contributors
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/github-contributors"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/github-contributors"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/github-contributors"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/github-contributors"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install @radix-ui/react-tooltip lucide-react motion
```
```bash
pnpm add @radix-ui/react-tooltip lucide-react motion
```
```bash
yarn add @radix-ui/react-tooltip lucide-react motion
```
```bash
bun add @radix-ui/react-tooltip lucide-react motion
```
Copy and paste the following code into your project.
## Usage
```tsx
import { GitHubContributors } from "@/components/ui/github-contributors";
```
## API Reference
### GitHubContributors
The main component that fetches and displays GitHub contributors.
## Notes
* The component uses GitHub's public API which has rate limits
* Without authentication: 60 requests per hour per IP
* With token: 5,000 requests per hour
* Contributors are sorted by contribution count
* The top contributor gets a special star badge
* Tooltips show detailed contribution statistics
# GitHub Star Button
URL: /docs/components/github-star
## Basic Usage
The GitHub Star Button provides a sleek way to showcase your repository's popularity. It fetches real-time data from the GitHub API and features smooth animations.
## Features
* **Real-time Data**: Fetches stargazers count directly from GitHub API.
* **Rolling Number Animation**: Premium vertical rolling animation for digits.
* **Particle Effects**: Interactive star particles on click.
* **Interactive Hover**: Smooth scaling, rotation, and shimmer effects.
* **Responsive**: Works great on all screen sizes.
* **Theme Aware**: Automatically adjusts for light and dark modes.
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/github-star"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/github-star"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/github-star"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/github-star"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project. `component/ui/github-star.tsx`
## API Reference
## Customization
You can easily customize the button by passing a `className` prop to adjust its size, colors, or spacing. The component uses Tailwind CSS for all its styling.
### Colors
The component uses a custom `star` and `star-glow` color. You can add these to your `globals.css` or Tailwind theme:
```css
@theme {
--color-star: #eab308;
--color-star-glow: #facc15;
}
```
# Glitch Text
URL: /docs/components/glitch-text
## Examples
### Custom Timing
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/glitch-text"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/glitch-text"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/glitch-text"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/glitch-text"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project. `component/ui/glitch-text.tsx`
## API Reference
## Notes
* Uses character scrambling with random glitch characters during transitions
* Creates authentic digital distortion effects
* Customizable glitch duration and word change intervals
* Supports custom CSS classes for styling
* Perfect for cyberpunk themes, tech demos, or gaming interfaces
# Gooey Text Morphing
URL: /docs/components/gooey-text-morphing
## Gooey Text Morphing
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/gooey-text-morphing"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/gooey-text-morphing"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/gooey-text-morphing"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/gooey-text-morphing"
```
### Manual
Copy and paste the following code into your project. `component/ui/gooey-text-morphing.tsx`
## Usage
```tsx
import { GooeyText } from "@/components/ui/gooey-text-morphing";
function MyComponent() {
const texts = ["Hello", "World", "Gooey", "Morph"];
return (
);
}
```
## API Reference
## Notes
* The component uses SVG filters to achieve the "gooey" effect.
* The `texts` array can contain any number of strings.
* `morphTime` controls the duration of the transition between words.
* `cooldownTime` controls how long each word stays visible before morphing again.
* Ensure the container has enough height to accommodate the text size.
## Credits
Inspired by [Victor Welander](https://x.com/victorwelander_).
# Highlight Text
URL: /docs/components/highlight-text
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/highlight-text"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/highlight-text"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/highlight-text"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/highlight-text"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install class-variance-authority
```
```bash
pnpm add class-variance-authority
```
```bash
yarn add class-variance-authority
```
```bash
bun add class-variance-authority
```
Copy and paste the following code into your project.
## Features
* **Multiple Variants**: Choose from underline, box, circle, and marker styles.
* **Animated**: Smooth SVG drawing animations when the component comes into view.
* **Customizable**: Adjust colors, stroke width, animation duration, and delay.
* **Responsive**: Automatically adjusts to the size of the text content.
## Examples
### Variants
Different styles of highlighting.
### Colors
Different color themes for the highlights.
## API Reference
### HighlightText
# Hover Preview
URL: /docs/components/hover-preview
## Basic Usage
## Portfolio Links
Perfect for showcasing projects in a portfolio or case studies.
## Product List
Display product previews in e-commerce or catalog pages.
## Custom Styling
Customize card appearance, cursor offset, and link styles.
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/hover-preview"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/hover-preview"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/hover-preview"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/hover-preview"
```
### Manual
Copy and paste the following code into your project. `component/ui/hover-preview.tsx`
## Usage
```tsx
import {
HoverPreviewProvider,
HoverPreviewLink,
} from "@/components/ui/hover-preview"
const previewData = {
project1: {
image: "https://example.com/image.jpg",
title: "Project Title",
subtitle: "Project description",
},
// Add more items...
}
export default function MyComponent() {
return (
Check out my awesome project.
)
}
```
## API Reference
### HoverPreviewProvider
### HoverPreviewLink
### PreviewData
### HoverPreviewCardProps
## Notes
* Uses **React Context** to share hover state between provider and links
* Preview card **follows cursor** with smart boundary detection
* Cards automatically **reposition** to stay within viewport
* Images are **preloaded** by default for instant display
* Supports **custom styling** for both links and preview cards
* Works with any number of **hoverable links** within a provider
* **Accessible** - links maintain proper focus states and semantics
# Image Comparison
URL: /docs/components/image-comparison
## Drag Slider
## Hover Reveal
## Fade Toggle
## Split View
## Lens Effect
## Vertical Slider
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/image-comparison"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/image-comparison"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/image-comparison"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/image-comparison"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project. `component/ui/image-comparison.tsx`
## API Reference
### ImageComparison
### ImageComparisonHover
### ImageComparisonFade
### ImageComparisonSplit
### ImageComparisonLens
## Notes
* All image comparison components support both horizontal and vertical orientations
* The drag slider uses Framer Motion's drag constraints for smooth interaction
* Hover effects use mouse tracking for responsive reveals
* Lens effects create circular reveal masks using CSS clip-path
* Split view components can be customized with gap spacing
* All components are fully accessible and support keyboard navigation
# Image Sphere
URL: /docs/components/image-sphere
## Basic Usage
## Auto Rotate
Enable automatic rotation for a dynamic, hands-free display.
## Large Gallery
Display more images with adjusted sizing for better visibility.
## Custom Configuration
Customize drag sensitivity, momentum, and visual properties.
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/image-sphere"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/image-sphere"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/image-sphere"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/image-sphere"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install lucide-react
```
```bash
pnpm add lucide-react
```
```bash
yarn add lucide-react
```
```bash
bun add lucide-react
```
Copy and paste the following code into your project. `component/ui/image-sphere.tsx`
## Usage
```tsx
import SphereImageGrid from "@/components/ui/image-sphere";
const images = [
{
id: "1",
src: "https://example.com/image1.jpg",
alt: "Image 1",
title: "Title",
description: "Description",
},
// Add more images...
];
export default function MyComponent() {
return (
);
}
```
## API Reference
### SphereImageGrid
### ImageData
### Position3D
### SphericalPosition
## Notes
* The sphere uses **Fibonacci distribution** for even image placement across the surface
* Supports both **mouse and touch interactions** for drag-based rotation
* Images smoothly **fade out** when rotating to the back of the sphere
* Click on any image to open a **spotlight modal** with title and description
* Built-in **momentum physics** provides natural deceleration after dragging
* **Collision detection** prevents image overlap during rotation
* Auto-rotate can be interrupted by user interaction and resumes automatically
* Responsive container sizing with configurable perspective for 3D depth
# Magnetic
URL: /docs/components/magnetic
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/magnetic"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/magnetic"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/magnetic"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/magnetic"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project.
## Layout
```tsx
import { Magnetic } from "@/components/ui/magnetic";
```
## Examples
### Intensity
Control the strength of the magnetic effect with the `intensity` prop. Higher values create stronger attraction.
### Range
Adjust the activation distance with the `range` prop. This defines how far from the element the effect begins.
### Action Area
Define where the magnetic effect should be triggered using the `actionArea` prop.
### Cards Example
A practical example showing the magnetic effect applied to card components.
## API Reference
### Magnetic
The main magnetic wrapper component that applies smooth cursor-following animations to its children.
# Number Counter
URL: /docs/components/number-counter
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/number-counter"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/number-counter"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/number-counter"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/number-counter"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project.
## Features
* **Multiple Styles**: Includes standard counter, rolling digits, circular progress, and stat cards.
* **Customizable**: Adjust duration, easing, formatting, prefixes, and suffixes.
* **Performance**: Optimized animations using Framer Motion and requestAnimationFrame.
* **Accessible**: Uses tabular-nums for consistent width and proper ARIA support.
## Examples
### Rolling Counter
A classic odometer-style rolling counter effect.
### Circular Counter
A circular progress indicator with an animated percentage counter.
### Stat Counter
A pre-styled component perfect for displaying statistics and metrics.
## API Reference
### NumberCounter
The core counter component with easing support.
### RollingCounter
Odometer-style rolling digit counter.
### CircularCounter
Circular progress counter.
### StatCounter
Statistical display component.
# Phone Card
URL: /docs/components/phone-card
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/phone-card"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/phone-card"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/phone-card"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/phone-card"
```
### Manual
Copy and paste the following code into your project `component/ui/lazy-video.tsx`
Copy and paste the following code into your project `component/ui/phone-card.tsx`
## Usage
```tsx
import { PhoneCard } from "@/components/ui/phone-card";
export default function App() {
return (
);
}
```
## Examples
### Image Mode
Use static images instead of video for better performance or when video isn't needed.
## API Reference
### PhoneCard
The main component that displays a phone mockup with media content.
## Advanced
The component uses the `LazyVideo` component internally, which provides:
* Intersection Observer for lazy loading
* Automatic pause/play based on visibility
* Support for prefers-reduced-motion
* Data saver mode detection
* Tab visibility handling
You can also use `LazyVideo` standalone:
```tsx
import { LazyVideo } from "@/components/ui/lazy-video";
```
# Rainbow Button
URL: /docs/components/rainbow-button
## Rainbow Button
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/rainbow-button"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/rainbow-button"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/rainbow-button"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/rainbow-button"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project. `component/ui/rainbow-button.tsx`
## Usage
```tsx
import { RainbowButton } from "@/components/ui/rainbow-button";
function MyComponent() {
return (
Get Started
);
}
```
## API Reference
## Notes
* The button features a rotating rainbow gradient border.
* You can customize the colors, duration, and border width.
* The button includes smooth hover and active state animations.
* Fully accessible and supports all standard button attributes.
# Rotate Text
URL: /docs/components/rotate-text
## Examples
### Variants
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/rotate-text"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/rotate-text"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/rotate-text"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/rotate-text"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project. `component/ui/rotate-text.tsx`
## API Reference
## Notes
* Uses motion/react for smooth spring animations
* Automatically cycles through words at specified intervals
* Supports custom CSS classes for styling
* Animation includes vertical sliding and opacity transitions
* Perfect for hero sections, testimonials, or dynamic content
# Scroll Text
URL: /docs/components/scroll-text
### Fade Up
### Blur
### Scale
### Rotate
### Slide Left
### Horizontal Scroll
Create marquee-like horizontal scrolling text that moves with the page scroll.
### Scroll Reveal
Reveal content as it enters the viewport with customizable direction and delay.
### Scroll Progress
Highlight text character-by-character based on scroll progress.
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/scroll-text"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/scroll-text"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/scroll-text"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/scroll-text"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project.
## Features
* **Multiple Effects**: Fade, Scale, Rotate, Blur, Slide, and more.
* **Scroll Triggers**: Animations are driven by scroll position.
* **Spring Physics**: Smooth, natural motion using spring animations.
* **Specialized Components**: Includes `ScrollReveal`, `HorizontalScrollText`, `ScrollProgressText`, and `StickyScrollText`.
## API Reference
### ScrollText
The main component for scroll-triggered animations.
### ScrollReveal
A component for revealing content as it enters the viewport.
### HorizontalScrollText
A component for horizontally scrolling text.
### ScrollProgressText
A component for highlighting text based on scroll progress.
### StickyScrollText
A component for sticky scroll effects.
# Segmented Button
URL: /docs/components/segmented-button
## Examples
### Basic Navigation
### Theme Selector
### With Logo Integration
### Controlled State
### Custom Styling
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/segmented-button"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/segmented-button"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/segmented-button"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/segmented-button"
```
### Manual
Copy and paste the following code into your project. `component/ui/segmented-button.tsx`
## API Reference
## Usage
```tsx
import SegmentedButton from "@/components/ui/segmented-button";
const tabs = [
{ id: "home", label: "Home" },
{ id: "about", label: "About" },
{ id: "contact", label: "Contact" },
];
export default function MyComponent() {
return (
console.log("Active:", activeId)}
/>
);
}
```
## Features
* **Smooth Animations**: Powered by Motion.js for fluid transitions
* **Logo Support**: Built-in support for logo buttons with custom SVG
* **Controlled State**: Full control over active state with callbacks
* **Customizable**: Accepts custom className for styling
* **Responsive**: Works seamlessly on mobile and desktop
* **TypeScript**: Fully typed with comprehensive interfaces
## Notes
* The component uses Motion.js for smooth animations
* Logo buttons use a predefined SVG that matches the design system
* The active indicator smoothly animates between button positions
* Hover effects provide visual feedback for better UX
# Text Morphing
URL: /docs/components/text-morphing
## Examples
### Variants
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/text-morphing"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/text-morphing"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/text-morphing"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/text-morphing"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project. `component/ui/text-morphing.tsx`
## API Reference
## Notes
* Uses motion/react for smooth blur and slide animations
* Automatically cycles through words at specified intervals
* Supports custom CSS classes for styling
* Animation includes opacity, vertical movement, and blur effects
* Perfect for hero sections, testimonials, or dynamic content
path="./types/docs/text-morphing.ts"
# Typewriter Text
URL: /docs/components/typewritter-text
## Examples
### Variants
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/typewritter-text"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/typewritter-text"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/typewritter-text"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/typewritter-text"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project. `component/ui/typewritter-text.tsx`
## API Reference
## Notes
* Uses motion/react for smooth blinking cursor animation
* Automatically cycles through words with typing and deleting effects
* Supports custom CSS classes for styling text and cursor
* Configurable typing speed, deleting speed, and pause duration
* Perfect for hero sections, loading states, or dynamic content
# Velocity Morph
URL: /docs/components/velocity-morph
## Examples
### Variants
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/velocity-morph"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/velocity-morph"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/velocity-morph"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/velocity-morph"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install motion
```
```bash
pnpm add motion
```
```bash
yarn add motion
```
```bash
bun add motion
```
Copy and paste the following code into your project. `component/ui/velocity-morph.tsx`
## API Reference
## Notes
* Uses motion/react for high-velocity animations with blur and scale effects
* Automatically cycles through texts at specified intervals
* Supports custom CSS classes for styling
* Animation includes vertical movement, opacity, blur, and scale transitions
* Perfect for hero sections, testimonials, or dynamic content with dramatic effects
# Vercel Tabs
URL: /docs/components/vercel-tabs
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/vercel-tabs"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/vercel-tabs"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/vercel-tabs"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/vercel-tabs"
```
### Manual
Copy and paste the following code into your project `component/ui/vercel-tabs.tsx`
## Usage
```tsx
import { VercelTabs } from "@/components/ui/vercel-tabs";
const tabsData = [
{ label: "Overview", value: "Overview", content:
},
];
```
## Examples
### Basic
## API Reference
### VercelTabs Props
### TabData Type
## Notes
* Animated hover and active indicators
* Fully customizable tab data and content
* Uses Tailwind CSS for styling
# Video Player
URL: /docs/components/video-player
## Installation
### CLI
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add "https://jolyui.dev/r/video-player"
```
```bash
pnpm dlx shadcn@latest add "https://jolyui.dev/r/video-player"
```
```bash
yarn dlx shadcn@latest add "https://jolyui.dev/r/video-player"
```
```bash
bun x shadcn@latest add "https://jolyui.dev/r/video-player"
```
### Manual
Install the following dependencies:
npm
pnpm
yarn
bun
```bash
npm install lucide-react motion
```
```bash
pnpm add lucide-react motion
```
```bash
yarn add lucide-react motion
```
```bash
bun add lucide-react motion
```
Copy and paste the following code into your project.
## Layout
```tsx
import { VideoPlayer } from "@/components/ui/video-player";
```
## Features
The Video Player component includes:
* **Advanced Controls**: Play/pause, volume, progress bar, fullscreen, picture-in-picture
* **Keyboard Shortcuts**: Space (play/pause), M (mute), F (fullscreen), J/L (skip), P (PiP), C (captions)
* **Quality & Speed Control**: Adjustable playback quality and speed settings
* **Theater Mode**: Immersive viewing experience
* **Playlist Support**: Navigate between multiple videos
* **Custom Callbacks**: Track playback progress and events
* **Smooth Animations**: Powered by Framer Motion
* **Responsive Design**: Works on all screen sizes
## Examples
### Compact Mode
Use the `compact` prop for a minimal player with essential controls only.
### Playlist
Create a playlist by managing video state and using navigation callbacks.
### With Callbacks
Track playback progress and implement custom behaviors using the `onTimeUpdate` callback.
### Timestamp Control
Control playback position programmatically using the `seek` method exposed via ref. This example also demonstrates the built-in hover preview feature.
## Keyboard Shortcuts
| Key | Action |
| ------- | ------------------------- |
| `Space` | Play/Pause |
| `M` | Mute/Unmute |
| `F` | Toggle Fullscreen |
| `J` | Skip backward 10 seconds |
| `L` | Skip forward 10 seconds |
| `P` | Toggle Picture-in-Picture |
| `C` | Toggle Captions |
## API Reference
### VideoPlayer
A comprehensive video player with advanced features and controls.