### Install Spinner Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/spinner/doc.mdx

Install the spinner component using the provided command. This is the primary installation step.

```bash
npm install @spell/ui
# or
yarn add @spell/ui
# or
pnpm add @spell/ui
```

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

### Installation

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/pop-button/doc.mdx

Instructions on how to install the Pop Button component.

```APIDOC
## Installation

To use the Pop Button component, install it using the following command:

```bash
npm install @your-scope/pop-button
```

Or using yarn:

```bash
yarn add @your-scope/pop-button
```

Then import it into your project:

```tsx
import { PopButton } from "@/components/pop-button";
```
```

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

### Install Spell UI Badge

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/badge/doc.mdx

Install the Spell UI Badge component using the provided command. This is the initial setup step.

```bash
npm install @spell-ui/badge
```

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

### Installation

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/highlighted-text/doc.mdx

Instructions for installing the HighlightedText component.

```APIDOC
## Installation

<InstallationTabs item="highlighted-text">
```tsx file=../../registry/spell-ui/highlighted-text.tsx
```
</InstallationTabs>
```

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

### Installation

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/slide-up-text/doc.mdx

Instructions on how to install the SlideUpText component.

```APIDOC
## Installation

Install the component using the provided package manager command:

```bash
# Example installation command (replace with actual command if available)
npm install @your-scope/slide-up-text
```

Or include it directly if using a specific setup:

```tsx
// Assuming the component is available in your registry
import { SlideUpText } from "@/components/slide-up-text";
```
```

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

### Installation

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/special-text/doc.mdx

Instructions on how to install the Spell UI component.

```APIDOC
## Installation

<InstallationTabs item="special-text">
```tsx file=../../registry/spell-ui/special-text.tsx
```
</InstallationTabs>
```

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

### Installation

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/words-stagger/doc.mdx

How to install the WordsStagger component.

```APIDOC
## Installation

```tsx file=../../registry/spell-ui/words-stagger.tsx
```
```

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

### Installation

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/bars-spinner/doc.mdx

Instructions on how to install the Bars Spinner component.

```APIDOC
## Installation

To install the Bars Spinner component, use the following command:

```bash
# Assuming you are using a package manager like npm or yarn
npm install @your-package/bars-spinner
# or
yarn add @your-package/bars-spinner
```

Alternatively, you can copy the component files directly:

```tsx
// Copy from: ../../registry/spell-ui/bars-spinner.tsx
```
```

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

### Install Kbd Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/kbd/doc.mdx

Install the Kbd component using the provided command.

```bash
npm install @spell-ui/kbd
```

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

### Install Dependencies

Source: https://github.com/xxtomm/spell-ui/blob/main/CONTRIBUTING.md

Install all project dependencies using pnpm.

```bash
pnpm i
```

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

### Install Blur Reveal Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/blur-reveal/doc.mdx

Install the Blur Reveal component using the provided command. This snippet shows the installation command for the blur-reveal component.

```bash
npx spell-ui install blur-reveal
```

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

### Installation Highlighted Text

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/highlighted-text/doc.mdx

Installs the highlighted text component. This snippet is part of the installation process.

```tsx
```tsx file=../../registry/spell-ui/highlighted-text.tsx
```
```

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

### Install Text Marquee Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/text-marquee/doc.mdx

Install the TextMarquee component from the registry. This is the primary installation step.

```tsx
```tsx file=../../registry/spell-ui/text-marquee.tsx
```
```

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

### Run Development Server

Source: https://github.com/xxtomm/spell-ui/blob/main/CONTRIBUTING.md

Start the development server to view the project locally. Access it at http://localhost:3000.

```bash
pnpm dev
```

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

### Words Stagger Installation Tab

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/words-stagger/doc.mdx

Installation instructions for the words-stagger component, likely specific to a particular setup or version.

```tsx
```tsx file=../../registry/spell-ui/words-stagger.tsx
```
```

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

### Installation Tab Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/kbd/doc.mdx

This snippet demonstrates the usage of the InstallationTabs component with the 'kbd' item selected, likely for displaying installation instructions.

```tsx
<InstallationTabs item="kbd">
```tsx file=../../registry/spell-ui/kbd.tsx
```
</InstallationTabs>
```

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

### Usage Example

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/pop-button/doc.mdx

A basic example of how to use the Pop Button component.

```APIDOC
## Usage Example

Here's a simple example of how to render the Pop Button component:

```tsx
<PopButton color="violet" size="default">
  Click Me
</PopButton>
```
```

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

### Install Tweet Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/tweet/doc.mdx

Install the Tweet component using the provided installation tab. This snippet shows the file path for installation.

```tsx
```tsx file=../../registry/spell-ui/tweet.tsx
```
```

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

### Install Copy Button Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/copy-button/doc.mdx

Use this command to install the CopyButton component from the registry.

```bash
npm install @spell/copy-button
```

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

### Build Component Registry JSON

Source: https://github.com/xxtomm/spell-ui/blob/main/CONTRIBUTING.md

Generate the `public/r/example-component.json` file, which is used for CLI installations.

```bash
pnpm registry:build
```

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

### Speed Example

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/special-text/doc.mdx

An example demonstrating the 'speed' prop for animating text.

```APIDOC
## Examples

### Speed

<DemoCanvas>
  <DemoPreview>
    <DemoSpeed />
  </DemoPreview>
  <DemoCode>
    ```tsx file=./demo-speed.tsx
    ```
  </DemoCode>
</DemoCanvas>
```

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

### Blur Reveal with Delay and Trigger

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/blur-reveal/doc.mdx

This example shows how to use the 'delay' and 'trigger' props to control when the Blur Reveal animation starts. Set 'delay' for a delayed start and 'trigger' to manually control the animation.

```tsx
<BlurReveal delay={1} trigger={false}>
  Delayed animation
</BlurReveal>
```

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

### ShimmerText Installation

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/shimmer-text/doc.mdx

Install the ShimmerText component using the provided command. This snippet shows the installation command for the shimmer-text package.

```sh
npx spell-ui add shimmer-text
```

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

### Animated Checkbox Installation

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/animated-checkbox/doc.mdx

Shows how to install the animated-checkbox component from the registry.

```tsx
```tsx file=../../registry/spell-ui/animated-checkbox.tsx
```
```

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

### QRCode: Share Link Example

Source: https://context7.com/xxtomm/spell-ui/llms.txt

An example demonstrating how to use QRCode to generate a shareable QR code with accompanying text. Import QRCode.

```tsx
import { QRCode } from "@/components/ui/qr-code";

// Share link example
<div className="flex flex-col items-center gap-4 p-6 bg-card rounded-xl">
  <QRCode value="https://spell.sh" size={180} />
  <p className="text-sm text-muted-foreground">Scan to visit</p>
</div>
```

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

### Install Logos Carousel

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/logos-carousel/doc.mdx

Install the Logos Carousel component using the provided command. This snippet shows the file path for installation.

```bash
npx spell-ui@latest add logos-carousel
```

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

### PerspectiveBook Installation

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/perspective-book/doc.mdx

Import the component file directly from the registry.

```tsx
```tsx file=../../registry/spell-ui/perspective-book.tsx
```
```

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

### Direction Example

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/highlighted-text/doc.mdx

Example demonstrating the directional animation of the HighlightedText component.

```APIDOC
## Examples

### Direction

<DemoCanvas>
  <DemoPreview>
    <DemoDirection />
  </DemoPreview>
  <DemoCode>
    ```tsx file=./demo-direction.tsx
    ```
  </DemoCode>
</DemoCanvas>
```

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

### Install Spell UI Components via CLI

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Use the shadcn CLI to add specific components to your project.

```bash
npx shadcn@latest add "https://spell.sh/r/spinner"
npx shadcn@latest add "https://spell.sh/r/badge"
npx shadcn@latest add "https://spell.sh/r/marquee"
```

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

### Install Spotify Card Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/spotify-card/doc.mdx

Use this command to install the Spotify Card component as part of your project.

```tsx
```tsx file=../../registry/spell-ui/spotify-card.tsx
```
```

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

### Examples

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/pop-button/doc.mdx

Demonstrations of the Pop Button component with different color and size variations.

```APIDOC
## Examples

### Color Variations

This example showcases the different color options available for the Pop Button.

```tsx
// Assuming DemoVariant component renders various color examples
<DemoVariant />
```

### Size Variations

This example demonstrates the different size options for the Pop Button.

```tsx
// Assuming DemoSizes component renders various size examples
<DemoSizes />
```
```

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

### Demo Examples

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/bars-spinner/doc.mdx

Demonstration of the Bars Spinner component in various configurations.

```APIDOC
## Examples

### Default

This example shows the default appearance of the Bars Spinner.

<DemoCanvas>
  <DemoPreview>
    <BarsSpinnerDemo />
  </DemoPreview>
  <DemoCode>
    ```tsx file=./demo.tsx
    ```
  </DemoCode>
</DemoCanvas>

### Size

This example demonstrates how to use the `size` prop to change the spinner's dimensions.

<DemoCanvas>
  <DemoPreview>
    <BarsSpinnerDemoSizes />
  </DemoPreview>
  <DemoCode>
    ```tsx file=./demo-sizes.tsx
    ```
  </DemoCode>
</DemoCanvas>
```

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

### Install WordsStagger Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/words-stagger/doc.mdx

Install the words-stagger component using npm or yarn.

```bash
npm install @spell-ui/words-stagger
yarn add @spell-ui/words-stagger
```

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

### TiltCard: Product Card Example

Source: https://context7.com/xxtomm/spell-ui/llms.txt

An example of using TiltCard to create an interactive product card with an image and details. Import TiltCard.

```tsx
import { TiltCard } from "@/components/ui/tilt-card";

// Product card example
<TiltCard className="w-64 overflow-hidden rounded-2xl bg-white dark:bg-zinc-900 shadow-lg">
  <img src="/product.jpg" alt="Product" className="w-full h-40 object-cover" />
  <div className="p-4">
    <h3 className="font-semibold">Product Name</h3>
    <p className="text-muted-foreground">$99.00</p>
  </div>
</TiltCard>
```

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

### Badge Installation Tab

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/badge/doc.mdx

Displays the installation code for the Spell UI Badge component within an installation tab.

```tsx
```tsx file=../../registry/spell-ui/badge.tsx
```
```

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

### Install Randomized Text Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/randomized-text/doc.mdx

Provides the command or code snippet for installing the randomized-text component using tabs for different installation methods.

```tsx
```tsx file=../../registry/spell-ui/randomized-text.tsx
```
```

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

### Examples

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/words-stagger/doc.mdx

Demonstrations of the WordsStagger component in action.

```APIDOC
## Examples

### Speed Example

<DemoCanvas>
  <DemoPreview>
    <DemoSpeed />
  </DemoPreview>
  <DemoCode>
    ```tsx file=./demo-speed.tsx
    ```
  </DemoCode>
</DemoCanvas>

### Stagger Example

<DemoCanvas>
  <DemoPreview>
    <DemoStagger />
  </DemoPreview>
  <DemoCode>
    ```tsx file=./demo-stagger.tsx
    ```
  </DemoCode>
</DemoCanvas>
```

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

### Install Fallback Avatar Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/fallback-avatar/doc.mdx

Install the Fallback Avatar component using the provided command. This is a prerequisite for using the component in your project.

```bash
npx spell-ui@latest add fallback-avatar
```

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

### Create Example Component

Source: https://github.com/xxtomm/spell-ui/blob/main/CONTRIBUTING.md

Define the main component structure in its dedicated TypeScript file. Use `cn` for class merging.

```typescript
import React from "react";
import { cn } from "@/lib/utils";

export default function ExampleComponent({
  className,
  children,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={cn("", className)} {...props}>
      {children}
    </div>
  );
}
```

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

### Install Pop Button Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/pop-button/doc.mdx

Install the Pop Button component using npm or yarn. This is the initial step before using it in your project.

```bash
```tsx file=../../registry/spell-ui/pop-button.tsx
```
```

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

### LabelInput: Form Example

Source: https://context7.com/xxtomm/spell-ui/llms.txt

An example of integrating LabelInput components into a form for user sign-up. Import LabelInput.

```tsx
import { LabelInput } from "@/components/ui/label-input";

// Form example
<form className="space-y-4 w-80">
  <LabelInput
    label="Full Name"
    name="name"
    placeholder=" "
    required
  />
  <LabelInput
    label="Email Address"
    type="email"
    name="email"
    placeholder=" "
    required
  />
  <LabelInput
    label="Password"
    type="password"
    name="password"
    placeholder=" "
    ringColor="primary"
    required
  />
  <button type="submit" className="w-full btn-primary">
    Sign Up
  </button>
</form>
```

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

### Signature Component Installation Tab

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/signature/doc.mdx

This snippet shows the file path for the signature component's installation tab.

```tsx
```tsx file=../../registry/spell-ui/signature.tsx
```
```

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

### Spinner Component Installation

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/spinner/doc.mdx

This code snippet shows the installation of the spinner component from the registry. It is typically used for setting up the component in your project.

```tsx
```tsx file=../../registry/spell-ui/spinner.tsx
```
```

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

### Usage Examples

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/slide-up-text/doc.mdx

Demonstrates various ways to use the SlideUpText component with different configurations.

```APIDOC
## Usage Examples

### Basic Usage

```tsx
<SlideUpText>Your text here</SlideUpText>
```

### Split By Words (Default)

```tsx
<SlideUpText split="words">Animated words</SlideUpText>
```

### Split By Characters

```tsx
<SlideUpText split="characters">Animated characters</SlideUpText>
```

### Split By Lines

```tsx
<SlideUpText split="lines">Animated lines</SlideUpText>
```

### Custom Stagger and Delay

```tsx
<SlideUpText stagger={0.05} delay={0.5}>Staggered text</SlideUpText>
```

### Animation From Center

```tsx
<SlideUpText from="center">Center start animation</SlideUpText>
```

### Custom Transition

```tsx
<SlideUpText transition={{ type: "spring", stiffness: 300, damping: 20 }}>Spring animation</SlideUpText>
```

### Manual Start (autoStart: false)

```tsx
// Animation will not start automatically
<SlideUpText autoStart={false}>Manual start</SlideUpText>
```

### Using Callbacks

```tsx
<SlideUpText onStart={() => console.log('Animation started!')} onComplete={() => console.log('Animation completed!')}>
  Callback example
</SlideUpText>
```

### In Viewport Animation

```tsx
// Animation triggers only when the component is in the viewport
<SlideUpText inView={true}>In view animation</SlideUpText>
```
```

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

### BarsSpinner Usage Examples

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/bars-spinner/doc.mdx

Examples showing how to apply size and color properties to the spinner.

```tsx
<BarsSpinner size={20} />
<BarsSpinner size={16} color="rgba(255, 255, 255, 0.65)" />
```

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

### FallbackAvatar: User List Example

Source: https://context7.com/xxtomm/spell-ui/llms.txt

An example of displaying multiple FallbackAvatars in a list, often used for user avatars. Import FallbackAvatar.

```tsx
import FallbackAvatar from "@/components/ui/fallback-avatar";

// User list example
const users = ["Alice", "Bob", "Charlie", "Diana"];

<div className="flex -space-x-2">
  {users.map((name) => (
    <FallbackAvatar
      key={name}
      name={name}
      size={40}
      className="ring-2 ring-background"
    />
  ))}
</div>
```

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

### Font Setup (Optional)

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/pop-button/doc.mdx

Optional instructions for setting up the DynaPuff font with the Pop Button component.

```APIDOC
## Font Setup (Optional)

To use the playful DynaPuff font with this component, follow these steps:

1.  **Add the font to your `layout.tsx`:**

    ```tsx
    import { DynaPuff } from 'next/font/google'

    const dynaPuff = DynaPuff({
      subsets: ['latin'],
      variable: '--font-dyna-puff',
    })

    export default function RootLayout({
      children,
    }: { children: React.ReactNode }) {
      return (
        <html lang="en">
          <body className={dynaPuff.variable}>
            {children}
          </body>
        </html>
      )
    }
    ```

2.  **Add the CSS variable to your `globals.css`:**

    ```css
    :root {
      --font-pop: var(--font-dyna-puff);
    }
    ```
```

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

### Component Usage Example

Source: https://github.com/xxtomm/spell-ui/blob/main/CONTRIBUTING.md

Import and use the custom component in your application. Ensure the path is correct.

```typescript
import ExampleComponent from "@/components/example-component";
```

```typescript
<ExampleComponent>Your content here</ExampleComponent>
```

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

### Clone Spell UI Repository

Source: https://github.com/xxtomm/spell-ui/blob/main/CONTRIBUTING.md

Clone your forked repository to your local machine to start contributing.

```bash
git clone https://github.com/<YOUR_USERNAME>/spell-ui.git
```

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

### TiltCard Usage Example

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/tilt-card/doc.mdx

Basic implementation of the TiltCard component with custom configuration.

```tsx
<TiltCard tiltLimit={15} scale={1.05} perspective={1200}>
  <div className="w-80 h-48 rounded-2xl bg-neutral-100 dark:bg-neutral-900 p-6">
    Your content here 
  </div>
</TiltCard>
```

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

### Install Signature Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/signature/doc.mdx

Import the Signature component from the specified path. Ensure the font file is correctly placed.

```tsx
import { Signature } from "@/components/signature";
```

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

### Fallback Avatar Installation Tab

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/fallback-avatar/doc.mdx

Code snippet for installing the fallback-avatar component from the registry.

```tsx
```tsx file=../../registry/spell-ui/fallback-avatar.tsx
```
```

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

### Logos Carousel - Installation Tab

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/logos-carousel/doc.mdx

Shows the installation command for the Logos Carousel component within a tabbed interface.

```tsx
```tsx file=../../registry/spell-ui/logos-carousel.tsx
```
```

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

### AnimatedCheckbox Todo List Example

Source: https://context7.com/xxtomm/spell-ui/llms.txt

A practical example of using AnimatedCheckbox within a dynamic todo list, managing the checked state of each task.

```tsx
import { AnimatedCheckbox } from "@/components/ui/animated-checkbox";

// Todo list example
function TodoList() {
  const [tasks, setTasks] = useState([
    { id: 1, title: "Design mockups", done: false },
    { id: 2, title: "Write documentation", done: true },
    { id: 3, title: "Deploy to production", done: false },
  ]);

  return (
    <div className="space-y-2">
      {tasks.map((task) => (
        <AnimatedCheckbox
          key={task.id}
          title={task.title}
          defaultChecked={task.done}
          onCheckedChange={(checked) => {
            setTasks(tasks.map(t =>
              t.id === task.id ? { ...t, done: checked } : t
            ));
          }}
        />
      ))}
    </div>
  );
}
```

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

### AnimatedCheckbox Basic Usage

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Demonstrates the basic usage of the AnimatedCheckbox component. No additional setup is required beyond importing the component.

```tsx
import { AnimatedCheckbox } from "@/components/ui/animated-checkbox";

// Basic usage
<AnimatedCheckbox title="Complete task" />
```

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

### ExplodingInput Party Mode Example

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Create a festive effect by using a variety of content and adjusting animation parameters for a 'party mode' feel. This example uses emoji strings mapped to span elements.

```tsx
import { ExplodingInput } from "@/components/ui/exploding-input";

// Party mode example
<label className="relative">
  <input
    type="text"
    placeholder="Type to celebrate!"
    className="px-4 py-2 rounded-lg border"
  />
  <ExplodingInput
    content={["🎈", "🎊", "🎁", "🎀"].map((e, i) => (
      <span key={i} className="text-2xl">{e}</span>
    ))}
    count={3}
    gravity={0.3}
    duration={2.5}
  />
</label>
```

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

### Animated Checkbox Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/animated-checkbox/doc.mdx

This section covers the installation and usage of the Animated Checkbox component.

```APIDOC
## Installation

<InstallationTabs item="animated-checkbox">
```tsx file=../../registry/spell-ui/animated-checkbox.tsx
```
</InstallationTabs>

## Usage

```tsx
import { AnimatedCheckbox } from "@/components/animated-checkbox";
```
```tsx
<AnimatedCheckbox title="Task to complete" />
<AnimatedCheckbox title="Already done" defaultChecked />
```

## Props

<PropsTable
  data={[
    {
      name: "title",
      type: "string",
      default: '"Implement Checkbox"',
      nameDetails: "The label text for the checkbox"
    },
    {
      name: "defaultChecked",
      type: "boolean",
      default: "false",
      nameDetails: "Initial checked state"
    },
    {
      name: "onCheckedChange",
      type: "(checked: boolean) => void",
      nameDetails: "Callback when checked state changes"
    },
    {
      name: "className",
      type: "string",
      nameDetails: "Additional CSS classes"
    }
  ]}
/>
```

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

### Implement LabelInput Variants

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/label-input/doc.mdx

Examples of using LabelInput with different types and ring color configurations.

```tsx
<LabelInput label="Email" type="email" />
<LabelInput label="Password" type="password" />
<LabelInput label="Name" ringColor="blue" />
```

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

### Navigate to Project Directory

Source: https://github.com/xxtomm/spell-ui/blob/main/CONTRIBUTING.md

Change into the cloned project directory to begin making changes.

```bash
cd spell-ui
```

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

### Blur Reveal with Speed Animation

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/blur-reveal/doc.mdx

This example demonstrates the Blur Reveal component with custom speed settings for the reveal and segment animations. Adjust 'speedReveal' and 'speedSegment' to control the animation's pace.

```tsx
<BlurReveal speedReveal={0.5} speedSegment={0.1}>
  Fast animation
</BlurReveal>
```

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

### Fallback Avatar Component Sizes Demo

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/fallback-avatar/doc.mdx

Demonstrates different sizes of the Fallback Avatar component. This example helps visualize the 'size' prop's effect.

```tsx
```tsx file=./demo-sizes.tsx
```
```

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

### Stagger Animation Example

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/words-stagger/doc.mdx

Demonstrates the stagger animation effect of the WordsStagger component.

```tsx
```tsx file=./demo-stagger.tsx
```
```

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

### Custom Display Demo Structure

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/kbd/doc.mdx

This snippet shows the setup for a DemoCustom component, featuring its preview and code within a DemoCanvas.

```tsx
<DemoCanvas>
  <DemoPreview>
    <DemoCustom />
  </DemoPreview>
  <DemoCode>
    ```tsx file=./demo-custom.tsx
    ```
  </DemoCode>
</DemoCanvas>
```

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

### Implement ColorSelector Component

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Provides examples for basic color selection, callback handling, size variants, form integration, and state-managed product color pickers.

```tsx
import { ColorSelector } from "@/components/ui/color-selector";

// Basic usage
<ColorSelector
  colors={["red", "blue", "green", "yellow", "purple"]}
  defaultValue="blue"
/>

// With callback
<ColorSelector
  colors={["red", "green", "blue", "orange"]}
  defaultValue="red"
  onColorSelect={(color) => console.log("Selected:", color)}
/>

// With different sizes
<ColorSelector colors={["red", "blue"]} defaultValue="red" size="sm" />
<ColorSelector colors={["red", "blue"]} defaultValue="red" size="default" />
<ColorSelector colors={["red", "blue"]} defaultValue="red" size="lg" />

// Form integration with hidden input
<form>
  <ColorSelector
    name="theme_color"
    colors={["default", "blue", "green", "purple", "pink"]}
    defaultValue="default"
  />
  <button type="submit">Save Preferences</button>
</form>

// Product color selection example
function ProductColorPicker() {
  const [color, setColor] = useState("blue");

  return (
    <div className="space-y-2">
      <p className="text-sm text-muted-foreground">Color: {color}</p>
      <ColorSelector
        colors={["blue", "red", "green", "purple", "orange"]}
        defaultValue={color}
        onColorSelect={setColor}
      />
    </div>
  );
}
```

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

### Use Animated Checkbox

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/animated-checkbox/doc.mdx

Basic usage examples of the AnimatedCheckbox component, demonstrating default and checked states.

```tsx
<AnimatedCheckbox title="Task to complete" />
<AnimatedCheckbox title="Already done" defaultChecked />
```

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

### Implement TextMarquee Component

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Examples for vertical text marquees, including prefix text, custom speed/height, and integration into hero sections.

```tsx
import { TextMarquee } from "@/components/ui/text-marquee";

// Basic usage
<TextMarquee>
  <span>React</span>
  <span>Next.js</span>
  <span>TypeScript</span>
  <span>Tailwind</span>
</TextMarquee>

// With prefix text
<TextMarquee
  prefix={<span className="text-muted-foreground">Built with</span>}
>
  <span className="font-bold">React</span>
  <span className="font-bold">Vue</span>
  <span className="font-bold">Svelte</span>
</TextMarquee>

// Custom speed and height
<TextMarquee speed={0.5} height={150}>
  <span>Slow scroll</span>
  <span>With larger</span>
  <span>View area</span>
</TextMarquee>

// Hero section example
<div className="flex items-baseline gap-2 text-4xl font-bold">
  <span>We build</span>
  <TextMarquee height={50} speed={1.2}>
    <span className="text-blue-500">websites</span>
    <span className="text-green-500">applications</span>
    <span className="text-purple-500">experiences</span>
  </TextMarquee>
</div>
```

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

### Create Component Demo

Source: https://github.com/xxtomm/spell-ui/blob/main/CONTRIBUTING.md

Create a demo file for your component to showcase its usage within the documentation.

```typescript
import ExampleComponent from "@/registry/spell-ui/example-component";

export function Demo() {
  return (
    <div className="flex justify-center">
      <ExampleComponent>Your content here</ExampleComponent>
    </div>
  );
}
```

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

### Kbd Component Usage

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/kbd/doc.mdx

Demonstrates how to import and use the Kbd component with different key combinations.

```APIDOC
## Kbd Component Usage

### Description
This section shows how to import and utilize the Kbd component to display keyboard shortcuts.

### Method
Import and render the component.

### Endpoint
N/A (Component Usage)

### Parameters
N/A (Component Usage)

### Request Example
```tsx
import { Kbd } from "@/components/kbd";

<Kbd keys={["cmd", "K"]} />
<Kbd keys={["ctrl", "shift", "P"]} />
<Kbd keys={["alt", "tab"]} />
```

### Response
N/A (Component Usage)

```

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

### Demo Component Files

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/slide-up-text/doc.mdx

Source files for the demonstration components.

```tsx
```tsx file=./demo.tsx
```
```

```tsx
```tsx file=./demo-split.tsx
```
```

```tsx
```tsx file=./demo-stagger.tsx
```
```

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

### QR Code Component Usage

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/qr-code/doc.mdx

Demonstrates how to import and use the QRCode component with different props.

```APIDOC
## Usage

```tsx
import { QRCode } from "@/components/qr-code";
```

```tsx
<QRCode value="https://example.com" />
<QRCode value="https://example.com" size={140} />
```
```

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

### Demo Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/highlighted-text/doc.mdx

Renders the main demo component. Ensure the './demo' module is correctly imported.

```tsx
import { Demo } from './demo'
import { Demo as DemoDirection } from './demo-direction'

<DemoCanvas>
  <DemoPreview>
    <Demo />
  </DemoPreview>
  <DemoCode>
    ```tsx file=./demo.tsx
    ```
  </DemoCode>
</DemoCanvas>
```

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

### Implement Kbd Component

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Demonstrates keyboard key indicators, including combinations, arrow keys, active states, and keyboard event listening.

```tsx
import { Kbd } from "@/components/ui/kbd";

// Single key
<Kbd keys={["K"]} />

// Key combinations (auto-converts to symbols)
<Kbd keys={["cmd", "K"]} />        // Displays: ⌘ K
<Kbd keys={["ctrl", "shift", "P"]} /> // Displays: ⌃ ⇧ P
<Kbd keys={["alt", "enter"]} />    // Displays: ⌥ ⏎

// Arrow keys
<Kbd keys={["up"]} />    // Displays: ↑
<Kbd keys={["down"]} />  // Displays: ↓
<Kbd keys={["left"]} />  // Displays: ←
<Kbd keys={["right"]} /> // Displays: →

// Active state (pressed appearance)
<Kbd keys={["space"]} active={true} />

// Listen to actual keyboard events
<Kbd keys={["cmd", "K"]} listenToKeyboard={true} />

// Custom display with different hotkey binding
<Kbd keys={[{ display: "Ctrl", key: "ctrl" }, "S"]} />

// Usage in documentation
<p>
  Press <Kbd keys={["cmd", "K"]} /> to open search
</p>

// Shortcut hints
<div className="flex items-center justify-between">
  <span>Save</span>
  <Kbd keys={["cmd", "S"]} className="ml-2" />
</div>
```

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

### RandomizedText Component API

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/randomized-text/doc.mdx

Documentation for the RandomizedText component, including props and usage examples.

```APIDOC
## RandomizedText Component

### Description
A component that animates text with a randomized effect. It can be configured to split text by words or characters and supports viewport-based animation triggering.

### Usage
```tsx
import { RandomizedText } from "@/components/randomized-text";

<RandomizedText>You can just ship things.</RandomizedText>
```

### Props
- **children** (string) - Required - The text to display with randomized animation
- **className** (string) - Optional - Additional CSS classes for the container
- **split** ('words' | 'chars') - Optional - Default: 'words' - How to split the text for animation - by words or characters
- **delay** (number) - Optional - Default: 0.2 - Base delay before animation starts
- **inView** (boolean) - Optional - Default: false - Whether to trigger animation only when element is in viewport
```

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

### Add Variant Demos

Source: https://github.com/xxtomm/spell-ui/blob/main/CONTRIBUTING.md

Create additional demo files for component variants like sizes or colors to showcase different functionalities.

```mdx
import { Demo } from "./demo";
import { Demo as DemoSizes } from "./demo-sizes";

<DemoCanvas>
  ...
</DemoCanvas>

### Size

<DemoCanvas>
  <DemoPreview>
    <DemoSizes />
  </DemoPreview>
  <DemoCode>
    ```tsx file=./demo-sizes.tsx
    ```
  </DemoCode>
</DemoCanvas>
```

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

### PerspectiveBook Demos

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/perspective-book/doc.mdx

Reference files for standard and textured book implementations.

```tsx
```tsx file=./demo.tsx
```
```

```tsx
```tsx file=./demo-textured.tsx
```
```

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

### Blur Reveal with Callbacks

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/blur-reveal/doc.mdx

Implement 'onAnimationStart' and 'onAnimationComplete' callbacks to execute functions when the Blur Reveal animation begins or finishes. This enables chaining animations or triggering other actions.

```tsx
<BlurReveal
  onAnimationStart={() => console.log('Animation started')}
  onAnimationComplete={() => console.log('Animation complete')}
>
  Callback example
</BlurReveal>
```

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

### Render ComponentsGrid

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/components/doc.mdx

Import and render the grid to display available components.

```javascript
import { ComponentsGrid } from './components-grid'

<ComponentsGrid />
```

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

### Animated Gradient Component Usage

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/animated-gradient/doc.mdx

Demonstrates basic and custom configuration for the Animated Gradient component.

```APIDOC
## Animated Gradient Component

### Description
The `AnimatedGradient` component creates dynamic, animated background gradients.

### Usage

Import the component and use it within your JSX.

```tsx
import AnimatedGradient from "@/components/animated-gradient";
```

#### Basic Usage with Preset

```tsx
<div className="relative h-[300px] w-full">
  <AnimatedGradient config={{ preset: "Prism" }} />
  <div className="relative z-10">Your content here</div>
</div>
```

#### Custom Configuration

Allows fine-grained control over gradient colors, animation, and shape.

```tsx
<AnimatedGradient
  config={{
    preset: "custom",
    color1: "#1a1a2e",
    color2: "#16213e",
    color3: "#0f3460",
    rotation: 45,
    speed: 25,
    swirl: 60,
  }}
/>
```

### Props

- **config** (object) - Required - Gradient configuration. Can be a preset name or a custom object.
  - **preset** (string) - Required - Name of the gradient preset (e.g., "Prism").
  - **preset** (string) - Required - Set to "custom" for custom settings.
  - **color1** (string) - Required (for custom) - First gradient color.
  - **color2** (string) - Required (for custom) - Second gradient color.
  - **color3** (string) - Required (for custom) - Third gradient color.
  - **rotation** (number) - Optional - Rotation angle (-360 to 360). Default: 0.
  - **proportion** (number) - Optional - Color proportion (0-100). Default: 35.
  - **scale** (number) - Optional - Scale of the pattern. Default: 1.
  - **speed** (number) - Optional - Animation speed (0-100). Default: 25.
  - **distortion** (number) - Optional - Noise distortion (0-100). Default: 12.
  - **swirl** (number) - Optional - Swirl intensity (0-100). Default: 80.
  - **swirlIterations** (number) - Optional - Number of swirl layers (0-20). Default: 10.
  - **softness** (number) - Optional - Edge softness (0-100). Default: 100.
  - **offset** (number) - Optional - Time offset (-1000 to 1000). Default: 0.
  - **shape** (string) - Optional - Base pattern shape ("Checks", "Stripes", "Edge"). Default: "Checks".
  - **shapeSize** (number) - Optional - Size of the pattern (0-100). Default: 10.
- **noise** (object) - Optional - Noise overlay configuration.
  - **opacity** (number) - Required - Opacity of the noise overlay.
  - **scale** (number) - Optional - Scale of the noise pattern.
- **radius** (string) - Optional - Border radius of the container. Default: "0px".
- **className** (string) - Optional - Additional CSS classes.
- **style** (object) - Optional - Additional inline styles (CSSProperties).
```

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

### Basic Kbd Component Usage

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/kbd/doc.mdx

Render the Kbd component with different key combinations. Use this for displaying common shortcuts.

```tsx
<Kbd keys={["cmd", "K"]} />
<Kbd keys={["ctrl", "shift", "P"]} />
<Kbd keys={["alt", "tab"]} />
```

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

### Configure Components Registry

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/mcp/doc.mdx

Add the Spell registry URL to your components.json file to enable component fetching.

```json
{
  "registries": {
    "@spell": "https://spell.sh/r/{name}.json"
  }
}
```

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

### Update Component Registry

Source: https://github.com/xxtomm/spell-ui/blob/main/CONTRIBUTING.md

Add your new component to the `registry.json` file. Specify its name, type, description, and file paths. Add dependencies if necessary.

```json
{
  "name": "example-component",
  "type": "registry:component",
  "title": "Example Component",
  "description": "A versatile component for displaying various types of content.",
  "files": [
    {
      "path": "registry/spell-ui/example-component.tsx",
      "type": "registry:component"
    }
  ],
  "dependencies": [],
  "registryDependencies": [],
  "category": "display"
}
```

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

### Logos Carousel - Logo Count Example

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/logos-carousel/doc.mdx

Demonstrates limiting the number of logos displayed per row using the 'count' prop.

```tsx
```tsx file=./demo-count.tsx
```
```

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

### QRCode: Dark Mode Compatible

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Use CSS variables for 'fgColor' and 'bgColor' to ensure dark mode compatibility. Import QRCode.

```tsx
import { QRCode } from "@/components/ui/qr-code";

// Dark mode compatible (uses CSS variables)
<QRCode
  value="https://example.com"
  fgColor="var(--foreground)"
  bgColor="var(--background)"
/>
```

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

### Logos Carousel Component Usage

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/logos-carousel/doc.mdx

Import and use the LogosCarousel component in your React application. This example demonstrates how to wrap your logo elements with the carousel.

```tsx
import { LogosCarousel } from "@/registry/spell-ui/logos-carousel";
```

```tsx
<LogosCarousel count={4}>
  <YourLogo1 />
  <YourLogo2 />
  <YourLogo3 />
  <YourLogo4 />
  <YourLogo5 />
  <YourLogo6 />
</LogosCarousel>
```

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

### ShimmerText with Custom Timing

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Customizes the animation timing of ShimmerText using `duration` and `delay` props. Adjust these for specific animation speeds and start delays.

```tsx
import { ShimmerText } from "@/components/ui/shimmer-text";

// With custom timing
<ShimmerText
  duration={2}      // Animation duration in seconds
  delay={0.5}       // Initial delay before animation
  className="text-3xl font-bold"
>
  Custom timed shimmer
</ShimmerText>
```

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

### Kbd Component with Listen Keyboard Prop

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/kbd/doc.mdx

Enable keyboard listening for the Kbd component to visually indicate when the specified keys are pressed simultaneously. This is useful for interactive tutorials or shortcuts.

```tsx
<Kbd keys={["ctrl", "shift", "P"]} listenToKeyboard={true} />
```

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

### BlurReveal with Callbacks

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Implements `onAnimationStart` and `onAnimationComplete` callbacks to hook into the BlurReveal animation lifecycle. Useful for sequencing animations.

```tsx
import { BlurReveal } from "@/components/ui/blur-reveal";

// With callbacks
<BlurReveal
  onAnimationStart={() => console.log("Animation started")}
  onAnimationComplete={() => console.log("Animation complete")}
>
  Animated text with callbacks
</BlurReveal>
```

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

### Import QR Code Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/qr-code/doc.mdx

Import the component from the local registry path.

```tsx
import { QRCode } from "@/components/qr-code";
```

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

### Import TiltCard

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/tilt-card/doc.mdx

Import the TiltCard component into your project.

```tsx
import { TiltCard } from "@/components/tilt-card";
```

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

### HighlightedText Component Usage

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/highlighted-text/doc.mdx

Demonstrates the basic usage of the HighlightedText component.

```APIDOC
## Usage

```tsx
import { HighlightedText } from "@/components/highlighted-text";
```

```tsx
<HighlightedText>
  Your text here
</HighlightedText>
```
```

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

### Blur Reveal Component Usage

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/blur-reveal/doc.mdx

Demonstrates how to import and use the Blur Reveal component in your React application.

```APIDOC
## Blur Reveal Component Usage

### Description
This section shows the basic import and usage of the Blur Reveal component.

### Usage

```tsx
import { BlurReveal } from "@/components/blur-reveal";
```

```tsx
<BlurReveal>Hello, World!</BlurReveal>
```
```

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

### BlurReveal Using Different HTML Elements

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Demonstrates using the `as` prop to render BlurReveal content within different HTML elements like `h1` or `span`, allowing semantic flexibility.

```tsx
import { BlurReveal } from "@/components/ui/blur-reveal";

// Using different HTML elements
<BlurReveal as="h1" className="text-4xl font-bold">
  Heading with blur reveal
</BlurReveal>

<BlurReveal as="span" className="text-sm">
  Inline text animation
</BlurReveal>
```

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

### Import Demo Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/randomized-text/doc.mdx

Imports the main Demo component and a split variant for use in the application.

```tsx
import { Demo } from './demo'
import { Demo as DemoSplit } from './demo-split'
```

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

### Import SpecialText Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/special-text/doc.mdx

Import the component into your project to begin using it.

```tsx
import { SpecialText } from "@/components/special-text";
```

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

### TiltCard Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/tilt-card/doc.mdx

Configuration and usage documentation for the TiltCard component.

```APIDOC
## TiltCard Component

### Description
A React component that adds a 3D tilt effect to its children, supporting custom tilt limits, scaling, and spotlight effects.

### Usage
```tsx
import { TiltCard } from "@/components/tilt-card";

<TiltCard tiltLimit={15} scale={1.05} perspective={1200}>
  <div>Content</div>
</TiltCard>
```

### Props
- **tiltLimit** (number) - Optional - Maximum tilt angle in degrees. Default: 15
- **scale** (number) - Optional - Scale factor on hover. Default: 1.05
- **perspective** (number) - Optional - Perspective distance in pixels. Default: 1200
- **effect** ("gravitate" | "evade") - Optional - Tilt direction: follows cursor or tilts away. Default: "evade"
- **spotlight** (boolean) - Optional - Show a spotlight that follows the cursor on hover. Default: true
- **children** (React.ReactNode) - Required - Card content
- **className** (string) - Optional - Additional CSS classes
- **style** (React.CSSProperties) - Optional - Additional inline styles
```

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

### Import GradientWaveText Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/gradient-wave-text/doc.mdx

Import the component into your React project to begin using it.

```tsx
import { GradientWaveText } from "@/components/gradient-wave-text";
```

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

### Basic FlowButton Usage

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/flow-button/doc.mdx

Render the button with default settings.

```tsx
<FlowButton>Click me</FlowButton>
```

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

### QRCode: Basic Usage

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Generate a basic QR code by providing a value. Import QRCode from '@/components/ui/qr-code'.

```tsx
import { QRCode } from "@/components/ui/qr-code";

// Basic usage
<QRCode value="https://example.com" />
```

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

### Custom Configuration Usage

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/animated-gradient/doc.mdx

Define custom colors and animation parameters by setting the preset to 'custom'.

```tsx
<AnimatedGradient
  config={{
    preset: "custom",
    color1: "#1a1a2e",
    color2: "#16213e",
    color3: "#0f3460",
    rotation: 45,
    speed: 25,
    swirl: 60,
  }}
/>
```

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

### Basic Spinner Usage

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/spinner/doc.mdx

Import and render the Spinner component for a basic loading indicator. Ensure the Spinner component is imported from '@/components/spinner'.

```tsx
import { Spinner } from "@/components/spinner";

<Spinner />
```

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

### Implement ColorSelector component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/color-selector/doc.mdx

Basic implementation showing how to pass colors, a default value, and an onColorSelect callback.

```tsx
<ColorSelector
  colors={["red", "blue", "green"]}
  defaultValue="blue"
  onColorSelect={(color) => console.log(color)}
/>
```

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

### Demo Component Structure

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/animated-checkbox/doc.mdx

Illustrates the basic structure of a Demo component within the Spell UI framework.

```tsx
import { Demo } from './demo'

<DemoCanvas>
  <DemoPreview>
    <Demo />
  </DemoPreview>
  <DemoCode>
    ```tsx file=./demo.tsx
    ```
  </DemoCode>
</DemoCanvas>
```

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

### Enable MCP Component Command

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/mcp/doc.mdx

Use this component to enable Model Context Protocol support in your environment.

```tsx
<CodeBlockCommand mcp/>
```

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

### Import Spotify Card Component

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/spotify-card/doc.mdx

Import the SpotifyCard component into your project to use it.

```tsx
import { SpotifyCard } from "@/components/spotify-card";
```

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

### Implement GradientWaveText

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/gradient-wave-text/doc.mdx

Basic implementation of the component with custom styling.

```tsx
<GradientWaveText className="text-3xl md:text-5xl font-medium tracking-[-.03em]">
  Just ship things.
</GradientWaveText>
```

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

### Badge Component Usage

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/badge/doc.mdx

Import and use the Badge component from the '@components/badge' path. Demonstrates default and variant usage.

```tsx
import { Badge } from "@/components/badge";
```

```tsx
<Badge>Default</Badge>
<Badge variant="blue">Blue</Badge>
<Badge size="sm">Small</Badge>
```

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

### AnimatedCheckbox with onChange Callback

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Illustrates how to handle state changes when the checkbox is interacted with, using the `onCheckedChange` callback.

```tsx
import { AnimatedCheckbox } from "@/components/ui/animated-checkbox";

// With onChange callback
<AnimatedCheckbox
  title="Subscribe to newsletter"
  onCheckedChange={(checked) => {
    console.log("Checked:", checked);
  }}
/>
```

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

### AnimatedCheckbox with Default Checked State

Source: https://context7.com/xxtomm/spell-ui/llms.txt

Shows how to initialize the AnimatedCheckbox in a checked state using the `defaultChecked` prop.

```tsx
import { AnimatedCheckbox } from "@/components/ui/animated-checkbox";

// With default checked state
<AnimatedCheckbox
  title="Already completed"
  defaultChecked={true}
/>
```

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

### Gradient Wave Text Component Usage

Source: https://github.com/xxtomm/spell-ui/blob/main/docs/gradient-wave-text/doc.mdx

Demonstrates how to import and use the GradientWaveText component in your React application.

```APIDOC
## Gradient Wave Text Component Usage

### Description
This section shows how to import and use the `GradientWaveText` component.

### Method
Component Usage

### Endpoint
N/A

### Request Example
```tsx
import { GradientWaveText } from "@/components/gradient-wave-text";

<GradientWaveText className="text-3xl md:text-5xl font-medium tracking-[-.03em]">
  Just ship things.
</GradientWaveText>
```

### Response
N/A
```