Aceternity UI

https://ui.aceternity.com
Admin
Aceternity UI is a collection of 200+ production-ready React components, blocks, and templates built...
Tokens:104,370
Snippets:1,944
Trust Score:9.4
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install component from namespace

Source: https://ui.aceternity.com/docs/cli

Install components using the configured registry namespace.

```bash
npx shadcn@latest add @aceternity/[component]
```

```bash
npx shadcn@latest add @aceternity/3d-marquee
```

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

### Installation Configuration Prompts

Source: https://ui.aceternity.com/docs/install-nextjs

These are the standard configuration options presented during the Next.js installation process.

```text
 
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
 
Copy
```

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

### Install Pointer Highlight

Source: https://ui.aceternity.com/components/pointer-highlight

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @aceternity/pointer-highlight
```

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

### Initialize Next.js Project

Source: https://ui.aceternity.com/docs/install-nextjs

Run this command in your terminal to start the interactive setup process for a new Next.js application.

```bash
npx create-next-app@latest
```

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

### Run Development Server

Source: https://ui.aceternity.com/installation

Start the local development server for the project.

```bash
npm run dev
```

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

### Install Tracing Beam Demo

Source: https://ui.aceternity.com/components/tracing-beam

Use this command to install the Tracing Beam demo package.

```bash
@aceternity/tracing-beam-demo
```

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

### Install Dependencies

Source: https://ui.aceternity.com/components/grid-and-dot-backgrounds

Install the required packages for motion, clsx, and tailwind-merge.

```bash
npm i motion clsx tailwind-merge
```

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

### Install Webcam Pixel Grid

Source: https://ui.aceternity.com/components/webcam-pixel-grid

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @aceternity/webcam-pixel-grid
```

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

### Install Spotlight Component

Source: https://ui.aceternity.com/components/spotlight

Use the shadcn CLI to add the Spotlight component to your project.

```bash
npx shadcn@latest add @aceternity/spotlight
```

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

### Install Animated Testimonials

Source: https://ui.aceternity.com/components/animated-testimonials

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @aceternity/animated-testimonials
```

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

### Install Keyboard Component

Source: https://ui.aceternity.com/components/keyboard

Use the CLI to add the keyboard component to your project.

```bash
npx shadcn@latest add @aceternity/keyboard
```

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

### Install Stateful Button

Source: https://ui.aceternity.com/components/stateful-button

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @aceternity/stateful-button
```

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

### Install Animated Tooltip

Source: https://ui.aceternity.com/components/animated-tooltip

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @aceternity/animated-tooltip
```

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

### Install Canvas Text

Source: https://ui.aceternity.com/components/canvas-text

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @aceternity/canvas-text
```

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

### Install Text Flipping Board

Source: https://ui.aceternity.com/components/text-flipping-board

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @aceternity/text-flipping-board
```

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

### Start Development Server

Source: https://ui.aceternity.com/docs/install-nextjs

Navigate to the project directory and launch the development server to view the application.

```bash
cd my-app
npm run dev
Copy
```

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

### Install Placeholders and Vanish Input

Source: https://ui.aceternity.com/components/placeholders-and-vanish-input

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @aceternity/placeholders-and-vanish-input
```

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

### Install Dependencies

Source: https://ui.aceternity.com/components/tailwindcss-buttons

Install the required packages for animations and utility functions.

```bash
npm i motion clsx tailwind-merge react-element-to-jsx-string
```

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

### Install Card Spotlight Component

Source: https://ui.aceternity.com/components/card-spotlight

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @aceternity/card-spotlight
```

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

### Initialize Project with CLI

Source: https://ui.aceternity.com/docs/cli

Initializes configuration and dependencies for a new project using the init command.

```bash
npx shadcn@latest init
```

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

### Install Template Dependencies

Source: https://ui.aceternity.com/installation

Install project dependencies using npm or yarn.

```bash
npm install
```

```bash
yarn install
```

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

### Dummy Component Example

Source: https://ui.aceternity.com/components/code-block

Example of a React component structure used for display.

```jsx
1const DummyComponent = () => { 2 const [count, setCount] = React.useState(0); 3 4 const handleClick = () => { 5 setCount(prev => prev + 1); 6 }; 7 8 return ( 9 <div className="p-4 border rounded-lg"> 10 <h2 className="text-xl font-bold mb-4">Fights Counter</h2> 11 <p className="mb-2">Fight Club Fights Count: {count}</p> 12 <button 13 onClick={handleClick} 14 className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" 15 > 16        Increment 17 </button> 18 </div> 19 ); 20}; 21
```

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

### Install Spotlight New Component

Source: https://ui.aceternity.com/components/spotlight-new

Use the npx command to add the component to your project via shadcn.

```bash
npx shadcn@latest add @aceternity/spotlight-new
```

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

### Install Tailwind CSS v4 Dependencies

Source: https://ui.aceternity.com/docs/install-tailwindcss

Install the required packages for Tailwind CSS v4.

```bash
npm install tailwindcss @tailwindcss/postcss @tailwindcss/cli
```

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

### Install Tailwind CSS

Source: https://ui.aceternity.com/installation

Install the necessary Tailwind CSS dependencies and initialize the configuration files.

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

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

### Install Logo Cloud Marquee dependencies

Source: https://ui.aceternity.com/blocks/logo-clouds

Required package installation for the marquee logo cloud component.

```bash
npm install react-fast-marquee
```

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

### CLI Initialization Options

Source: https://ui.aceternity.com/docs/cli

Displays the available arguments and flags for the init command.

```text
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 <cwd>   the working directory. defaults to the current directory.
  -h, --help       display help for command
```

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

### Add component in a monorepo

Source: https://ui.aceternity.com/docs/cli

Install a specific component within a monorepo workspace.

```bash
npx shadcn@latest add alert-dialog -c ./apps/www
```

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

### Initialize MCP server

Source: https://ui.aceternity.com/docs/cli

Set up the MCP server for AI assistant integration.

```bash
npx shadcn@latest mcp init
```

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

### Install Typewriter Effect

Source: https://ui.aceternity.com/components/typewriter-effect

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @aceternity/typewriter-effect
```

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

### Install Link Preview Component

Source: https://ui.aceternity.com/components/link-preview

Use the shadcn CLI to add the Link Preview component to your project.

```bash
npx shadcn@latest add @aceternity/link-preview
```

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

### Install Pixelated Canvas

Source: https://ui.aceternity.com/components/pixelated-canvas

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @aceternity/pixelated-canvas
```

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

### Install Signup Form Component

Source: https://ui.aceternity.com/components/signup-form

Use the shadcn CLI to add the signup form component to your project.

```bash
npx shadcn@latest add @aceternity/signup-form-demo
```

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

### Install Floating Navbar

Source: https://ui.aceternity.com/components/floating-navbar

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @aceternity/floating-navbar
```

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

### Install Card Components via CLI

Source: https://ui.aceternity.com/components/cards-free

Use the shadcn CLI to add the required card demo components to your project.

```bash
npx shadcn@latest add @aceternity/cards-demo-1 @aceternity/cards-demo-2 @aceternity/cards-demo-3
```
Tokens:
Raw