Unlumen UI

https://ui.unlumen.com/docs
Admin
A collection of 27+ animated UI components for React, built with Tailwind CSS and Motion, designed...
Tokens:91,968
Snippets:634
Trust Score:4.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies (bun)

Source: https://ui.unlumen.com/docs/ui/unlumen/switch

Install the necessary dependencies for the Switch component using bun.

```bash
bun add motion @radix-ui/react-switch

```

--------------------------------

### Add Pro Component with Authentication

Source: https://ui.unlumen.com/docs/installation

Install Pro components using the standard add command after configuring authentication. This example adds the floating navbar component.

```bash
pnpm dlx shadcn@latest add @unlumen-ui/floating-navbar
```

```bash
npx shadcn@latest add @unlumen-ui/floating-navbar
```

```bash
npx shadcn@latest add @unlumen-ui/floating-navbar
```

```bash
bunx --bun shadcn@latest add @unlumen-ui/floating-navbar
```

--------------------------------

### Installation

Source: https://ui.unlumen.com/docs/ui/unlumen/kbd

Install the Kbd and Shortcut components using npm, pnpm, yarn, or bun.

```APIDOC
CLI
```
npx shadcn@latest add @unlumen-ui/kbd
```

pnpm
```
pnpm dlx shadcn@latest add @unlumen-ui/kbd
```

yarn
```
npx shadcn@latest add @unlumen-ui/kbd
```

bun
```
bun x --bun shadcn@latest add @unlumen-ui/kbd
```

Manual
Copy and paste the following code into your project:
components/unlumen-ui/kbd.tsx
```

--------------------------------

### Install Dependencies (npm)

Source: https://ui.unlumen.com/docs/ui/unlumen/switch

Install the necessary dependencies for the Switch component using npm.

```bash
npm install motion @radix-ui/react-switch

```

--------------------------------

### Install Dependencies with bun

Source: https://ui.unlumen.com/docs/ui/unlumen/theme-switch

Installs the necessary next-themes and motion libraries using bun.

```bash
bun add next-themes motion

```

--------------------------------

### FloatingTooltip Usage Example

Source: https://ui.unlumen.com/docs/ui/unlumen/floating-tooltip

Import and use the FloatingTooltip Provider and Trigger components to display a tooltip on hover. Ensure the import path matches your project setup.

```javascript
import { FloatingTooltip } from "@/components/unlumen-ui/floating-tooltip";

<FloatingTooltip.Provider>
  <FloatingTooltip.Trigger content="Hello" description="Optional description">
    <button>Hover me</button>
  </FloatingTooltip.Trigger>
</FloatingTooltip.Provider>;
```

--------------------------------

### Install Dependencies (yarn)

Source: https://ui.unlumen.com/docs/ui/unlumen/switch

Install the necessary dependencies for the Switch component using yarn.

```bash
yarn add motion @radix-ui/react-switch

```

--------------------------------

### Install Dependencies with npm

Source: https://ui.unlumen.com/docs/ui/unlumen/theme-switch

Installs the necessary next-themes and motion libraries using npm.

```bash
npm install next-themes motion

```

--------------------------------

### Install Highlight Component using bun

Source: https://ui.unlumen.com/docs/ui/unlumen/highlight

Installs the Highlight component using the shadcn-ui CLI with bun.

```bash
bun x --bun shadcn@latest add @unlumen-ui/highlight

```

--------------------------------

### Install Dependencies with bun

Source: https://ui.unlumen.com/docs/ui/unlumen/slider

Install the necessary dependencies for the slider component using bun.

```bash
bun add motion @radix-ui/react-slider
```

--------------------------------

### Install Dependencies (pnpm)

Source: https://ui.unlumen.com/docs/ui/unlumen/switch

Install the necessary dependencies for the Switch component using pnpm.

```bash
pnpm add motion @radix-ui/react-switch

```

--------------------------------

### Install Core Dependencies with bun

Source: https://ui.unlumen.com/docs/ui/buttons/copy

Installs the 'motion', 'lucide-react', and 'class-variance-authority' packages using bun.

```bash
bun add motion lucide-react class-variance-authority
```

--------------------------------

### Install Slider with bun

Source: https://ui.unlumen.com/docs/ui/unlumen/slider

Use this command to install the slider component using bun.

```bash
bun x --bun shadcn@latest add @unlumen-ui/slider
```

--------------------------------

### Install Highlight Component using npx

Source: https://ui.unlumen.com/docs/ui/unlumen/highlight

Installs the Highlight component using the shadcn-ui CLI with npx.

```bash
npx shadcn@latest add @unlumen-ui/highlight

```

--------------------------------

### Install Dependencies (bun)

Source: https://ui.unlumen.com/docs/ui/effects/math-graph

Install the necessary dependencies for the Math Graph component using bun.

```bash
bun add motion react-use-measure

```

--------------------------------

### Install Dependencies with bun

Source: https://ui.unlumen.com/docs/ui/effects/count-up

Install the required dependencies for the Count Up component using bun.

```bash
bun add motion react-use-measure
```

--------------------------------

### Install Dependencies with pnpm

Source: https://ui.unlumen.com/docs/ui/unlumen/theme-switch

Installs the necessary next-themes and motion libraries using pnpm.

```bash
pnpm add next-themes motion

```

--------------------------------

### Install Highlight Component using pnpm

Source: https://ui.unlumen.com/docs/ui/unlumen/highlight

Installs the Highlight component using the shadcn-ui CLI with pnpm.

```bash
pnpm dlx shadcn@latest add @unlumen-ui/highlight

```

--------------------------------

### Install Dependencies with yarn

Source: https://ui.unlumen.com/docs/ui/unlumen/theme-switch

Installs the necessary next-themes and motion libraries using yarn.

```bash
yarn add next-themes motion

```

--------------------------------

### Install Core Dependencies with npm

Source: https://ui.unlumen.com/docs/ui/buttons/copy

Installs the 'motion', 'lucide-react', and 'class-variance-authority' packages using npm.

```bash
npm install motion lucide-react class-variance-authority
```

--------------------------------

### Install Dependencies with bun

Source: https://ui.unlumen.com/docs/ui/buttons/refresh

Installs necessary dependencies for the Refresh Button component using bun.

```bash
bun add class-variance-authority motion lucide-react

```

--------------------------------

### Install Dependencies with bun

Source: https://ui.unlumen.com/docs/ui/unlumen/magnetic-button

Install the necessary dependencies for the Magnetic Button component using bun.

```bash
bun add motion class-variance-authority

```

--------------------------------

### Install Dependencies (npm)

Source: https://ui.unlumen.com/docs/ui/effects/math-graph

Install the necessary dependencies for the Math Graph component using npm.

```bash
npm install motion react-use-measure

```

--------------------------------

### Install Copy Button with bun

Source: https://ui.unlumen.com/docs/ui/buttons/copy

Installs the Copy Button component using bun and shadcn-ui.

```bash
bun x --bun shadcn@latest add @unlumen-ui/copy
```

--------------------------------

### Install Dependencies via bun

Source: https://ui.unlumen.com/docs/ui/unlumen/command-menu

Install necessary dependencies for the Command Menu component using bun.

```bash
bun add next next-themes lucide-react
```

--------------------------------

### Install Dependencies with npm

Source: https://ui.unlumen.com/docs/ui/effects/count-up

Install the required dependencies for the Count Up component using npm.

```bash
npm install motion react-use-measure
```

--------------------------------

### Install Core Dependencies with pnpm

Source: https://ui.unlumen.com/docs/ui/buttons/copy

Installs the 'motion', 'lucide-react', and 'class-variance-authority' packages using pnpm.

```bash
pnpm add motion lucide-react class-variance-authority
```

--------------------------------

### Install Dependencies (pnpm)

Source: https://ui.unlumen.com/docs/ui/effects/math-graph

Install the necessary dependencies for the Math Graph component using pnpm.

```bash
pnpm add motion react-use-measure

```

--------------------------------

### Install Button component using bun

Source: https://ui.unlumen.com/docs/ui/buttons/glow

Installs the Button component using the bun package manager.

```bash
bun x --bun shadcn@latest add button

```

--------------------------------

### Tilt Component Installation

Source: https://ui.unlumen.com/docs/ui/unlumen/tilt

Install the Tilt component and its dependencies using npm, pnpm, yarn, or bun.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @unlumen-ui/tilt
```

```bash
pnpm dlx shadcn@latest add @unlumen-ui/tilt
```

```bash
npx shadcn@latest add @unlumen-ui/tilt
```

```bash
bun x --bun shadcn@latest add @unlumen-ui/tilt
```

### Dependencies

Install the following dependencies:

**npm**
```bash
npm install motion
```

**pnpm**
```bash
pnpm add motion
```

**yarn**
```bash
yarn add motion
```

**bun**
```bash
bun add motion
```

### Manual Installation

Copy and paste the following code into your project:

`components/unlumen-ui/tilt.tsx`
```

--------------------------------

### OrbitingSkills Usage Example

Source: https://ui.unlumen.com/docs/ui/unlumen/orbiting-skills

Import and use the OrbitingSkills component with a list of skills and a central element. Ensure the import path matches your project setup.

```jsx
import {
  OrbitingSkills,
  type OrbitSkillItem,
} from "@/components/unlumen-ui/orbiting-skills";

const SKILLS: OrbitSkillItem[] = [
  { label: "React", icon: <span>⚛️</span> },
  { label: "TypeScript", icon: <span>🔷</span> },
  { label: "Tailwind", icon: <span>🌊</span> },
];

<OrbitingSkills items={SKILLS} radius={100}>
  <div className="size-20 rounded-full bg-muted" /> 
</OrbitingSkills>;
```

--------------------------------

### Basic Usage of Kbd and Shortcut

Source: https://ui.unlumen.com/docs/ui/unlumen/kbd

Examples of using the Kbd component for single keys and the Shortcut component for key combinations. Demonstrates basic instantiation.

```tsx
// Single key
<Kbd>⌘</Kbd>
<Kbd>Enter</Kbd>

// Shortcut combo
<Shortcut keys={["⌘", "K"]} />
<Shortcut keys={["⌘", "⇧", "P"]} />
```

--------------------------------

### ScrambleText Manual Control Example

Source: https://ui.unlumen.com/docs/ui/unlumen/scramble-text

Control the ScrambleText animation manually using refs. This allows starting or resetting the animation via button clicks.

```javascript
import { useRef } from "react";
import {
  ScrambleText,
  ScrambleTextHandle,
} from "@/components/unlumen-ui/scramble-text";

export function Example() {
  const ref = useRef<ScrambleTextHandle>(null);

  return (
    <>
      <ScrambleText ref={ref} text="Click to reveal" autoStart={false} />
      <button onClick={() => ref.current?.start()}>Start</button>
      <button onClick={() => ref.current?.reset()}>Reset</button>
    </>
  );
}

```

--------------------------------

### Initialize shadcn/ui Project

Source: https://ui.unlumen.com/docs/installation

Run this command to set up a new project with shadcn/ui or configure an existing one. This is the first step for integrating Unlumen UI.

```bash
pnpm dlx shadcn@latest init
```

```bash
npx shadcn@latest init
```

```bash
yarn shadcn@latest init
```

```bash
bunx --bun shadcn@latest init
```

--------------------------------

### Install Pro Component

Source: https://ui.unlumen.com/docs/mcp

Use this command to install a Pro component after configuring your license key and `components.json`.

```bash
npx shadcn@latest add @unlumen-ui/dia-text-reveal
```

--------------------------------

### Install Clipped Circle with bun

Source: https://ui.unlumen.com/docs/ui/effects/clipped-circle

Installs the Clipped Circle component using bun. Ensure you have Node.js and bun installed.

```bash
bun x --bun shadcn@latest add @unlumen-ui/clipped-circle
```

--------------------------------

### Install Clipped Circle with pnpm

Source: https://ui.unlumen.com/docs/ui/effects/clipped-circle

Installs the Clipped Circle component using pnpm. Ensure you have Node.js and pnpm installed.

```bash
pnpm dlx shadcn@latest add @unlumen-ui/clipped-circle
```

--------------------------------

### Install Tooltip Preview with bun

Source: https://ui.unlumen.com/docs/ui/unlumen/tooltip-preview

Use this command to add the Tooltip Preview component to your project using bun.

```bash
bun x --bun shadcn@latest add @unlumen-ui/tooltip-preview

```

--------------------------------

### Install Clipped Circle with npm

Source: https://ui.unlumen.com/docs/ui/effects/clipped-circle

Installs the Clipped Circle component using npm. Ensure you have Node.js and npm installed.

```bash
npx shadcn@latest add @unlumen-ui/clipped-circle
```

--------------------------------

### Install Dependencies with yarn

Source: https://ui.unlumen.com/docs/ui/unlumen/slider

Install the necessary dependencies for the slider component using yarn.

```bash
yarn add motion @radix-ui/react-slider
```

--------------------------------

### Setup ThemeProvider

Source: https://ui.unlumen.com/docs/ui/unlumen/theme-switch

Wrap your application with `ThemeProvider` from `next-themes` to enable theme management. Ensure `suppressHydrationWarning` is set on the `<html>` tag.

```typescript
import {
  ThemeProvider
} from "next-themes";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Install Dependencies with pnpm

Source: https://ui.unlumen.com/docs/ui/unlumen/slider

Install the necessary dependencies for the slider component using pnpm.

```bash
pnpm add motion @radix-ui/react-slider
```

--------------------------------

### Install Dependencies with npm

Source: https://ui.unlumen.com/docs/ui/unlumen/slider

Install the necessary dependencies for the slider component using npm.

```bash
npm install motion @radix-ui/react-slider
```

--------------------------------

### Basic Usage

Source: https://ui.unlumen.com/docs/ui/backgrounds/pixel

A simple example demonstrating how to integrate the PixelBackground component into your application.

```APIDOC
## Usage
```jsx
<PixelBackground>
  <YourContent />
</PixelBackground>
```
```

--------------------------------

### Install Slider with pnpm

Source: https://ui.unlumen.com/docs/ui/unlumen/slider

Use this command to install the slider component using pnpm.

```bash
pnpm dlx shadcn@latest add @unlumen-ui/slider
```

--------------------------------

### Install Tooltip Preview with npm

Source: https://ui.unlumen.com/docs/ui/unlumen/tooltip-preview

Use this command to add the Tooltip Preview component to your project using npm.

```bash
npx shadcn@latest add @unlumen-ui/tooltip-preview

```

--------------------------------

### Install Slider with npx

Source: https://ui.unlumen.com/docs/ui/unlumen/slider

Use this command to install the slider component using npx.

```bash
npx shadcn@latest add @unlumen-ui/slider
```

--------------------------------

### Kbd and Shortcut Demo

Source: https://ui.unlumen.com/docs/ui/unlumen/kbd

Demonstrates the usage of Kbd and Shortcut components for displaying single keys and common shortcuts. Supports different sizes.

```tsx
"use client";

import { Kbd, Shortcut } from "@/components/unlumen-ui/kbd";

export const KbdDemo = ({ size = "md" }: { size?: "sm" | "md" | "lg" }) => {
  return (
    <div className="flex flex-col items-center justify-center gap-6 p-8">
      {/* Single keys */}
      <div className="flex flex-wrap items-center justify-center gap-2">
        {["⌘", "⌥", "⇧", "⌃", "⏎", "⌫", "⇥", "Esc"].map((key) => (
          <Kbd key={key} size={size}>
            {key}
          </Kbd>
        ))}
      </div>

      {/* Common shortcuts */}
      <div className="flex flex-col gap-3 text-sm text-muted-foreground">
        <div className="flex items-center justify-between gap-8">
          <span>Save file</span>
          <Shortcut keys={["⌘", "S"]} size={size} />
        </div>
        <div className="flex items-center justify-between gap-8">
          <span>Open command menu</span>
          <Shortcut keys={["⌘", "K"]} size={size} />
        </div>
        <div className="flex items-center justify-between gap-8">
          <span>Undo</span>
          <Shortcut keys={["⌘", "Z"]} size={size} />
        </div>
        <div className="flex items-center justify-between gap-8">
          <span>Find &amp; replace</span>
          <Shortcut keys={["⌘", "⇧", "H"]} size={size} />
        </div>
      </div>
    </div>
  );
};

```

--------------------------------

### Install Theme Switch with bun

Source: https://ui.unlumen.com/docs/ui/unlumen/theme-switch

Installs the Theme Switch component using the bun x shadcn-ui command.

```bash
bun x --bun shadcn@latest add @unlumen-ui/theme-switch

```

--------------------------------

### Install Switch Component (bun)

Source: https://ui.unlumen.com/docs/ui/unlumen/switch

Use this command to add the Switch component to your project using bun.

```bash
bun x --bun shadcn@latest add @unlumen-ui/switch

```

--------------------------------

### Install Tilt Component

Source: https://ui.unlumen.com/docs/ui/unlumen/tilt

Add the Tilt component to your project using npx, pnpm, bun, or yarn.

```bash
npx shadcn@latest add @unlumen-ui/tilt
```

```bash
pnpm dlx shadcn@latest add @unlumen-ui/tilt
```

```bash
bun x --bun shadcn@latest add @unlumen-ui/tilt
```

--------------------------------

### Install Dependencies with yarn

Source: https://ui.unlumen.com/docs/ui/effects/count-up

Install the required dependencies for the Count Up component using yarn.

```bash
yarn add motion react-use-measure
```

--------------------------------

### Grid Example

Source: https://ui.unlumen.com/docs/ui/backgrounds/pixel

Demonstrates using PixelBackground with different patterns and color schemes in a grid layout.

```APIDOC
## Examples
### Grid
```jsx
import { PixelBackground } from "@/components/unlumen-ui/pixel";

export const PixelBackgroundGridDemo = () => {
  return (
    <div className="absolute m-12 border border-border/80 inset-0 grid grid-cols-3 overflow-hidden divide-x divide-border/80">
      <PixelBackground
        pattern="cursor"
        darkColors="#0d1b4b,#1a3a8f,#2563eb"
        lightColors="#bfdbfe,#93c5fd,#3b82f6"
        className="size-full flex flex-col"
      >
        <h1 className="text-4xl p-6 pb-1">
          Pixel <br /> Cursor
        </h1>
        <p className="text-sm text-muted-foreground p-6 pt-3">
          Animation starts from where the mouse enters.
        </p>
      </PixelBackground>

      <PixelBackground
        pattern="edges"
        darkColors="#2a2a2a,#3b3b3b,#525252"
        lightColors="#d4d4d4,#bdbdbd,#a3a3a3"
        className="size-full flex flex-col"
      >
        <h1 className="text-4xl p-6 pb-1">
          Pixel <br /> Edges
        </h1>
        <p className="text-sm text-muted-foreground p-6 pt-3">
          Pixels appear from all edges inward.
        </p>
      </PixelBackground>

      <PixelBackground
        pattern="random"
        darkColors="#606c38,#fefae0,#bc6c25"
        lightColors="#264653,#2a9d8f,#e9c46a,#f4a261"
        className="size-full flex flex-col"
      >
        <h1 className="text-4xl p-6 pb-1">
          Pixel <br /> Random
        </h1>
        <p className="text-sm text-muted-foreground p-6 pt-3">
          A Random pattern that combines distance and angle
        </p>
      </PixelBackground>
    </div>
  );
};
```
```

--------------------------------

### Install Dependencies with pnpm

Source: https://ui.unlumen.com/docs/ui/effects/count-up

Install the required dependencies for the Count Up component using pnpm.

```bash
pnpm add motion react-use-measure
```

--------------------------------

### Import Kbd and Shortcut Components

Source: https://ui.unlumen.com/docs/ui/unlumen/kbd

How to import the Kbd and Shortcut components into your project. Update the import path to match your project structure.

```tsx
import { Kbd, Shortcut } from "@/components/unlumen-ui/kbd";
```

--------------------------------

### Install Registry Dependencies (bun)

Source: https://ui.unlumen.com/docs/ui/unlumen/tilt-card

Add specific registry dependencies for the Tilt Card and Clipped Circle components using bun.

```bash
bun x --bun shadcn@latest add "https://ui.unlumen.com/r/tilt.json" "https://ui.unlumen.com/r/clipped-circle.json"
```

--------------------------------

### Install Dependencies (yarn)

Source: https://ui.unlumen.com/docs/ui/effects/math-graph

Install the necessary dependencies for the Math Graph component using yarn.

```bash
yarn add motion react-use-measure

```

--------------------------------

### Install Theme Switch with npm

Source: https://ui.unlumen.com/docs/ui/unlumen/theme-switch

Installs the Theme Switch component using the npx shadcn-ui command with npm.

```bash
npx shadcn@latest add @unlumen-ui/theme-switch

```

--------------------------------

### Install class-variance-authority and motion using bun

Source: https://ui.unlumen.com/docs/ui/buttons/glow

Installs the class-variance-authority and motion dependencies using bun.

```bash
bun add class-variance-authority motion

```

--------------------------------

### Install class-variance-authority and motion using yarn

Source: https://ui.unlumen.com/docs/ui/buttons/glow

Installs the class-variance-authority and motion dependencies using yarn.

```bash
yarn add class-variance-authority motion

```

--------------------------------

### Install Switch Component (npx)

Source: https://ui.unlumen.com/docs/ui/unlumen/switch

Use this command to add the Switch component to your project using npx.

```bash
npx shadcn@latest add @unlumen-ui/switch

```
Tokens:
Raw