inspira-ui Documentation

Build beautiful website using Vue & Nuxt.

5,066 stars Vue Vue 293 files · ~125,290 tokens #components#nuxt#nuxt3#nuxtjs#shadcn-ui#shadcn-vue#tailwindcss#tailwindcss-v4
RAW Doc

File: README.md

Inspira UI

Welcome to Inspira UI, a community-driven project that brings the beauty and functionality of both Aceternity UI and Magic UI to the Vue & Nuxt ecosystem! While this project draws inspiration from these sources, it also includes unique custom components contributed by the community and created by us.
For Chinese version visit here.

✨ About Inspira UI

Inspira UI is a collection of elegant, ready-to-use Vue components designed to be flexible and easy to integrate. Rather than being a traditional component library, it allows you to pick, customize, and adapt components as needed, giving you the freedom to shape them to fit your unique project requirements.

🚀 Why Inspira UI?

Inspira UI was created to fill a gap in the Vue community by providing a set of components with the aesthetics and functionality of both Aceternity UI and Magic UI. Our goal is to empower developers to build beautiful applications more efficiently while adding our own custom and community-driven designs.

🎯 Key Features

  • Free and Open Source: Completely open source under the MIT license.
  • Highly Configurable: Tailor components to your specific design needs. Check out our configuration guide.
  • Diverse Component Range: A broad selection of components, inspired by Aceternity UI, Magic UI, and custom contributions, to help you build anything you imagine.
  • Mobile Optimized: Designed to look great on all devices.
  • Nuxt Compatibility: Fully compatible with Nuxt.

📚 Documentation

For full documentation and usage examples, visit Inspira UI Documentation.

🙏 Acknowledgments

A special thanks to:

  • Aceternity UI for providing the inspiration and permission to adapt the original designs.
  • Magic UI for its beautiful design inspiration.
  • shadcn-vue for the Vue port of shadcn-ui and contributions to some components.
  • shadcn-docs-nuxt for the beautifully crafted Nuxt documentation site.

👤 Author

Hi, I'm Rahul Vashishtha. I started Inspira UI to bring a similar experience to the Vue ecosystem, inspired by Aceternity UI, Magic UI, and community contributions. I'm continuously working on it to make it better. Feel free to check out my work on GitHub and join me on this journey here!

🌟 Contribute

We welcome contributions! If you want to suggest features, report bugs, or help improve the project, feel free to open an issue or submit a pull request on GitHub.

You can also follow this Contribution Guide.

Sponsorship

You can also support the development of the project by sponsoring the developer.

Support and sponsor the maintainer here: Support Inspira UI

Repo Stats

Thanks to all the contributors 🙏

File: CODE_OF_CONDUCT.md

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

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

File: CONTRIBUTING.md

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
  2. Code of Conduct
  3. How to Contribute
  4. Project Structure
  5. Style Guidelines
  6. Documentation Guidelines
  7. Testing
  8. 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, which aims to foster an open and welcoming environment.

How to Contribute

Reporting Bugs

If you find a bug, please open an issue{: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{: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/ 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 -->
<script lang="ts" setup>
// Your script code goes here
</script>

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

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 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 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/ 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. |

  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{:target="_blank"}.

File: package.json

{
"name": "inspira-ui",
"type": "module",
"packageManager": "[email protected]+sha512.0e308ff2005fc7410366f154f625f6631ab2b16b1d2e70238444dd6ae9d630a8482d92a451144debc492416896ed16f7b114a86ec68b8404b2443869e68ffda6",
"scripts": {
"dev": "nuxt dev",
"build": "pnpm build:registry && nuxt build && pnpm build:copy",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"format": "prettier . --check",
"format:fix": "prettier . --write",
"lint": "oxlint . && eslint .",
"lint:fix": "oxlint . --fix && eslint . --fix",
"dev:registry": "REGISTRY_URL=http://localhost:3000/r tsx ./scripts/build-registry.mts",
"build:registry": "tsx ./scripts/build-registry.mts",
"build:copy": "cp public/_routes.json dist/_routes.json"
},
"dependencies": {
"@googlemaps/markerclusterer": "^2.6.2",
"@inspira-ui/plugins": "^0.0.2",
"@number-flow/vue": "^0.5.0",
"@nuxt/content": "3.12.0",
"@nuxt/eslint": "1.15.2",
"@nuxt/fonts": "0.14.0",
"@nuxt/icon": "2.2.1",
"@nuxt/image": "2.0.0",
"@nuxt/kit": "^4.3.1",
"@nuxt/scripts": "0.13.2",
"@nuxt/ui": "^4.5.1",
"@oxc-parser/wasm": "^0.60.0",
"@splinetool/runtime": "^1.12.67",
"@tresjs/nuxt": "^5.4.0",
"@uiw/color-convert": "^2.9.6",
"@unhead/vue": "^2.1.10",
"@vueuse/nuxt": "^14.2.1",
"better-sqlite3": "^12.6.2",
"canvas-confetti": "^1.9.4",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cobe": "^0.6.5",
"dialkit": "^1.3.0",
"docus": "latest",
"dotted-map": "^3.1.0",
"eslint": "^10.0.3",
"gsap": "^3.14.2",
"motion-v": "^2.3.0",
"nuxt": "4.3.1",
"nuxt-gtag": "^4.1.0",
"ogl": "^1.0.11",
"postprocessing": "^6.38.3",
"scule": "^1.3.0",
"shiki": "4.0.1",
"simplex-noise": "^4.0.3",
"tailwind-merge": "^3.5.0",
"tailwindcss": "^4.2.1",
"theme-colors": "^0.1.0",
"three": "^0.183.2",
"three-globe": "^2.45.0",
"vue": "^3.5.29",
"vue-use-spring": "^0.3.3"
},
"devDependencies": {
"@antfu/eslint-config": "^7.7.0",
"@nuxt/eslint": "^1.9.0",
"@prettier/plugin-oxc": "^0.1.3",
"@types/three": "^0.183.1",
"eslint": "^9.37.0",
"eslint-plugin-oxlint": "^1.51.0",
"globals": "^17.4.0",
"oxlint": "^1.51.0",
"prettier": "^3.8.1",
"prettier-plugin-tailwindcss": "^0.7.2",
"tsx": "^4.21.0",
"typescript": "^5.9.3",
"vue-tsc": "^3.2.5"
}
}

Explore Related Technologies & Topics

View All 9,111+ Repositories →

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

#components Browse components catalog → #nuxt Browse nuxt catalog → #nuxt3 Browse nuxt3 catalog → #nuxtjs Browse nuxtjs catalog → #shadcn-ui Browse shadcn-ui catalog → #shadcn-vue Browse shadcn-vue catalog → ⚡ MCP Servers Model Context Protocol → 🧠 Agent Skills Prompt & rule files → 🔌 OpenAPI Specs REST & Swagger schemas →