Inspira UI

Inspira UI is a community-driven collection of elegant, reusable, and highly configurable Vue and Nuxt components. It is designed to bring the aesthetics and functionality of Aceternity UI and Magic UI to the Vue ecosystem. Unlike traditional component libraries, Inspira UI focuses on allowing developers to pick, customize, and adapt components to fit specific project requirements.

Key Features:

• Free and Open Source: Licensed under MIT.
• Highly Configurable: Components can be tailored to specific design needs.
• Diverse Component Range: Includes components inspired by Aceternity UI, Magic UI, and unique community contributions.
• Mobile Optimized: Designed for responsiveness across all devices.
• Nuxt Compatibility: Fully compatible with the Nuxt framework.

Inspira UI offers several key advantages for developers:

• Free and Open Source: Licensed under MIT.
• Highly Configurable: Components can be tailored to specific design needs (refer to the configuration guide for details).
• Wide Range of Components: Includes components inspired by Aceternity UI and Magic UI, alongside unique community contributions.
• Mobile Optimized: Designed to work seamlessly across all devices.
• Nuxt Compatibility: Fully compatible with the Nuxt framework.

The Apple Card Carousel is a multi-component system designed to replicate the 'App Store / Apple TV' browsing experience. It consists of four interconnected components:

1. AppleCardCarousel: The main horizontal scrolling container with left/right controls.
2. AppleCarouselItem: A wrapper for each card that manages spacing and entrance animations.
3. AppleCard: The interactive card component that can be clicked to expand into a full-screen modal.
4. AppleBlurImage: A specialized image component that maintains a blurred state until the image has fully loaded, providing a smooth transition.

To contribute to Inspira UI, follow these initial setup steps:

1. Fork the repository on GitHub.
2. Clone your fork to your local machine.
3. Create a new branch for your contribution using the naming convention feature/YourFeatureName:

   git checkout -b feature/YourFeatureName

4. Install dependencies using pnpm:

   pnpm install

Follow these standards for all Vue components:

• Language: Vue.js with TypeScript (<script lang="ts" setup>).
• Styling: Use Tailwind CSS classes and keep styles <style scoped>.
• Naming: Use PascalCase for component names and filenames.
• Props: Use type-only props or destructuring (v3.5+) instead of the object syntax.

Recommended Prop Pattern (v3.5+):

interface Props {
  msg?: string;
  labels?: string[];
}
const { msg = "hello", labels = ["one", "two"] } = defineProps<Props>();

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

<template>
  <!-- Your template code goes here -->
</template>

<style scoped>
/* Your styles go here */
</style>