{/* Your other content here */}
Welcome to Aceternity UI
);
}
```
--------------------------------
### Install Floating Navbar with Shadcn CLI
Source: https://ui.aceternity.com/components/floating-navbar
This command installs the Floating Navbar component using the Shadcn CLI. Ensure you have Next.js and Tailwind CSS configured in your project before running this command.
```bash
npx shadcn@latest add @aceternity/floating-navbar
```
--------------------------------
### Install Apple Cards Carousel using CLI
Source: https://ui.aceternity.com/components/apple-cards-carousel
This command installs the Apple Cards Carousel component using the shadcn CLI. Ensure you have Next.js and Tailwind CSS set up in your project.
```bash
npx shadcn@latest add @aceternity/apple-cards-carousel
```
--------------------------------
### Install Canvas Reveal Effect with CLI
Source: https://ui.aceternity.com/components/canvas-reveal-effect
This command installs the Canvas Reveal Effect component using the shadcn-ui CLI. Ensure you have Next.js and Tailwind CSS set up in your project before running this command.
```bash
npx shadcn@latest add @aceternity/canvas-reveal-effect
```
--------------------------------
### Install Glare Card Component with Shadcn CLI
Source: https://ui.aceternity.com/components/glare-card
This command installs the Glare Card component using the Shadcn CLI. Ensure you have Next.js and Tailwind CSS set up in your project. The command adds necessary dependencies and configuration for the component.
```bash
npx shadcn@latest add @aceternity/glare-card
```
--------------------------------
### Install Dependencies for Aceternity UI Backgrounds
Source: https://ui.aceternity.com/components/grid-and-dot-backgrounds
This snippet shows how to install the necessary npm packages for using Aceternity UI's background components. It includes motion, clsx, and tailwind-merge, which are essential for dynamic styling and utility class merging.
```bash
npm i motion clsx tailwind-merge
```
--------------------------------
### Install Next.js Project using Create Next App
Source: https://ui.aceternity.com/components/install-nextjs
This command initializes a new Next.js project with the latest version. It prompts the user for project name, TypeScript, ESLint, Tailwind CSS, src directory, App Router, and import alias configuration.
```bash
npx create-next-app@latest
```
```bash
cd my-app
npm run dev
```
--------------------------------
### Shadcn CLI Options for Initialization
Source: https://ui.aceternity.com/components/cli
Lists available options for the 'shadcn init' command. These options control default settings, force overwrites, skip prompts, and specify the working directory for project initialization.
```bash
Usage: shadcn init [options] [components...]
initialize your project and install dependencies
Arguments:
components the components to add or a url to the component.
Options:
-d, --defaults use default values i.e new-york, zinc and css variables. (default: false)
-f, --force force overwrite of existing components.json. (default: false)
-y, --yes skip confirmation prompt. (default: false)
-c, --cwd the working directory. defaults to the current directory.
-h, --help display help for command
```
--------------------------------
### Install Meteor Effect Component with Shadcn CLI
Source: https://ui.aceternity.com/components/meteors
Installs the Meteor Effect component into your project using the Shadcn CLI. Ensure you have Shadcn CLI v3.0 or later installed.
```bash
npx shadcn@latest add @aceternity/meteors
```
--------------------------------
### Install Animated Modal Component using shadcn/ui CLI
Source: https://ui.aceternity.com/components/animated-modal
This command installs the Animated Modal component from Aceternity UI into your Next.js project using the shadcn/ui CLI. Ensure you have Next.js and Tailwind CSS configured.
```bash
npx shadcn@latest add @aceternity/animated-modal
```
--------------------------------
### Install Text Hover Effect Component (CLI)
Source: https://ui.aceternity.com/components/text-hover-effect
This command installs the Text Hover Effect component using the shadcn CLI. Ensure you have Next.js and Tailwind CSS set up in your project.
```bash
npx shadcn@latest add @aceternity/text-hover-effect
```
--------------------------------
### Multi Step Loader Component Example
Source: https://ui.aceternity.com/components/multi-step-loader
Example of how to use the Multi Step Loader component in React. It takes an array of loading states, a boolean to control loading, and optional duration and loop props.
```jsx
import { MultiStepLoader } from "@aceternity/ui";
const loadingStates = [
{ text: "Step 1" },
{ text: "Step 2" },
{ text: "Step 3" },
];
function MyComponent() {
return (