---
title: How To Contribute
description: Follow the following guidelines to ensure the smooth collaboration
icon: "lucide:scroll-text"
---

Thank you for your interest in contributing to the **Inspira UI** project! Your contributions help make this project better for everyone. Please take a moment to read through these guidelines to ensure a smooth collaboration.

## Table of Contents

1. [Getting Started](#getting-started)
2. [Code of Conduct](#code-of-conduct)
3. [How to Contribute](#how-to-contribute)
   - [Reporting Bugs](#reporting-bugs)
   - [Suggesting Enhancements](#suggesting-enhancements)
   - [Adding New Components](#adding-new-components)
4. [Project Structure](#project-structure)
5. [Style Guidelines](#style-guidelines)
   - [Coding Standards](#coding-standards)
   - [Component Format](#component-format)
   - [Commit Messages](#commit-messages)
6. [Documentation Guidelines](#documentation-guidelines)
   - [Single-File Components](#single-file-components)
   - [Multi-File Components](#multi-file-components)
7. [Testing](#testing)
8. [License](#license)

---

## Getting Started

- **Fork the Repository**: Create a personal fork of the project on GitHub.
- **Clone Your Fork**: Clone your forked repository to your local machine.
- **Create a Branch**: Create a new branch for your contribution (`git checkout -b feature/YourFeatureName`).
- **Install Dependencies**: Run `npm install` to install all necessary dependencies.

## Code of Conduct

By participating in this project, you agree to abide by the [Code of Conduct](./4.code-of-conduct.md), which aims to foster an open and welcoming environment.

## How to Contribute

### Reporting Bugs

If you find a bug, please open an [issue](https://github.com/unovue/inspira-ui/issues){:target="\_blank"} and include:

- A clear and descriptive title.
- Steps to reproduce the issue.
- Expected and actual results.
- Screenshots or code snippets, if applicable.

### Suggesting Enhancements

We welcome suggestions for new features or improvements. Please open an [issue](https://github.com/unovue/inspira-ui/issues){:target="\_blank"} and include:

- A clear and descriptive title.
- A detailed description of the enhancement.
- Any relevant examples or mockups.

### Adding New Components

We appreciate contributions that add new components to the library. Please ensure that:

- The component is generally useful and aligns with the project's goals.
- The component is compatible with both **Nuxt** and **Vue**.
- You follow the coding and documentation guidelines outlined below.
- You include unit tests for your component.

## Project Structure

Understanding the project structure is crucial for effective contribution:

- **Components Directory**:
  - Main components should be placed in `components/content/inspira/ui/<component-folder-name>/`.
  - Example components should be placed in `components/content/inspira/examples/<component-folder-name>/`.
- **Documentation**:
  - Documentation files are located in the `content/2.components/<category>/` directory.
  - After adding a component, write its documentation in this directory.

## Style Guidelines

### Coding Standards

- **Language**: All components should be written in **Vue.js** with TypeScript support.
- **Styling**: Use **Tailwind CSS** classes for styling whenever possible.
- **Naming Conventions**: Use `PascalCase` for component names and filenames.

### Component Format

Your Vue components should adhere to the following structure:

```vue
<!-- Template -->
<template>
  <!-- Your template code goes here -->
</template>

<!-- Script (if required) -->
<script lang="ts" setup>
// Your script code goes here
</script>

<!-- Styles (if required) -->
<style scoped>
/* Your styles go here */
</style>
```

**Props typing and code style**

Refer to this Vue.js documentation page -> https://vuejs.org/api/sfc-script-setup#type-only-props-emit-declarations

```vue
<script lang="ts" setup>
// DON'T ⛔
const props = defineProps({
  whatever: { type: String, required: true },
  optional: { type: String, default: "default" },
});

// DO ✅
interface Props {
  whatever: string;
  optional?: string;
}

const props = withDefaults(defineProps<Props>(), { optional: "default" });

//Or DO ✅ Props destructure (v3.5+)
interface Props {
  msg?: string;
  labels?: string[];
}

const { msg = "hello", labels = ["one", "two"] } = defineProps<Props>();
</script>
```

**Constants, interfaces, types and variants**

For reusability purposes, you can also add an `index.ts` file at the root of the component folder to export interfaces, constants, and other useful code elements. Keep in mind that developers will copy and paste the component code into their projects, so it should be very easy to customize according to their standards.

Contants have to be `CAPS_CAMEL_CASE` in order to identify them clearly inside the code. And `prefix` them.
Please never use Enums; use `{} as const` instead. 😘

```typescript
// DON'T ⛔
const Direction = { Top: 'top'} as const
const ComponentNameDirection = { Top: 'top'} as const

// DON'T ⛔
enum COMPONENT_NAME_DIRECTION_WRONG = { Top = 'top'};

// DO ✅
import type { ObjectValues } from "@/lib/utils";
export const COMPONENT_NAME_DIRECTION = { Top: 'top', Bottom: 'bottom'} as const

//Types and Interfaces should use CamelCase to differentiate them from constants and variables.
export type ComponentNameDirection = ObjectValues<typeof COMPONENT_NAME_DIRECTION>;

interface {
   direction: ComponentNameDirection; //Enforce correct value : 'top' or 'bottom'
}
```

You can check the `PatternBackground` component files `components/content/inspira/ui/pattern-background` for a complete example.

**Notes:**

- Use `<script lang="ts" setup>` for TypeScript and the Composition API.
- Keep styles scoped to prevent conflicts.
- Ensure compatibility with both **Nuxt** and **Vue**.

### Commit Messages

- Use the [Conventional Commits](https://www.conventionalcommits.org/) format.
- Begin with a type (`feat`, `fix`, `docs`, etc.) followed by a short description.
- Example: `feat: add TextHoverEffect component`

## Documentation Guidelines

Proper documentation is crucial for users to understand and effectively use the components. Follow these guidelines when adding documentation for new components.

### Steps to Add a New Component

1. **Create the Component**

   - Place the main component in `components/content/inspira/ui/<component-folder-name>/`.
   - Follow the [Component Format](#component-format) specified above.
   - If the component requires examples or demos, add demo components to `components/content/inspira/examples/<component-folder-name>/`.

2. **Write Documentation**

   - Add a new Markdown file in `content/2.components/<category>/` for your component's documentation.
   - Use the appropriate template based on whether your component is single-file or multi-file (see below).
   - Mention the **Credits** and source if the component is ported from any other UI library or taken inspiration from any other source.

3. **Ensure Compatibility**

   - Test your component in both **Nuxt** and **Vue** environments.

### Single-File Components

For components that are contained within a single `.vue` file, use the following template:

1. **Front Matter**

   Begin with YAML front matter that includes the `title` and `description`:

   ```yaml
   ---
   title: Your Component Title
   description: A brief description of what your component does.
   ---
   ```

2. **Preview Section**

   Use the `ComponentLoader` to display a live preview of the component. The `id` should be set to the folder name of your component in `components/content/inspira/examples/`. In case, there is no folder, then `id` is not required.

   ```markdown
   ::ComponentLoader{label="Preview" componentName="YourComponentDemo" type="examples" id="your-component-folder-name"}
   ::
   ```

3. **API Documentation**

   Provide a table listing all props:

   ```markdown
   ## API

   | Prop Name | Type      | Default | Description                    |
   | --------- | --------- | ------- | ------------------------------ |
   | `prop1`   | `string`  | `''`    | Description of prop1.          |
   | `prop2`   | `number`  | `0`     | Description of prop2.          |
   | `prop2`   | `?number` | `0`     | Description of prop2 optional. |
   ```

4. **Component Code**

   Include the full code of the component using `CodeViewer`. The `id` should be set to the folder name of your component in `components/content/inspira/ui/`.

   ```markdown
   ## Component Code

   You can copy and paste the following code to create this component:

   ::CodeViewer{filename="YourComponent.vue" language="vue" componentName="YourComponent" type="ui" id="your-component-folder-name"}
   ::
   ```

**Example:**

```markdown
---
title: Text Hover Effect
description: A text hover effect that animates and outlines gradient on hover.
---

::ComponentLoader{label="Preview" componentName="TextHoverEffectDemo" type="examples" id="text-hover-effect"}
::

## API

| Prop Name     | Type     | Default  | Description                                               |
| ------------- | -------- | -------- | --------------------------------------------------------- |
| `text`        | `string` | Required | The text to be displayed with the hover effect.           |
| `duration`    | `number` | `200`    | The duration of the mask transition animation in seconds. |
| `strokeWidth` | `number` | `0.75`   | The width of the text stroke.                             |
| `opacity`     | `number` | `null`   | The opacity of the text.                                  |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="TextHoverEffect.vue" language="vue" componentName="TextHoverEffect" type="ui" id="text-hover-effect"}
::
```

In this example, the `id` used in both `ComponentLoader` and `CodeViewer` is `text-hover-effect`, which matches the folder name where the component and its demo are stored.

### Multi-File Components

For components that consist of multiple files, such as a main component and several sub-components or variants, use the following template:

1. **Front Matter**

   Begin with YAML front matter:

   ```yaml
   ---
   title: Your Components Group Title
   description: A brief description of what this group of components does.
   ---
   ```

2. **Preview Sections**

   Include multiple `ComponentLoader` sections for each example or variant. The `id` should be set to the folder name of your component in `components/content/inspira/examples/`.

   ```markdown
   ::ComponentLoader{label="Preview" componentName="ComponentVariantDemo" type="examples" id="your-component-folder-name"}
   ::
   ```

3. **API Documentation**

   Provide comprehensive API documentation covering all components:

   ```markdown
   ## API

   | Prop Name | Type     | Default | Description                             |
   | --------- | -------- | ------- | --------------------------------------- |
   | `prop1`   | `string` | `''`    | Description applicable to all variants. |
   ```

4. **Utility Classes**

   If applicable, list any utility classes:

   ```markdown
   ### Utility Classes

   - **Class Name:** `class-description`
   ```

5. **Component Code**

   Use a `code-group` to group multiple `CodeViewerTab` components, one for each file. The `id` should be set to the folder name of your component in `components/content/inspira/ui/`.

   ```markdown
   ## Component Code

   You can copy and paste the following code to create these components:

   ::code-group

   ::CodeViewerTab{label="MainComponent.vue" language="vue" componentName="MainComponent" type="ui" id="your-component-folder-name"}
   ::

   ::CodeViewerTab{filename="VariantOne.vue" language="vue" componentName="VariantOne" type="ui" id="your-component-folder-name"}
   ::

   ::CodeViewerTab{filename="VariantTwo.vue" language="vue" componentName="VariantTwo" type="ui" id="your-component-folder-name"}
   ::

   ::
   ```

**Example:**

```markdown
---
title: Pattern Backgrounds
description: Simple animated pattern backgrounds to make your sections stand out.
---

::ComponentLoader{label="Preview" componentName="DotBackgroundDemo" type="examples" id="pattern-backgrounds"}
::

## Examples

Grid background without animation:

::ComponentLoader{label="Preview" componentName="GridBackgroundDemo" type="examples" id="pattern-backgrounds"}
::

Small grid background with animation:

::ComponentLoader{label="Preview" componentName="GridSmallBackgroundDemo" type="examples" id="pattern-backgrounds"}
::

## API

| Prop Name   | Type                                                                                | Default | Description                           |
| ----------- | -------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------- |
| `animate`   | `boolean`                                                                                | `false` | Set `true` to animate the background. |
| `direction` | `'top' \| 'bottom' \| 'left' \| 'right' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top'` | Direction of the animation movement.  |

### Utility Classes

- **Dot Pattern:** `dark:bg-dot-white/[0.2] bg-dot-black/[0.2]`
- **Grid Pattern:** `dark:bg-grid-white/[0.2] bg-grid-black/[0.2]`
- **Small Grid Pattern:** `dark:bg-grid-small-white/[0.2] bg-grid-small-black/[0.2]`

## Component Code

You can copy and paste the following code to create these components:

::code-group

::CodeViewerTab{label="PatternBackground.vue" language="vue" componentName="PatternBackground" type="ui" id="pattern-backgrounds"}
::

::CodeViewerTab{filename="DotBackground.vue" language="vue" componentName="DotBackground" type="ui" id="pattern-backgrounds"}
::

::CodeViewerTab{filename="GridBackground.vue" language="vue" componentName="GridBackground" type="ui" id="pattern-backgrounds"}
::

::CodeViewerTab{filename="GridSmallBackground.vue" language="vue" componentName="GridSmallBackground" type="ui" id="pattern-backgrounds"}
::

::
```

In this example, the `id` used in `ComponentLoader` and all `CodeViewerTab` components is `pattern-backgrounds`, which matches the folder name where the components and their demos are stored.

## Testing

- **Unit Tests**: Write unit tests for your component if applicable.
- **Cross-Environment Testing**: Ensure that your component works correctly in both **Nuxt** and **Vue** environments.
- **Visual Testing**: Check the component visually to ensure it renders correctly.

## Additional Notes

- **Component Names**: Use `PascalCase` for component filenames and names.
- **IDs**: In `CodeViewer`, `CodeViewerTab`, and `ComponentLoader`, the `id` parameter should be set to the **folder name** where the component is stored in `components/content/inspira/ui/<component-folder-name>/` and `components/content/inspira/examples/<component-folder-name>/`. This helps in correctly linking the code and examples in the documentation.
- **Demo Components**: For each component, create a corresponding `Demo` component used in the `ComponentLoader` for previews, and place it in `components/content/inspira/examples/<component-folder-name>/`.
- **Localization**: If your component supports multiple languages, include details in the documentation.

## License

By contributing, you agree that your contributions will be licensed under the [MIT License](https://github.com/unovue/inspira-ui/blob/main/LICENSE){:target="\_blank"}.


---
title: Code of Conduct
description: Code of Conduct outlines our expectation for participant behavior as well as consequences for unacceptable conduct.
icon: "lucide:award"
---

## Introduction

We are committed to providing a friendly, safe, and welcoming environment for everyone involved in the **Inspira UI** project. This Code of Conduct outlines our expectations for participant behavior as well as the consequences for unacceptable conduct.

## Our Pledge

In the interest of fostering an open and inclusive community, we pledge to make participation in our project and community a harassment-free experience for everyone, regardless of:

- Age
- Body size
- Disability
- Ethnicity
- Gender identity and expression
- Level of experience
- Nationality
- Personal appearance
- Race
- Religion
- Sexual identity and orientation

## Expected Behavior

All participants in our community are expected to:

- **Be Respectful**: Show empathy and kindness towards others.
- **Be Considerate**: Remember that your actions and words affect others.
- **Be Collaborative**: Work together to achieve common goals.
- **Communicate Effectively**: Use clear and constructive language.
- **Demonstrate Professionalism**: Act professionally and take responsibility for your actions.

## Unacceptable Behavior

The following behaviors are considered unacceptable within our community:

- **Harassment and Discrimination**: Including derogatory comments, slurs, or unwanted sexual attention.
- **Abuse and Threats**: Any form of verbal or written abuse, intimidation, or threats.
- **Trolling and Insults**: Provocative or insulting remarks intended to disrupt conversations.
- **Disrespectful Communication**: Including excessive profanity, shouting (using all caps), or interrupting others.
- **Personal Attacks**: Targeting an individual with the intent to harass or belittle.

## Reporting Guidelines

If you experience or witness unacceptable behavior, or have any other concerns, please report it as soon as possible by contacting the project maintainers on our **Discord channel**:

[Inspira UI Discord Channel](https://discord.gg/Xbh5DwJRc9)

When reporting an incident, please include:

- **Your Contact Information**: Your Discord username or any preferred method of contact.
- **Names of Those Involved**: Real names or usernames of the individuals involved.
- **Description of the Incident**: A clear and concise account of what happened.
- **Supporting Evidence**: Any relevant messages, screenshots, or context that can help us understand the situation.

All reports will be handled confidentially.

## Enforcement

Project maintainers are responsible for ensuring compliance with this Code of Conduct and will take appropriate action in response to any behavior that is deemed unacceptable. Actions may include:

- A private warning to the offender.
- Temporary or permanent ban from participation in the project and Discord channel.
- Removal of contributions that violate the Code of Conduct.

## Scope

This Code of Conduct applies to all project spaces, including but not limited to:

- GitHub repositories
- Issue trackers
- Pull requests
- Project-related forums and chat channels
- Social media interactions pertaining to the project
- The official **Inspira UI Discord channel**

It also applies when an individual is representing the project or its community in public spaces.

## Appeal Process

Any individual who is subjected to disciplinary action has the right to appeal the decision by contacting the project maintainers through the **Discord channel** within one week of the action. The appeal will be reviewed, and a final decision will be communicated.

## Privacy

All reports of unacceptable behavior will be handled with discretion. We will respect the privacy of the reporter and the accused.

## Acknowledgments

We thank all contributors and community members for helping to create a positive environment. This Code of Conduct is adapted from best practices and guidelines used in open-source communities.

## Contact Information

For questions or concerns about this Code of Conduct, please contact the project maintainers on our **Discord channel**:

[Inspira UI Discord Channel](https://discord.gg/Xbh5DwJRc9)

Build beautiful website using Vue & Nuxt.


---
title: Component Index
description: List of all the components provided by Inspira UI.
navigation: false
---

## All components

::ComponentIndex
::


---
title: Block Index
description: List of all the blocks provided by Inspira UI.
navigation: false
---

## All Blocks

::ComponentIndex{path="blocks"}
::


---
title: Aurora Background
description: A subtle Aurora or Southern Lights background for your website.
---

::ComponentLoader{label="Preview" componentName="AuroraBackgroundDemo" type="examples" id="aurora-background"}
::

## API

| Prop Name        | Type      | Default | Description                                                               |
| ---------------- | --------- | ------- | ------------------------------------------------------------------------- |
| `class`          | `string`  | `-`     | Additional CSS classes to apply to the component for styling.             |
| `radialGradient` | `boolean` | `true`  | Determines whether a radial gradient effect is applied to the background. |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="AuroraBackground.vue" language="vue" componentName="AuroraBackground" type="ui" id="aurora-background"}
::

## Features

- **Slot Support**: Easily add any content inside the component using the default slot.

## Credits

- Credits to [Aceternity UI](https://ui.aceternity.com/components/aurora-background).
- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for porting this component.


---
title: Bubbles Background
description: An animated background with floating bubbles.
---

::ComponentLoader{label="Preview" componentName="BubblesBgDemo2" type="examples" id="backgrounds"}
::

## Example

Without Blur or overlay

::ComponentLoader{label="Preview" componentName="BubblesBgDemo" type="examples" id="backgrounds"}
::

::alert{type="info"}
**Note:** This component uses Three.js & requires `three` npm package as a dependency.

Please install Three.js using following commands.

    ::code-group

    ```bash [npm]
    npm install three
    npm install -D @types/three
    ```

    ```bash [pnpm]
    pnpm install three
    pnpm install -D @types/three
    ```

    ```bash [bun]
    bun add three
    bun add -d @types/three
    ```

    ```bash [yarn]
    yarn add three
    yarn add --dev @types/three
    ```
    ::

::

## API

| Prop Name | Type     | Default | Description                                                     |
| --------- | -------- | ------- | --------------------------------------------------------------- |
| `blur`    | `number` | `0`     | Amount of blur to apply to the background, specified in pixels. |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="BubblesBg.vue" language="vue" componentName="BubblesBg" type="ui" id="bg-bubbles"}
::

## Features

- **Animated Bubble Background**: Renders a captivating background with animated, floating bubbles using 3D graphics.

- **Dynamic Color Gradients**: The bubbles and background smoothly transition between colors over time, creating a visually engaging effect.

- **Customizable Blur Effect**: Use the `blur` prop to adjust the blur intensity applied over the background, enhancing depth perception.

- **Slot Support**: Easily overlay content on top of the animated background using the default slot.

- **Responsive Design**: The component adjusts to fit the width and height of its parent container, ensuring compatibility across different screen sizes.

## Credits

- Built with the [Three.js](https://threejs.org/) library for 3D rendering and animations.
- Inspired from [Tresjs Experiment](https://lab.tresjs.org/experiments/overlay).


---
title: Falling Stars Background
description: A stunning animated starfield background with glowing and sharp trail effects.
---

::ComponentLoader{label="Preview" componentName="FallingStarsBgDemo" type="examples" id="backgrounds"}
::

## API

| Prop Name | Type     | Default  | Description                                 |
| --------- | -------- | -------- | ------------------------------------------- |
| `color`   | `string` | `"#FFF"` | Color of the stars in the starfield.        |
| `count`   | `number` | `200`    | Number of stars displayed in the animation. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="FallingStarsBg.vue" language="vue" componentName="FallingStarsBg" type="ui" id="bg-falling-stars"}
::

## Features

- **Dynamic Starfield**: Creates a 3D starfield effect with stars moving toward the viewer.
- **Glowing and Sharp Trail Effects**: Each star has a sharp line and a blurred, glowing trail.
- **Customizable**: Adjust the `color` of the stars and control the number of stars using the `count` prop.
- **Responsive Design**: Automatically adapts to the size of the canvas, ensuring a full-screen starfield effect.

## Credits

- Inspired by 3D starfield simulations and trail effects in modern canvas animations.
- Credit to [Prodromos Pantos](https://github.com/prpanto) for porting the original component to Vue & Nuxt.


---
title: Flickering Grid
description: A flickering grid background made with Canvas, fully customizable using Tailwind CSS.
---

::ComponentLoader{label="Preview" componentName="FlickeringGridDemo" type="examples" id="flickering-grid"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## API

| Prop Name       | Type     | Default        | Description                            |
| --------------- | -------- | -------------- | -------------------------------------- |
| `squareSize`    | `number` | `4`            | Size of each square in the grid.       |
| `gridGap`       | `number` | `6`            | Gap between squares in the grid.       |
| `flickerChance` | `number` | `0.3`          | Probability of a square flickering.    |
| `color`         | `string` | `rgb(0, 0, 0)` | Color of the squares.                  |
| `width`         | `number` | `-`            | Width of the canvas.                   |
| `height`        | `number` | `-`            | Height of the canvas.                  |
| `class`         | `string` | `-`            | Additional CSS classes for the canvas. |
| `maxOpacity`    | `number` | `0.2`          | Maximum opacity of the squares.        |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="FlickeringGrid.vue" language="vue" componentName="FlickeringGrid" type="ui" id="flickering-grid"}
::

## Credits

- Credits to [magicui flickering-grid](https://magicui.design/docs/components/flickering-grid) for this component.


---
title: Interactive Grid Pattern
description: A interactive background grid pattern made with SVGs, fully customizable.
navBadges:
  - value: New
    type: lime
---

::ComponentLoader{label="Preview" componentName="InteractiveGridPatternDemo" type="examples" id="interactive-grid-pattern"}
::

## Examples

::ComponentLoader{label="Preview" componentName="InteractiveGridPatternColoredDemo" type="examples" id="interactive-grid-pattern"}
::

## API

#### Props

| Prop Name          | Type               | Default    | Description                                   |
| ------------------ | ------------------ | ---------- | --------------------------------------------- |
| `className`        | `string`           | -          | Additional classes for styling the component. |
| `squaresClassName` | `string`           | -          | Additional classes for styling the squares.   |
| `width`            | `number`           | `40`       | Width of the square in pixels.                |
| `height`           | `number`           | `40`       | Height of the square in pixels.               |
| `squares`          | `[number, number]` | `[24, 24]` | Number of squares in the grid pattern.        |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{label="InteractiveGridPattern.vue" icon="vscode-icons:file-type-vue" componentName="InteractiveGridPattern" type="ui" id="interactive-grid-pattern"}
::

## Credits

- Inspired by [MagicUI](https://magicui.design/docs/components/interactive-grid-pattern).
- Credits to [kalix127](https://github.com/kalix127) for porting this component.


---
title: Lamp Effect
description: A captivating lamp lighting effect with conic gradients, spotlights, and glowing lines for an immersive visual experience.
---

::ComponentLoader{label="Preview" componentName="LampEffectDemo" type="examples"}
::

## API

| Prop Name  | Type     | Default | Description                                    |
| ---------- | -------- | ------- | ---------------------------------------------- |
| `delay`    | `number` | `0.5`   | Delay before the animation starts, in seconds. |
| `duration` | `number` | `0.8`   | Duration of the animation, in seconds.         |
| `class`    | `string` | `""`    | Additional CSS classes for custom styling.     |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="LampEffect.vue" language="vue" componentName="LampEffect" type="ui" id="lamp-effect"}
::

## Features

- **Conic Gradient Animation**: Creates a smooth expanding conic gradient effect, giving a dynamic light-source appearance.
- **Spotlight Animation**: The spotlight smoothly expands, providing a focused lighting effect.
- **Glowing Line Effect**: A glowing line animates across the center, simulating a light beam or laser.
- **Customizable Timing**: The `delay` and `duration` props allow for precise control of animation timings.
- **Slot-Based Content**: Supports default slot content, making it easy to overlay text or other components.

## Credits

- Ported from [Aceternity UI](https://ui.aceternity.com/components/lamp-effect)


---
title: Particle Whirlpool
description: An animated background with swirling particles.
---

::ComponentLoader{label="Preview" componentName="ParticleWhirlpoolBgDemo" type="examples" id="backgrounds"}
::

## Examples

Without blur and overlay

::ComponentLoader{label="Preview" componentName="ParticleWhirlpoolBgDemo2" type="examples" id="backgrounds"}
::

With `particleCount` 500

::ComponentLoader{label="Preview" componentName="ParticleWhirlpoolBgDemo3" type="examples" id="backgrounds"}
::

::alert{type="info"}
**Note:** This component uses Three.js & requires `three` & `postprocessing` npm package as a dependency.

Please install Three.js using following commands.

    ::code-group

    ```bash [npm]
    npm install three postprocessing
    npm install -D @types/three
    ```

    ```bash [pnpm]
    pnpm install three postprocessing
    pnpm install -D @types/three
    ```

    ```bash [bun]
    bun add three postprocessing
    bun add -d @types/three
    ```

    ```bash [yarn]
    yarn add three postprocessing
    yarn add --dev @types/three
    ```
    ::

::

## API

| Prop Name       | Type     | Default | Description                                                     |
| --------------- | -------- | ------- | --------------------------------------------------------------- |
| `class`         | `string` | `""`    | Additional CSS classes for custom styling.                      |
| `blur`          | `number` | `0`     | Amount of blur to apply to the background, specified in pixels. |
| `particleCount` | `number` | `2000`  | Number of particles in the whirlpool animation.                 |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="ParticleWhirlpoolBg.vue" language="vue" componentName="ParticleWhirlpoolBg" type="ui" id="bg-particle-whirlpool"}
::

## Features

- **Interactive Whirlpool Animation**: Renders a captivating whirlpool effect with particles that respond to mouse and touch interactions.

- **Customizable Particle Count**: Adjust the `particleCount` prop to control the number of particles in the animation.

- **Dynamic Blur Effect**: Use the `blur` prop to apply a blur effect over the background, enhancing the visual depth.

- **Slot Support**: Overlay additional content on top of the animation using the default slot.

- **Responsive Design**: The component adjusts to fit the width and height of its parent container, ensuring compatibility across different screen sizes.

## Credits

- Built with the [Three.js](https://threejs.org/) library for 3D rendering and animations.

- Inspired by [TroisJs](https://troisjs.github.io/examples/demos/3.html)


---
title: Particles Background
description: Particles can add a dynamic and engaging element to your website's visuals. They help create a feeling of depth, motion, and interaction, making the site more visually appealing.
---

::ComponentLoader{label="Preview" componentName="ParticlesBgDemo" type="examples"}
::

## API

| Prop Name   | Type     | Default | Description                                                                                |
| ----------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------- |
| `color`     | `string` | `#FFF`  | Hexadecimal color code used for particles. Supports 3 or 6 character hex codes.                             |
| `quantity`  | `number` | `100`   | The number of particles to generate and display on the canvas.                                              |
| `staticity` | `number` | `50`    | Determines how much the particles move based on the mouse's proximity. Higher values reduce movement.       |
| `ease`      | `number` | `50`    | Controls the easing effect of particle movement; lower values make particles follow the mouse more closely. |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="ParticlesBg.vue" language="vue" componentName="ParticlesBg" type="ui" id="particles-bg"}
::

## Credits

- Credits to [Magic UI](https://magicui.design/docs/components/particles) for this fantastic component.
- Credit to [Prodromos Pantos](https://github.com/prpanto) for porting the original component to Vue & Nuxt.


---
title: Pattern Background
description: Simple animated pattern background to make your sections stand out.
---

Grid background with dot
::ComponentLoader{label="Preview" componentName="PatternBackgroundDotDemo" type="examples" id="pattern-background"}
::

Grid background with big dot and ellipse on top
::ComponentLoader{label="Preview" componentName="PatternBackgroundBigDotDemo" type="examples" id="pattern-background"}
::

## Examples

Grid background without animation
::ComponentLoader{label="Preview" componentName="PatternBackgroundGridDemo" type="examples" id="pattern-background"}
::

Small grid background with animation
::ComponentLoader{label="Preview" componentName="PatternBackgroundGridSmallDemo" type="examples" id="pattern-background"}
::

## API

| Prop Name   | Type                                                                                | Default   | Description                                                                                |
| ----------- | ------------------------------------------------------------------------------------------------------ | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `animate`   | `boolean`                                                                                | `false`   | Set `true` if you want to animate the background.                                                                                |
| `direction` | `top` \| `bottom` \| `left` \| `right` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right` | `top`     | Direction of the animation movement. You can use the const `PATTERN_BACKGROUND_DIRECTION.`                                                                     |
| `direction` | `grid` \| `dot`                                                                                | `grid`    | Type of pattern. You can use the const `PATTERN_BACKGROUND_VARIANT.`                                                                                |
| `size`      | `xs` \| `sm` \| `md` \| `lg`                                                                           | `md`      | Size of the background pattern.                                                                                |
| `mask`      | `ellipse` \| `ellipse-top`                                                                             | `ellipse` | Add a mask over the background pattern. You can use the const `PATTERN_BACKGROUND_MASK.`                                                                       |
| `speed`     | `number`                                                                                | `10000`   | Duration of the animation in `ms`, the bigger it is, the slower the animation. (`20000` slower than `5000`). You can use the const `PATTERN_BACKGROUND_SPEED.` |

### Custom variants, values and constants

You can customize your needs directly within the `index.ts` file. See code below.

## Component Code

You can copy and paste the following code to create these components (put them under the same folder):

::code-group

::CodeViewerTab{label="PatternBackground.vue" language="vue" componentName="PatternBackground" type="ui" id="pattern-background"}
::

::CodeViewerTab{filename="index.ts" language="typescript" componentName="index" type="ui" id="pattern-background" extension="ts"}
::

::

## Credits

- Inspired by [Magic UI's Dot Pattern](https://magicui.design/docs/components/dot-pattern) component.
- Inspired by [Magic UI's Grid Pattern](https://magicui.design/docs/components/grid-pattern) component.
- Inspired by [Magic UI's Animated Grid Pattern](https://magicui.design/docs/components/animated-grid-pattern) component.
- Credits to [Nathan De Pachtere](https://nathandepachtere.com/) for porting this component.


---
title: Ripple
description: An animated ripple effect typically used behind elements to emphasize them.
---

::ComponentLoader{label="Preview" componentName="RippleDemo" type="examples" id="ripple"}
::

## Examples

Only lines

::ComponentLoader{label="Preview" componentName="RippleDemoLinesOnly" type="examples" id="ripple"}
::

Squared

::ComponentLoader{label="Preview" componentName="RippleDemoSquared" type="examples" id="ripple"}
::

Blobed

::ComponentLoader{label="Preview" componentName="RippleDemoBlobed" type="examples" id="ripple"}
::

## API

| Prop Name                     | Type     | Default     | Description                                                            |
| ----------------------------- | -------- | ----------- | ---------------------------------------------------------------------- |
| `baseCircleSize`              | `number` | `210`       | The size of the main circle in pixels.                                 |
| `baseCircleOpacity`           | `number` | `0.24`      | The opacity of the main circle.                                        |
| `spaceBetweenCircle`          | `number` | `70`        | The space between each ripple circle in pixels.                        |
| `circleOpacityDowngradeRatio` | `number` | `0.03`      | The rate at which opacity decreases for each successive ripple circle. |
| `circleClass`                 | `string` | `undefined` | CSS class name(s) for additional styling of circles.                   |
| `waveSpeed`                   | `number` | `80`        | The animation speed for the wave effect, measured in ms.               |
| `numberOfCircles`             | `number` | `7`         | The number of ripple circles to render.                                |

## Component Code

You can copy and paste the following code to create this component:

::code-group

::CodeViewerTab{filename="Ripple.vue" language="vue" componentName="Ripple" type="ui" id="ripple"}
::

::CodeViewerTab{filename="RippleCircle.vue" language="vue" componentName="RippleCircle" type="ui" id="ripple"}
::

::CodeViewerTab{filename="RippleContainer.vue" language="vue" componentName="RippleContainer" type="ui" id="ripple"}
::

::

## Credits

- Credits to [Magic UI](https://magicui.design/docs/components/ripple).
- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for porting this component.
- Credits to [Nathan De Pachtere](https://nathandepachtere.com/) for updating this component.


---
title: Snowfall Background
description: A beautifully animated snowfall effect applied as a background.
---

::ComponentLoader{label="Preview" componentName="SnowfallBgDemo" type="examples" id="backgrounds"}
::

## API

| Prop Name   | Type     | Default | Description                                               |
| ----------- | -------- | ------- | --------------------------------------------------------- |
| `color`     | `string` | `#FFF`  | Color of the snowflakes in hexadecimal format.            |
| `quantity`  | `number` | `100`   | Number of snowflakes to display.                          |
| `speed`     | `number` | `1`     | Speed at which snowflakes fall.                           |
| `maxRadius` | `number` | `3`     | Maximum radius of snowflakes.                             |
| `minRadius` | `number` | `1`     | Minimum radius of snowflakes.                             |
| `class`     | `string` | `null`  | Additional CSS classes to apply to the container element. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="SnowfallBg.vue" icon="vscode-icons:file-type-vue" language="vue" componentName="SnowfallBg" type="ui" id="snowfall-bg"}
::

## Credits

- Inspired by natural snowfall effects.


---
title: Sparkles
description: A configurable sparkles component that can be used as a background or as a standalone component.
---

::ComponentLoader{label="Preview" componentName="SparklesDemo" type="examples" id="sparkles"}
::

## Examples

Sparkles Full Page

::ComponentLoader{label="Preview" componentName="SparklesFullPageDemo" type="examples" id="sparkles"}
::

## API

| Prop Name         | Type     | Default     | Description                                                                            |
| ----------------- | -------- | ----------- | -------------------------------------------------------------------------------------- |
| `background`      | `string` | `'#0d47a1'` | Background color of the container. Use 'transparent' to see through to parent element. |
| `particleColor`   | `string` | `'#ffffff'` | Color of the particles. Accepts any valid CSS color value.                             |
| `minSize`         | `number` | `1`         | Minimum size of particles in pixels.                                                   |
| `maxSize`         | `number` | `3`         | Maximum size of particles in pixels.                                                   |
| `speed`           | `number` | `4`         | Movement speed multiplier. Higher values create faster movement.                       |
| `particleDensity` | `number` | `120`       | Number of particles to render. Higher values create denser particle fields.            |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="Sparkles.vue" language="vue" componentName="Sparkles" type="ui" id="sparkles"}
::

## Credits

- Credits to [M Atif](https://github.com/atif0075) for porting this component.

- Ported from [Aceternity UI's Sparkles](https://ui.aceternity.com/components/sparkles).


---
title: Tetris
description: Tetris background component, you can even click on a block to eliminate it.
---

::ComponentLoader{label="Preview" componentName="TetrisDemo" type="examples" id="tetris"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

::alert
**Note:** This component requires `theme-colors` as a dependency. Please install these using following commands.

    ::code-group

    ```bash [npm]
    npm install theme-colors
    ```

    ```bash [pnpm]
    pnpm install theme-colors
    ```

    ```bash [bun]
    bun add theme-colors
    ```

    ```bash [yarn]
    yarn add theme-colors
    ```
    ::

::

## API

| Prop Name      | Type     | Default | Description                                    |
| -------------- | -------- | ------- | ---------------------------------------------- |
| `class`        | `string` | `""`    | Additional class names to style the component. |
| `base`         | `number` | `10`    | How many blocks do you have in a row.          |
| `square-color` | `string` | `""`    | Square color.                                  |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="Tetris.vue" language="vue" componentName="Tetris" type="ui" id="tetris"}
::

## Credits

- Credits to [Whbbit1999](https://github.com/Whbbit1999) for this component.
- Inspired and ported from [Nuxt UI Home](https://ui.nuxt.com/).


---
title: Vortex Background
description: A wavy, swirly, vortex background ideal for CTAs and backgrounds.
---

::ComponentLoader{label="Preview" componentName="VortexDemo" type="examples" id="vortex"}
::

## Example

Full page demo usage

::ComponentLoader{label="Preview" componentName="VortexFullPageDemo" type="examples" id="vortex"}
::

::alert{type="info"}
**Note:** This component uses simplex-noise & requires `simplex-noise` npm package as a dependency.

Please install simplex-noise using following commands.

    ::code-group

    ```bash [npm]
    npm install simplex-noise
    ```

    ```bash [pnpm]
    pnpm install simplex-noise
    ```

    ```bash [bun]
    bun add simplex-noise
    ```

    ```bash [yarn]
    yarn add simplex-noise
    ```
    ::

::

## API

| Prop Name         | Type     | Default     | Description                                          |
| ----------------- | -------- | ----------- | ---------------------------------------------------- |
| `class`           | `string` |             | Optional className for styling the children wrapper. |
| `containerClass`  | `string` |             | Optional className for styling the container.        |
| `particleCount`   | `number` | `700`       | Number of particles to be generated.                 |
| `rangeY`          | `number` | `100`       | Vertical range for particle movement.                |
| `baseHue`         | `number` | `220`       | Base hue for particle color.                         |
| `baseSpeed`       | `number` | `0.0`       | Base speed for particle movement.                    |
| `rangeSpeed`      | `number` | `1.5`       | Range of speed variation for particles.              |
| `baseRadius`      | `number` | `1`         | Base radius of particles.                            |
| `rangeRadius`     | `number` | `2`         | Range of radius variation for particles.             |
| `backgroundColor` | `string` | `"#000000"` | Background color of the canvas.                      |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="Vortex.vue" language="vue" componentName="Vortex" type="ui" id="vortex"}
::

## Features

- **Slot Support**: Easily add any content inside the component using the default slot.

## Credits

- Credits to [Aceternity UI](https://ui.aceternity.com/components/vortex).
- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for porting this component.


---
title: Warp Background
description: A container component that applies a warp animation effect to its children
---

::ComponentLoader{label="Preview" componentName="WarpBackgroundDemo" type="examples" id="warp-background"}
::

## API

| Prop Name      | Type     | Default                | Description                               |
| -------------- | -------- | ---------------------- | ----------------------------------------- |
| `perspective`  | `number` | `100`                  | The perspective of the warp animation     |
| `beamsPerSide` | `number` | `3`                    | The number of beams per side              |
| `beamSize`     | `number` | `5`                    | The size of the beams                     |
| `beamDelayMax` | `number` | `3`                    | The maximum delay of the beams in seconds |
| `beamDelayMin` | `number` | `0`                    | The minimum delay of the beams in seconds |
| `beamDuration` | `number` | `3`                    | The duration of the beams                 |
| `gridColor`    | `string` | `"hsl(var(--border))"` | The color of the grid lines               |

## Component Code

You can copy and paste the following code to create these components:

::CodeGroup
::CodeViewer{filename="WarpBackground.vue" language="vue" componentName="WarpBackground" type="ui" id="warp-background"}
::

::CodeViewer{filename="Beam.vue" language="vue" componentName="Beam" type="ui" id="warp-background"}
::
::

## Credits

- Credits to [Whbbit1999](https://github.com/Whbbit1999) for this component.
- Inspired and ported from [Magic UI WarpBackground](https://magicui.design/docs/components/warp-background).


---
title: Wavy Background
description: A cool background effect with waves that move.
---

::ComponentLoader{label="Preview" componentName="WavyBackgroundDemo" type="examples" id="wavy-background"}
::

::alert{type="info"}
**Note:** This component uses simplex-noise & requires `simplex-noise` npm package as a dependency.

Please install simplex-noise using following commands.

    ::code-group

    ```bash [npm]
    npm install simplex-noise
    ```

    ```bash [pnpm]
    pnpm install simplex-noise
    ```

    ```bash [bun]
    bun add simplex-noise
    ```

    ```bash [yarn]
    yarn add simplex-noise
    ```
    ::

::

## API

| Prop Name        | Type               | Default                                                   | Description                                                |
| ---------------- | ------------------ | --------------------------------------------------------- | ---------------------------------------------------------- |
| `class`          | `string`           | `-`                                                       | The content to be displayed on top of the wavy background. |
| `containerClass` | `string`           | `-`                                                       | The CSS class to apply to the content container.           |
| `colors`         | `string[]`         | `["#38bdf8", "#818cf8", "#c084fc", "#e879f9", "#22d3ee"]` | The colors of the waves.                                   |
| `waveWidth`      | `number`           | `50`                                                      | The width of the waves.                                    |
| `backgroundFill` | `string`           | `"black"`                                                 | The background color.                                      |
| `blur`           | `number`           | `10`                                                      | The blur effect applied to the waves.                      |
| `speed`          | `"slow" \| "fast"` | `"fast"`                                                  | Range of speed variation for particles.                    |
| `waveOpacity`    | `number`           | `0.5`                                                     | Base radius of particles.                                  |
| `[key: string]`  | `any`              | `-`                                                       | Range of radius variation for particles.                   |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="WavyBackground.vue" language="vue" componentName="WavyBackground" type="ui" id="wavy-background"}
::

## Features

- **Slot Support**: Easily add any content inside the component using the default slot.

## Credits

- Credits to [Aceternity UI](https://ui.aceternity.com/components/wavy-background).
- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for porting this component.


---
title: Gradient Button
description: A stylish animated button with a rotating conic gradient border and customizable properties for a vibrant look.
---

::ComponentLoader{label="Preview" componentName="GradientButtonDemo" type="examples"}
::

## API

| Prop Name      | Type       | Default              | Description                                                  |
| -------------- | ---------- | -------------------- | ------------------------------------------------------------ |
| `borderWidth`  | `number`   | `2`                  | Width of the gradient border in pixels.                      |
| `colors`       | `string[]` | Rainbow Colors Array | Array of colors used in the conic gradient border.           |
| `duration`     | `number`   | `2500`               | Duration of the gradient rotation animation in milliseconds. |
| `borderRadius` | `number`   | `8`                  | Border radius for rounded corners in pixels.                 |
| `blur`         | `number`   | `4`                  | Blur intensity of the gradient border effect in pixels.      |
| `class`        | `string`   | `""`                 | Additional CSS classes for custom styling.                   |
| `bgColor`      | `string`   | `"#000"`             | Background color of the button content.                      |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="GradientButton.vue" language="vue" componentName="GradientButton" type="ui" id="gradient-button"}
::

## Features

- **Rotating Conic Gradient Border**: A dynamic, rotating conic gradient border creates a visually engaging effect.
- **Customizable Color Palette**: Customize the gradient colors by providing an array of color values.
- **Flexible Styling Options**: Adjust border width, border radius, and blur effect for a tailored look.
- **Slot-Based Content**: Supports a default slot to easily add button content or icons.
- **Smooth Animation Control**: Control the speed of the rotation using the `duration` prop.


---
title: Interactive Hover Button
description: A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.
---

::ComponentLoader{label="Preview" componentName="InteractiveHoverButtonDemo" type="examples" id="interactive-hover-button"}
::

## Example

Very long text

If your button text is very long, you need change button width🤣.

::ComponentLoader{label="Preview" componentName="VeryLongTextInteractiveHoverButtonDemo" type="examples" id="interactive-hover-button"}
::

## API

| Prop Name | Type     | Default  | Description                                    |
| --------- | -------- | -------- | ---------------------------------------------- |
| `text`    | `string` | `Button` | The text to be displayed inside the button.    |
| `class`   | `string` | `""`     | Additional class names to style the component. |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="InteractiveHoverButton.vue" language="vue" componentName="InteractiveHoverButton" type="ui" id="interactive-hover-button"}
::

## Credits

- Credits to [Whbbit1999](https://github.com/Whbbit1999) for this component.
- Inspired and ported from [Magic UI Interactive Hover Button](https://magicui.design/docs/components/interactive-hover-button).


---
title: Rainbow Button
description: A rainbow effect on button.
---

::ComponentLoader{label="Preview" componentName="RainbowButtonDemo" type="examples"}
::

## API

| Prop Name | Type     | Default    | Description                                    |
| --------- | -------- | ---------- | ---------------------------------------------- |
| `class`   | `string` | `""`       | Additional CSS classes to apply to the button. |
| `is`      | `string` | `"button"` | The HTML tag to render for the component.      |
| `speed`   | `number` | `2`        | Duration of the animation in seconds.          |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="RainbowButton.vue" language="vue" componentName="RainbowButton" type="ui" id="rainbow-button"}
::

## Credits

- Credits to [Grzegorz Krol](https://github.com/Grzechu335) for porting this component.
- Credits to [Magic UI](https://magicui.design/docs/components/rainbow-button).


---
title: Ripple Button
description: A stylish ripple button component with customizable colors and animation duration.
navBadges:
  - value: New
    type: lime
---

::ComponentLoader{label="Preview" componentName="RippleButtonDemo" type="examples"}
::

## API

| Prop Name     | Type     | Default     | Description                                       |
| ------------- | -------- | ----------- | ------------------------------------------------- |
| `class`       | `string` | -           | Additional CSS classes for custom styling.        |
| `rippleColor` | `string` | `"#ADD8E6"` | Color of the ripple effect.                       |
| `duration`    | `number` | `600`       | Duration of the ripple animation in milliseconds. |

## Emits

| Event Name | Type    | Description |
| ---------- | ------- | ----------- |
| `click`    | `event` | Click event |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="RippleButton.vue" language="vue" componentName="RippleButton" type="ui" id="ripple-button"}
::

## Credits

- Inspired by [Magic UI's Ripple Button](https://magicui.design/docs/components/ripple-button) component.
- Credits to [kalix127](https://github.com/kalix127) for porting this component.


---
title: Shimmer Button
description: A button with a shimmering animated effect.
---

::ComponentLoader{label="Preview" componentName="ShimmerButtonDemo" type="examples"}
::

## API

| Prop Name         | Type     | Default              | Description                                             |
| ----------------- | -------- | -------------------- | ------------------------------------------------------- |
| `class`           | `string` | `""`                 | Additional CSS classes to apply to the button.          |
| `shimmerColor`    | `string` | `"#ffffff"`          | Color of the shimmer effect.                            |
| `shimmerSize`     | `string` | `"0.05em"`           | Size of the shimmer effect.                             |
| `borderRadius`    | `string` | `"100px"`            | Border radius of the button.                            |
| `shimmerDuration` | `string` | `"3s"`               | Duration of the shimmer animation.                      |
| `background`      | `string` | `"rgba(0, 0, 0, 1)"` | Background color of the button. Can be rgb or hex code. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="ShimmerButton.vue" language="vue" componentName="ShimmerButton" type="ui" id="shimmer-button"}
::

## Features

- **Shimmering Effect**: Displays a continuous shimmering animation on the button.
- **Customizable Appearance**: Adjust shimmer color, size, duration, border radius, and background color.
- **Slot Support**: Easily add any content inside the button using the default slot.
- **Interactive States**: Includes hover and active states for enhanced user interaction.
- **Responsive Design**: Adapts to different screen sizes and resolutions seamlessly.

## Credits

- Ported from [Magic UI Shimmer Button](https://magicui.design/docs/components/shimmer-button).


---
title: 3D Card Effect
description: A card perspective effect, hover over the card to elevate card elements.
---

::ComponentLoader{label="Preview" componentName="CardDemo" type="examples"}
::

## Examples

With rotation

::ComponentLoader{label="Preview" componentName="CardDemo2" type="examples"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## API

::steps

### `CardContainer`

The `CardContainer` component serves as a wrapper for the 3D card effect. It manages mouse events to create a 3D perspective.

#### Props

| Prop Name        | Type   | Default | Description                                                 |
| ---------------- | ------ | ------- | ----------------------------------------------------------- |
| `class`          | String | `null`  | Additional classes for styling the inner container element. |
| `containerClass` | String | `null`  | Additional classes for styling the outer container element. |

#### Usage

```vue [MyCardComponent.vue]
<CardContainer containerClass="additional-class">
  <!-- Your content here -->
</CardContainer>
```

### `CardBody`

The `CardBody` component is a flexible container with preserved 3D styling. It is intended to be used within a `CardContainer` to hold content with a 3D transformation effect.

#### Props

| Prop Name | Type   | Default | Description                            |
| --------- | ------ | ------- | -------------------------------------- |
| `class`   | String | `null`  | Additional classes for custom styling. |

#### Usage

```vue [MyCardComponent.vue]
<CardBody class="custom-class">
  <!-- Your content here -->
</CardBody>
```

### `CardItem`

The `CardItem` component represents individual items within the 3D card. It supports various transformations (translation and rotation) to create dynamic 3D effects.

#### Props

| Prop Name    | Type          | Default | Description                                                     |
| ------------ | ------------- | ------- | --------------------------------------------------------------- |
| `as`         | String        | `"div"` | The HTML tag or component to use for the item.                  |
| `class`      | String        | `null`  | Additional classes for styling the item.                        |
| `translateX` | Number/String | `0`     | X-axis translation in pixels.                                   |
| `translateY` | Number/String | `0`     | Y-axis translation in pixels.                                   |
| `translateZ` | Number/String | `0`     | Z-axis translation in pixels, used to control the depth effect. |
| `rotateX`    | Number/String | `0`     | X-axis rotation in degrees.                                     |
| `rotateY`    | Number/String | `0`     | Y-axis rotation in degrees.                                     |
| `rotateZ`    | Number/String | `0`     | Z-axis rotation in degrees.                                     |

#### Usage

```vue [MyCardComponent.vue]
<CardItem as="p" translateZ="50" class="custom-item-class">
  Your text or content here
</CardItem>
```

::

## Component Code

You can copy and paste the following code to create these components:

::code-group
::CodeViewerTab{label="CardContainer.vue" icon="vscode-icons:file-type-vue" componentName="CardContainer" type="ui" id="card-3d"}
::

::CodeViewerTab{label="CardBody.vue" icon="vscode-icons:file-type-vue" componentName="CardBody" type="ui" id="card-3d"}
::

::CodeViewerTab{label="CardItem.vue" icon="vscode-icons:file-type-vue" componentName="CardItem" type="ui" id="card-3d"}
::

```ts [useMouseState.ts]
import { ref, readonly } from "vue";

export function useMouseState() {
  const isMouseEntered = ref(false);

  function setMouseEntered(value: boolean) {
    isMouseEntered.value = value;
  }

  return {
    isMouseEntered: readonly(isMouseEntered),
    setMouseEntered,
  };
}
```

::


---
title: Card Spotlight
description: A card component with a dynamic spotlight effect that follows the mouse cursor, enhancing visual interactivity.
---

::ComponentLoader{label="Preview" componentName="CardSpotlightDemo" type="examples"}
::

## API

| Prop Name         | Type     | Default     | Description                                                 |
| ----------------- | -------- | ----------- | ----------------------------------------------------------- |
| `gradientSize`    | `number` | `200`       | Radius in pixels of the spotlight effect.                   |
| `gradientColor`   | `string` | `'#262626'` | The color of the spotlight gradient.                        |
| `gradientOpacity` | `number` | `0.8`       | The opacity level of the spotlight gradient effect.         |
| `slotClass`       | `string` | `undefined` | Class to apply to the parent container containing the slot. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="CardSpotlight.vue" language="vue" componentName="CardSpotlight" type="ui" id="card-spotlight"}
::

## Features

- **Interactive Spotlight Effect**: Displays a dynamic spotlight that follows the user's mouse cursor, enhancing user engagement and visual appeal.

- **Customizable Appearance**: Easily adjust the `gradientSize`, `gradientColor`, and `gradientOpacity` props to tailor the spotlight effect to your design preferences.

- **Easy Integration**: Wrap any content within the `<CardSpotlight>` component to instantly add the spotlight effect without additional configuration.

- **Responsive Design**: The component adapts smoothly to different container sizes, ensuring a consistent experience across various devices and screen sizes.

- **Performance Optimized**: Utilizes Vue's reactivity for efficient updates, ensuring smooth animations without compromising application performance.

## Credits

- Inspired by Magic Card component from [Magic UI](https://magicui.design/docs/components/magic-card).


---
title: Direction Aware Hover
description: A direction aware hover card, that displays an image with dynamic hover effects and customizable content overlay.
---

::ComponentLoader{label="Preview" componentName="DirectionAwareHoverDemo" type="examples"}
::

## API

| Prop Name       | Type     | Default     | Description                                     |
| --------------- | -------- | ----------- | ----------------------------------------------- |
| `imageUrl`      | `string` | Required    | The URL of the image to be displayed.           |
| `class`         | `string` | `undefined` | Additional CSS classes for the card container.  |
| `imageClass`    | `string` | `undefined` | Additional CSS classes for the image element.   |
| `childrenClass` | `string` | `undefined` | Additional CSS classes for the content overlay. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="DirectionAwareHover.vue" language="vue" componentName="DirectionAwareHover" type="ui" id="direction-aware-hover"}
::

## Credits

- Credits to [M Atif](https://github.com/atif0075) for porting this component.

- Ported from [Aceternity UI's Direction Aware Hover](https://ui.aceternity.com/components/direction-aware-hover)


---
title: Flip Card
description: A dynamic flip card with smooth 180-degree flipping animations along both the X and Y axes, providing an engaging and interactive visual effect.
---

::ComponentLoader{label="Preview" componentName="FlipCardDemo" type="examples" id="flip-card"}
::

## Examples

### Horizontal Flip

::ComponentLoader{label="Preview" componentName="FlipCardHorizontalDemo" type="examples" id="flip-card"}
::

## API

| Prop Name       | Type     | Default | Description                                |
| --------------- | -------- | ------- | ------------------------------------------ |
| `class`         | `string` | `-`     | The class to be applied to the component.  |
| `image`\*       | `string` | `-`     | Pass the image URL to display the image.   |
| `title`\*       | `string` | `-`     | You can pass the title as you want.        |
| `subtitle` \*   | `string` | `-`     | You can pass the sub title as you want.    |
| `description`\* | `string` | `-`     | You can pass the description as you want.  |
| `rotate`        | `x \| y` | `y`     | You can pass the rotate value as you want. |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="FlipCard.vue" language="vue" componentName="FlipCard" type="ui" id="flip-card"}
::

## Credits

- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for this component.


---
title: Glare Card
description: A glare effect that happens on hover, as seen on Linear's website.
---

::ComponentLoader{label="Preview" componentName="GlareCardDemo" type="examples" id="glare-card"}
::

## Examples

### Multiple Cards

::ComponentLoader{label="Preview" componentName="GlareMultiCardDemo" type="examples" id="glare-card"}
::

## API

| Prop Name | Type     | Default | Description                                               |
| --------- | -------- | ------- | --------------------------------------------------------- |
| `class`   | `string` | `-`     | Additional Tailwind CSS class names to apply to the card. |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="GlareCard.vue" language="vue" componentName="GlareCard" type="ui" id="glare-card"}
::

## Features

- **Slot Support**: Easily add any content inside the component using the default slot.

## Credits

- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for this component.
- Inspired from [Aceternity UI](https://ui.aceternity.com/components/glare-card).


---
title: iPhone Mockup
description: An SVG mockup of an iPhone.
---

::ComponentLoader{label="Preview" componentName="iPhone15ProMockupDemo" type="examples" id="mockups"}
::

## API

| Prop Name | Type     | Default | Description                                    |
| --------- | -------- | ------- | ---------------------------------------------- |
| `width`   | `number` | `433`   | Width of the mockup SVG in pixels.             |
| `height`  | `number` | `882`   | Height of the mockup SVG in pixels.            |
| `src`     | `string` | `null`  | URL of the image to display inside the mockup. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="iPhone15ProMockup.vue" language="vue" componentName="iPhone15ProMockup" type="ui" id="iphone-mockup"}
::

## Features

- **Realistic iPhone 15 Pro Mockup**: Provides an accurate SVG representation of the iPhone 15 Pro, perfect for showcasing mobile app designs or website previews.
- **Customizable Dimensions**: Adjust the `width` and `height` props to fit your specific design requirements.
- **Image Display Support**: Use the `src` prop to insert any image into the mockup screen area, allowing for dynamic content display.
- **Light and Dark Mode Compatibility**: The mockup adapts its colors based on the theme, ensuring consistency in both light and dark modes.
- **Easy Integration**: Simple to include in your Vue projects with minimal setup.

## Credits

- Ported from [Magic UI](https://magicui.design/docs/components/iphone-15-pro).


---
title: Safari Mockup
description: An SVG mockup of the Safari browser.
---

::ComponentLoader{label="Preview" componentName="SafariMockupDemo" type="examples" id="mockups"}
::

## API

| Prop Name | Type     | Default | Description                                    |
| --------- | -------- | ------- | ---------------------------------------------- |
| `url`     | `string` | `null`  | URL displayed in the mockup's address bar.     |
| `src`     | `string` | `null`  | URL of the image to display inside the mockup. |
| `width`   | `number` | `1203`  | Width of the mockup SVG in pixels.             |
| `height`  | `number` | `753`   | Height of the mockup SVG in pixels.            |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="SafariMockup.vue" language="vue" componentName="SafariMockup" type="ui" id="safari-mockup"}
::

## Features

- **Realistic Safari Browser Mockup**: Provides an SVG representation of the Safari browser window, ideal for showcasing website designs.
- **Customizable Dimensions**: Adjust the `width` and `height` props to fit your specific needs.
- **Address Bar URL Display**: Use the `url` prop to display a custom URL in the mockup's address bar.
- **Image Display Support**: Use the `src` prop to insert any image into the mockup's content area.
- **Light and Dark Mode Compatibility**: The mockup adapts its colors based on the theme.

## Credits

- Ported from [Magic UI](https://magicui.design/docs/components/safari).


---
title: File Upload
description: A modern file upload component with a 3D card effect, drag-and-drop functionality, and a responsive grid background pattern.
navBadges:
  - value: New
    type: lime
---

::ComponentLoader{label="Preview" componentName="FileUploadDemo" type="examples"}
::

## API

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

::steps

### `FileUpload`

The `FileUpload` component serves as a wrapper for the file upload effect. It manages mouse events to create a 3D perspective.

#### Props

| Prop Name | Type   | Default | Description                                           |
| --------- | ------ | ------- | ----------------------------------------------------- |
| `class`   | String | -       | Additional classes for styling the container element. |

#### Emits

| Event Name | Type                      | Description                                                |
| ---------- | ------------------------- | ---------------------------------------------------------- |
| `onChange` | `(files: File[]) => void` | Callback function triggered when files are added/uploaded. |

#### Usage

```vue [MyComponent.vue]
<FileUpload class="additional-class">
  <!-- Your content here -->
</FileUpload>
```

### `FileUploadGrid`

The `FileUploadGrid` component provides the background grid pattern for the file upload area. It is intended to be used within a `FileUpload` component to create the visual grid effect behind the upload interface.

#### Props

| Prop Name | Type   | Default | Description                            |
| --------- | ------ | ------- | -------------------------------------- |
| `class`   | String | -       | Additional classes for custom styling. |

#### Usage

```vue [MyComponent.vue]
<FileUploadGrid class="custom-class" />
```

::

## Component Code

You can copy and paste the following code to create these components:

::code-group

::CodeViewerTab{label="FileUpload.vue" icon="vscode-icons:file-type-vue" componentName="FileUpload" type="ui" id="file-upload"}
::

::CodeViewerTab{label="FileUploadGrid.vue" icon="vscode-icons:file-type-vue" componentName="FileUploadGrid" type="ui" id="file-upload"}
::

::

## Credits

- Credits to [kalix127](https://github.com/kalix127) for porting this component.
- Inspired by [AcernityUI](https://ui.aceternity.com/components/file-upload).


---
title: Input
description: A versatile and visually dynamic input field with radial hover effects, styled for modern web applications.
---

::ComponentLoader{label="Preview" componentName="InputDemo" type="examples" id="input"}
::

## API

| Prop Name        | Type                | Default | Description                                                 |
| ---------------- | ------------------- | ------- | ----------------------------------------------------------- |
| `defaultValue`   | `string  \| number` | `""`    | Default value of the input field.                           |
| `class`          | `string`            | `""`    | Additional CSS classes for custom styling.                  |
| `containerClass` | `string`            | `""`    | Additional CSS classes for custom styling of the container. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="IInput.vue" language="vue" componentName="IInput" type="ui" id="input"}
::

## Features

- **Radial Hover Effect**: Displays a dynamic radial gradient background that follows mouse movements when hovering over the input container.
- **Two-Way Binding**: Supports `v-model` for seamless integration with Vue's two-way data binding.
- **Dark Mode Compatibility**: Automatically adapts to dark mode styles using Tailwind's `dark:` utilities.
- **Customizable Styles**: Easily extend or override styles using the `class` prop.
- **Accessible Focus Ring**: Includes focus-visible styles for enhanced accessibility and usability.
- **Responsive Design**: Works well across different screen sizes and devices.

## Styles

This component inherits base styles from ShadCN Vue’s Input component and applies additional functionality, including hover effects and shadow styling.

## Credits

- Built on ShadCN Vue's Input component foundation, with extended functionality for modern UI/UX needs.
- Ported from [Aceternity UI's Signup Form Input Component](https://ui.aceternity.com/components/signup-form)


---
title: Placeholders And Vanish Input
description: Sliding in placeholders and vanish effect of input on submit
---

::ComponentLoader{label="Preview" componentName="VanishingInputDemo" type="examples"}
::

## API

| Prop Name      | Type            | Default                                               | Description                                                                     |
| -------------- | --------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------- |
| `placeholders` | `Array<string>` | `["Placeholder 1", "Placeholder 2", "Placeholder 3"]` | An array of placeholder texts that cycle through as prompts in the input field. |

This component listens to the following events emitted by the `VanishingInput` component:

| Event Name | Parameters | Description                             |
| ---------- | ---------- | --------------------------------------- |
| `change`   | `Event`    | Triggered when the input value changes. |
| `submit`   | `string`   | Triggered when the input is submitted.  |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="VanishingInput.vue" language="vue" componentName="VanishingInput" type="ui" id="vanishing-input"}
::

## Credits

- Credits to [M Atif](https://github.com/atif0075) for porting this component.

- Ported from [Aceternity UI's Placeholders And Vanish Input](https://ui.aceternity.com/components/placeholders-and-vanish-input).


---
title: Dock
description: A macOS-style dock with magnifying icons as you hover over them.
---

::ComponentLoader{label="Preview" componentName="DockDemo" type="examples"}
::

## API

::steps

### `Dock`

| Prop Name       | Type     | Description                                                       |
| --------------- | -------- | ----------------------------------------------------------------- |
| `class`         | `string` | Additional classes to apply to the dock container.                |
| `magnification` | `number` | Magnification factor for the dock icons on hover (default: 60).   |
| `distance`      | `number` | Distance from the icon center where magnification applies.        |
| `direction`     | `string` | Alignment of icons (`top`, `middle`, `bottom`) (default: middle). |

| Slot Name | Description                                           |
| --------- | ----------------------------------------------------- |
| `default` | Dock icons or other child components to be displayed. |

### `DockIcon`

| Slot Name | Description                                             |
| --------- | ------------------------------------------------------- |
| `default` | Component or icon to be displayed inside the dock icon. |

::

## Component Code

You can copy and paste the following code to create these components:

::CodeGroup
 ::CodeViewerTab{filename="Dock.vue" language="vue" componentName="Dock" type="ui" id="dock"}
 ::
::CodeViewerTab{filename="DockIcon.vue" language="vue" componentName="DockIcon" type="ui" id="dock"}
 ::
::

## Credits

- Credits to macOS Dock for the design inspiration and the fantastic hover magnification effect.


---
title: Animate Grid
description: Skew Animation grid with box shadow.
---

::ComponentLoader{label="Preview" componentName="AnimateGridDemo" type="examples" id="animate-grid"}
::

## API

| Prop Name            | Type     | Default             | Description                                         |
| -------------------- | -------- | ------------------- | --------------------------------------------------- |
| `textGlowStartColor` | `string` | `"#38ef7d80"`       | Color of the box shadow start.                      |
| `textGlowEndColor`   | `string` | `"#38ef7d"`         | Color of the box shadow end.                        |
| `perspective`        | `number` | `600`               | You can pass perspective to transform CSS property. |
| `rotateX`            | `number` | `-1`                | You can pass rotateX to transform CSS property.     |
| `rotateY`            | `number` | `-15`               | You can pass rotateY to transform CSS property.     |
| `cards`              | `[]`     | `"[{logo: 'src'}]"` | Cards to display in grid.                           |
| `class`              | `string` | `""`                | Additional tailwind CSS classes for custom styling. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="AnimateGrid.vue" language="vue" componentName="AnimateGrid" type="ui" id="animate-grid"}
::

## Features

- **Slot-Based Content**: Supports a default slot to add content inside the Animate Grid container.

## Credits

- Thanks to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for providing this component.


---
title: Animated Circular Progress Bar
description: Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
---

::ComponentLoader{label="Preview" componentName="AnimatedCircularProgressBarDemo" type="examples" id="animated-circular-progressbar"}
::

## API

| Prop Name             | Type      | Default              | Description                                 |
| --------------------- | --------- | -------------------- | ------------------------------------------- |
| `class`               | `string`  | `-`                  | The class to be applied to the component.   |
| `max`                 | `number`  | `100`                | The maximum value of the gauge.             |
| `min`                 | `number`  | `0`                  | The minimum value of the gauge.             |
| `value`               | `number`  | `0`                  | The current value of the gauge.             |
| `gaugePrimaryColor`   | `string`  | `rgb(79 70 229)`     | The primary color of the gauge.             |
| `gaugeSecondaryColor` | `string`  | `rgba(0, 0, 0, 0.1)` | The secondary color of the gauge.           |
| `circleStrokeWidth`   | `number`  | `10`                 | The width of the circle progress bar.       |
| `showPercentage`      | `boolean` | `true`               | Show the value inside the circle            |
| `duration`            | `number`  | `1`                  | The duration of the animation (in seconds). |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="AnimatedCircularProgressBar.vue" language="vue" componentName="AnimatedCircularProgressBar" type="ui" id="animated-circular-progressbar"}
::

## Credits

- Credits to [Magic UI](https://magicui.design/docs/components/animated-circular-progress-bar).
- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for porting this component.


---
title: Animated List
description: A sequentially animated list that introduces each item with a timed delay, perfect for displaying notifications or events on your landing page.
---

::ComponentLoader{label="Preview" componentName="AnimatedListDemo" type="examples"}
::

## API

| Prop Name | Type     | Default | Description                                                    |
| --------- | -------- | ------- | -------------------------------------------------------------- |
| `delay`   | `number` | `1`     | The delay in milliseconds before adding each item to the list. |

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## Component Code

You can copy and paste the following code to create this component:

::CodeGroup
::CodeViewerTab{label="AnimatedList.vue" language="vue" componentName="AnimatedList" type="ui" id="animated-list"}
::

    ::CodeViewerTab{label="Notification.vue" language="vue" componentName="Notification" type="ui" id="notification"}
    ::

::

## Features

- **Animated Item Loading**: Items are added to the list one by one with a configurable delay.
- **Smooth Transitions**: Each item animates in with a spring effect on entry and a smooth scale and opacity animation on exit.
- **Reverse Order**: Items are displayed in reverse order (newest at the top) for a dynamic, engaging user experience.
- **Flexibility**: You can pass different components as items, making it highly versatile.

## Credits

- Inspired by [Magic UI](https://magicui.design/docs/components/animated-list).


---
title: Animated Tooltip
description: A cool tooltip that reveals on hover, follows mouse pointer
---

::ComponentLoader{label="Preview" componentName="AnimatedTooltipDemo" type="examples"}
::

## API

| Prop Name | Type                                                                    | Default | Description                                                                                |
| --------- | ----------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `items`   | `Array<{id: number, name: string, designation: string, image: string}>` | `[]`    | An array of objects, each representing an item. Each object in the array should have the following properties: id, name, designation, image |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="AnimatedTooltip.vue" language="vue" componentName="AnimatedTooltip" type="ui" id="animated-tooltip"}
::

## Credits

- Credits to [M Atif](https://github.com/atif0075) for this component.

- Inspired from [Aceternity UI's Animated Tooltip](https://ui.aceternity.com/components/animated-tooltip).


---
title: Balance Slider
description: A dynamic balance slider with adjustable colors, limits, and interactive tooltip.
---

::ComponentLoader{label="Preview" componentName="BalanceSliderDemo" type="examples"}
::

## API

| Prop Name        | Type     | Default     | Description                                         |
| ---------------- | -------- | ----------- | --------------------------------------------------- |
| `initialValue`   | `number` | `50`        | Initial position of the slider (0-100).             |
| `leftColor`      | `string` | `"#e68a00"` | Background color for the left side of the slider.   |
| `rightColor`     | `string` | `"#ffffff"` | Background color for the right side of the slider.  |
| `minShiftLimit`  | `number` | `40`        | Minimum limit where shifting animation activates.   |
| `maxShiftLimit`  | `number` | `68`        | Maximum limit where shifting animation deactivates. |
| `leftContent`    | `string` | `"LEFT"`    | Text displayed in the tooltip for the left side.    |
| `rightContent`   | `string` | `"RIGHT"`   | Text displayed in the tooltip for the right side.   |
| `indicatorColor` | `string` | `"#FFFFFF"` | Color of the central indicator on the slider.       |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="BalanceSlider.vue" language="vue" componentName="BalanceSlider" type="ui" id="balance-slider"}
::

## Features

- **Dual-Sided Color Control**: Customize the left and right side colors of the slider to create a distinct balance effect.
- **Interactive Tooltip**: Displays real-time percentage values for both sides, with customizable content for left and right labels.
- **Shift Animation**: Activates a shifting effect within defined limits, adding an engaging visual element.
- **Responsive Indicator**: Central indicator adjusts its color based on active state, enhancing interactivity.
- **Accessible Controls**: Works with keyboard and touch interactions for seamless accessibility.

## Credits

- Inspired and ported from code shared in [Jhey's CSS only version of Balance Slider](https://x.com/jh3yy/status/1748809599598399792?s=46)
- Original concept by [Malay Vasa](https://x.com/MalayVasa/status/1748726374079381930).


---
title: Bento Grid
description: A cool grid layout with different child component.
---

::ComponentLoader{label="Preview" componentName="BentoGridDemo" type="examples"}
::

## API

#### `BentoGridItem`

| Slot Name     | Description                       |
| ------------- | --------------------------------- |
| `title`       | Component to show as title.       |
| `description` | Component to show as description. |
| `icon`        | Component to show as icon.        |
| `header`      | Component to show as header.      |

#### `BentoGridCard`

| Slot Name    | Description                      |
| ------------ | -------------------------------- |
| `background` | Component to show in background. |

| Props Name    | Type      | Description                          |
| ------------- | --------- | ------------------------------------ |
| `name`        | `string`  | Name or title to show on card.       |
| `icon`        | `?string` | Icon component to show on card.      |
| `description` | `string`  | Description content to show on card. |
| `href`        | `string`  | Link to the url for CTA.             |
| `cta`         | `string`  | Text to show on CTA.                 |

## Examples

`BentoGrid` in MagicUI style.

::ComponentLoader{label="Preview" componentName="BentoGridDemo2" type="examples"}
::

## Component Code

You can copy and paste the following code to create these components:

::CodeGroup
::CodeViewerTab{label="BentoGrid.vue" language="vue" componentName="BentoGrid" type="ui" id="bento-grid"}
::
::CodeViewerTab{label="BentoGridItem.vue" language="vue" componentName="BentoGridItem" type="ui" id="bento-grid"}
::

::CodeViewerTab{label="BentoGridCard.vue" language="vue" componentName="BentoGridCard" type="ui" id="bento-grid"}
::
::

## Credits

- Credits to [Aceternity UI](https://ui.aceternity.com/components/bento-grid) and [Magic UI](https://magicui.design/docs/components/bento-grid) for this fantastic component.


---
title: Book
description: A 3D book component featuring customizable sizes and color gradients.
navBadges:
  - value: New
    type: lime
---

::ComponentLoader{label="Preview" componentName="BookDemo" type="examples"}
::

## API

::steps

### `Book`

The `Book` component serves as a wrapper for creating an interactive 3D book effect.

#### Props

| Prop Name    | Type    | Default | Description                                   |
| ------------ | ------- | ------- | --------------------------------------------- |
| `class`      | String  | -       | Additional classes for styling the component. |
| `duration`   | Number  | 1000    | Animation duration in milliseconds.           |
| `color`      | String  | "zinc"  | Color theme for the book gradient.            |
| `isStatic`   | Boolean | false   | Disables hover animations when true.          |
| `size`       | String  | "md"    | Size variant of the book.                     |
| `radius`     | String  | "md"    | Border radius variant of the book.            |
| `shadowSize` | String  | "lg"    | Shadow size variant of the book.              |

#### Usage

```vue [MyBookComponent.vue]
<Book class="additional-class">
  <!-- Your content here -->
</Book>
```

### `BookHeader`

The `BookHeader` component is a flexible container with preserved 3D styling. It is intended to be used within a `Book` to hold content with a 3D transformation effect.

#### Props

| Prop Name | Type   | Default | Description                            |
| --------- | ------ | ------- | -------------------------------------- |
| `class`   | String | -       | Additional classes for custom styling. |

#### Usage

```vue [MyBookComponent.vue]
<BookHeader class="additional-class">
  <!-- Your content here -->
</BookHeader>
```

### `BookTitle`

The `BookTitle` component is a flexible container with preserved 3D styling. It is intended to be used within a `Book` to hold content with a 3D transformation effect.

#### Props

| Prop Name | Type   | Default | Description                            |
| --------- | ------ | ------- | -------------------------------------- |
| `class`   | String | -       | Additional classes for custom styling. |

#### Usage

```vue [MyBookComponent.vue]
<BookTitle class="additional-class">
  <!-- Your text here -->
</BookTitle>
```

### `BookDescription`

The `BookDescription` component is a flexible container with preserved 3D styling. It is intended to be used within a `Book` to hold content with a 3D transformation effect.

#### Props

| Prop Name | Type   | Default | Description                            |
| --------- | ------ | ------- | -------------------------------------- |
| `class`   | String | -       | Additional classes for custom styling. |

#### Usage

```vue [MyBookComponent.vue]
<BookDescription class="additional-class">
  <!-- Your text here -->
</BookDescription>
```

::

## Component Code

You can copy and paste the following code to create these components:

::code-group
::CodeViewerTab{label="Book.vue" icon="vscode-icons:file-type-vue" componentName="Book" type="ui" id="book"}
::

::CodeViewerTab{label="BookHeader.vue" icon="vscode-icons:file-type-vue" componentName="BookHeader" type="ui" id="book"}
::

::CodeViewerTab{label="BookTitle.vue" icon="vscode-icons:file-type-vue" componentName="BookTitle" type="ui" id="book"}
::

::CodeViewerTab{label="BookDescription.vue" icon="vscode-icons:file-type-vue" componentName="BookDescription" type="ui" id="book"}
::

```ts [index.ts]
export const BOOK_RADIUS_MAP = {
  sm: "rounded-sm",
  md: "rounded-md",
  lg: "rounded-lg",
  xl: "rounded-xl",
} as const;

export const BOOK_SIZE_MAP = {
  sm: { width: "180px", spineTranslation: "152px" },
  md: { width: "220px", spineTranslation: "192px" },
  lg: { width: "260px", spineTranslation: "232px" },
  xl: { width: "300px", spineTranslation: "272px" },
} as const;

export const BOOK_SHADOW_SIZE_MAP = {
  sm: "-5px 0 15px 5px var(--shadowColor)",
  md: "-7px 0 25px 7px var(--shadowColor)",
  lg: "-10px 0 35px 10px var(--shadowColor)",
  xl: "-12px 0 45px 12px var(--shadowColor)",
} as const;

export const BOOK_COLOR_MAP = {
  slate: { from: "from-slate-900", to: "to-slate-700" },
  gray: { from: "from-gray-900", to: "to-gray-700" },
  zinc: { from: "from-zinc-900", to: "to-zinc-700" },
  neutral: { from: "from-neutral-900", to: "to-neutral-700" },
  stone: { from: "from-stone-900", to: "to-stone-700" },
  red: { from: "from-red-900", to: "to-red-700" },
  orange: { from: "from-orange-900", to: "to-orange-700" },
  amber: { from: "from-amber-900", to: "to-amber-700" },
  yellow: { from: "from-yellow-900", to: "to-yellow-700" },
  lime: { from: "from-lime-900", to: "to-lime-700" },
  green: { from: "from-green-900", to: "to-green-700" },
  emerald: { from: "from-emerald-900", to: "to-emerald-700" },
  teal: { from: "from-teal-900", to: "to-teal-700" },
  cyan: { from: "from-cyan-900", to: "to-cyan-700" },
  sky: { from: "from-sky-900", to: "to-sky-700" },
  blue: { from: "from-blue-900", to: "to-blue-700" },
  indigo: { from: "from-indigo-900", to: "to-indigo-700" },
  violet: { from: "from-violet-900", to: "to-violet-700" },
  purple: { from: "from-purple-900", to: "to-purple-700" },
  fuchsia: { from: "from-fuchsia-900", to: "to-fuchsia-700" },
  pink: { from: "from-pink-900", to: "to-pink-700" },
  rose: { from: "from-rose-900", to: "to-rose-700" },
} as const;

export type BookColor = keyof typeof BOOK_COLOR_MAP;
export type BookSize = keyof typeof BOOK_SIZE_MAP;
export type BookRadius = keyof typeof BOOK_RADIUS_MAP;
export type BookShadowSize = keyof typeof BOOK_SHADOW_SIZE_MAP;

export { default as Book } from "./Book.vue";
export { default as BookHeader } from "./BookHeader.vue";
export { default as BookTitle } from "./BookTitle.vue";
export { default as BookDescription } from "./BookDescription.vue";
```

::

## Credits

- Credits to [x/UI](https://ui.3x.gl/docs/book) for inspiring this component.
- Credits to [kalix127](https://github.com/kalix127) for porting this component.