Prerequisites
Node.js (version 16 or higher)
npm, yarn, or pnpm package manager
1
Setup BDS
Section titled “Setup BDS”Install the Aqua CLI Tool
Section titled “Install the Aqua CLI Tool”First, install the Aqua CLI tool globally if you have not already installed:
Loading Code Block...21. Navigate to Your
Section titled “1. Navigate to Your Project”
Setup BDS in your project
Section titled “Setup BDS in your project”1. Navigate to Your Next.js Project
Section titled “1. Navigate to Your Project”Loading Code Block...2. Initialize Butterfly UI
Section titled “2. Initialize Butterfly UI”Run the initialization command:
Loading Code Block...Option A: Interactive Setup
Section titled “Option A: Interactive Setup”The CLI will prompt you to:
Loading Code Block...Option B: Non-Interactive Setup
Section titled “Option B: Non-Interactive Setup”You can also specify options directly:
Loading Code Block...3. Verify Configuration
Section titled “3. Verify Configuration”After initialization, you should see a components.json file in your project root:
Loading Code Block...// nuxt.config.ts
Loading Code Block...3
Add Components
Section titled “Add Components”Add a specific component:
Section titled “Add a specific component:”Loading Code Block...Add a multiple components interactively:
Section titled “Add a multiple components interactively:”Loading Code Block...This will show you a list of all available components where you can select multiple components to install at once.
Add with framework override:
Section titled “Add with framework override:”Force
Loading Code Block...Add from specific branch:
Section titled “Add from specific branch:”Loading Code Block...4
Update Components
Section titled “Update Components”Update a specific component:
Loading Code Block...5
List Available Components
Section titled “List Available Components”View all available components:
Loading Code Block...6
Get Component Information
Section titled “Get Component Information”Get detailed information about a specific component before adding it:
aqua bds info [componentName]
Loading Code Block...7
Cache Management
Section titled “Cache Management”If you need fresh component data or experiencing issues:
Loading Code Block...