### Configure Astro Project Setup Prompts

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/astro.mdx

Example prompts encountered during Astro project creation, covering project name, template choice, TypeScript usage, and dependency installation.

```txt
- Where should we create your new project? ./your-app-name
- How would you like to start your new project? Choose a template
- Do you plan to write TypeScript? Yes
- How strict should TypeScript be? Strict
- Install dependencies? Yes
- Initialize a new git repository? (optional) Yes/No
```

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

### Add Example/Demo Ruixen UI Components

Source: https://github.com/ruixenui/ruixen.com/blob/main/packages/cli/README.md

Installs example and demo components as seen on the Ruixen website. This is useful for quickly setting up interactive examples.

```bash
npx ruixen-cli add --example
```

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

### Install Live Waveform via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/live-waveform.mdx

Installs the Live Waveform component using the shadcn-ui CLI. This is the recommended installation method for quick setup.

```bash
npx shadcn@latest add "https://ruixen.com/r/live-waveform"
```

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

### Install Video Player Pro via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/video-player-pro.mdx

Installs the Video Player Pro component using the shadcn CLI. This is the recommended installation method for quick setup.

```bash
npx shadcn@latest add "https://ruixen.com/r/video-player-pro"
```

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

### Install Verification Input via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/verification-input.mdx

Installs the Verification Input component using npx and shadcn-ui. This is the recommended installation method for quick setup.

```bash
npx shadcn@latest add "https://ruixen.com/r/verification-input"
```

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

### Create New Astro Project

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/astro.mdx

Command to initiate a new Astro project. It prompts the user for configuration details and installs necessary dependencies.

```bash
npm create astro@latest
```

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

### Install Hover Preview Button using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/hover-preview-button.mdx

Installs the Hover Preview Button component using the shadcn-ui CLI. This is the recommended method for quick setup.

```bash
npx shadcn@latest add "https://ruixen.com/r/hover-preview-button"
```

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

### Configure shadcn/ui components.json

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/laravel.mdx

Example of the configuration questions asked during shadcn/ui initialization. These settings determine the project's UI style and color theming.

```text
Which style would you like to use?
Which color would you like to use as base color?
Do you want to use CSS variables for colors? › yes
```

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

### Install Sliding Pagination via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/sliding-pagination.mdx

Use the npx command to add the Sliding Pagination component to your project. This is the recommended installation method for quick setup.

```bash
npx shadcn@latest add "https://ruixen.com/r/sliding-pagination"
```

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

### Install Inline Copy Input via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/inline-copy-input.mdx

This command installs the Inline Copy Input component using the shadcn CLI. Ensure you have Node.js and npm installed. This is the recommended installation method for quick setup.

```bash
npx shadcn@latest add "https://ruixen.com/r/inline-copy-input"
```

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

### Install Pricing Component via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/pricing-with-user-scaling.mdx

Installs the Pricing with User Scaling component using the shadcn-ui CLI. This is the recommended installation method for quick integration.

```bash
npx shadcn@latest add "https://ruixen.com/r/pricing-with-user-scaling"
```

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

### Install Drawer Inner Content using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/drawer-inner-content.mdx

Installs the 'drawer-inner-content' component using the shadcn CLI. This is the recommended installation method for quick setup.

```bash
npx shadcn@latest add "https://ruixen.com/r/drawer-inner-content"
```

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

### Add React Integration to Astro Project

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/astro.mdx

Command to install and integrate React into an existing Astro project using the Astro CLI. It's recommended to answer 'Yes' to all prompts during installation.

```bash
npx astro add react
```

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

### Create Gatsby Project

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/gatsby.mdx

Initializes a new Gatsby project using npm. This command starts the project creation process, prompting for basic configuration details.

```bash
npm init gatsby
```

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

### Install Trusted Clients Showcase via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/trusted-clients-showcase.mdx

Installs the Trusted Clients Showcase component using npx and a provided URL. This is the recommended and simplest installation method.

```bash
npx shadcn@latest add "https://ruixen.com/r/trusted-clients-showcase"
```

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

### Install Subscription Plans via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/subscription-plans.mdx

This snippet shows how to install the Subscription Plans component using the shadcn CLI. Ensure you have Node.js and npm installed. The command adds the component to your project.

```bash
npx shadcn@latest add "https://ruixen.com/r/subscription-plans"
```

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

### Import and Use shadcn/ui Button in Astro

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/astro.mdx

Example of importing and using the shadcn/ui Button component within an Astro file. It demonstrates how to import the component and render it with content.

```astro
---
import { Button } from "@/components/ui/button"
---

<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Button>Hello World</Button>
	</body>
</html>
```

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

### Install Cloud Background via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/cloud-background.mdx

Installs the Cloud Background component using the shadcn CLI. This is the recommended and simplest installation method.

```bash
npx shadcn@latest add "https://ruixen.com/r/cloud-background"
```

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

### Install Icon Library for New York Style

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/manual.mdx

Installs the '@radix-ui/react-icons' library, necessary for icon functionality when the 'new-york' style is applied. This is a specific dependency for that theme.

```bash
npm install @radix-ui/react-icons
```

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

### Install Bottom Drawers using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/bottom-drawers.mdx

Installs the 'Bottom Drawers' component into your project using the shadcn-ui CLI. This is the recommended and simplest installation method.

```bash
npx shadcn@latest add "https://ruixen.com/r/bottom-drawers"
```

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

### Install Phone Mockup Card using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/phone-mockup-card.mdx

Install the Phone Mockup Card component directly into your project using the provided npx command. This is the recommended installation method for ease of use.

```bash
npx shadcn@latest add "https://ruixen.com/r/phone-mockup-card"
```

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

### Install Dependencies for Color Picker Input

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/color-picker-input.mdx

Installs necessary dependencies, Lucide React for icons and md5 for hashing, required for the manual installation of the Color Picker Input component.

```bash
npm install lucide-react md5
# or
yarn add lucide-react md5
# or
pnpm add lucide-react md5
```

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

### Install Load Ripple using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/load-ripple.mdx

Installs the Load Ripple component into your project using the shadcn-ui CLI. This is the recommended installation method for quick integration.

```bash
npx shadcn@latest add "https://ruixen.com/r/load-ripple"
```

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

### Install Split Feature Showcase with CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/split-feature-showcase.mdx

Installs the Split Feature Showcase component into your project using the shadcn-ui CLI. This is the recommended installation method for quick integration.

```bash
npx shadcn@latest add "https://ruixen.com/r/split-feature-showcase"
```

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

### Install Magic Tree via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/magic-tree.mdx

Installs the Magic Tree component using npx and the provided URL. This is the recommended and simplest installation method.

```bash
npx shadcn@latest add "https://ruixen.com/r/magic-tree"
```

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

### Install Navbar Simple via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/sections/navbar-simple.mdx

Installs the Navbar Simple component using the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add "https://ruixen.com/r/navbar-simple"
```

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

### Install Mouse Spark using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/mouse-spark.mdx

Installs the Mouse Spark component into your project using the npx command. This is the recommended and simplest installation method.

```bash
npx shadcn@latest add "https://ruixen.com/r/mouse-spark"
```

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

### Docker Run Commands Reference

Source: https://github.com/ruixenui/ruixen.com/blob/main/DOCKER_DEPLOYMENT_GUIDE.md

Lists key Docker commands for running containers. This includes commands for starting development and production containers directly with `docker run` and for running containers in detached mode using Docker Compose.

```bash
# Run development container
docker run -p 3000:3000 -v $(pwd):/app ruixen-dev

# Run production container
docker run -p 3000:3000 ruixen-prod

# Run with Docker Compose (detached)
docker-compose --profile prod up -d
```

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

### Spring Animation Parameter Examples

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/blog/every-css-transition-is-a-lie.mdx

Provides examples of different spring animation configurations for various UI elements. These examples showcase how adjusting stiffness, damping, and mass can create distinct motion characteristics like snappiness, heaviness, or bounciness.

```tsx
// Snappy toggle
{ stiffness: 500, damping: 30, mass: 0.5 }

// Heavy drawer sliding open
{ stiffness: 200, damping: 40, mass: 2 }

// Bouncy notification entering
{ stiffness: 300, damping: 15, mass: 1 }
```

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

### Install Visualizer Button using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/visualizer-button.mdx

Installs the Visualizer Button component into your project using the shadcn-ui CLI. This is the recommended installation method for ease of use.

```bash
npx shadcn@latest add "https://ruixen.com/r/visualizer-button"
```

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

### Install Project CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/CONTRIBUTING.md

Installs the command-line interface tools for the project. This is a prerequisite for running other CLI commands.

```bash
pnpm run install:cli
```

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

### Install StaggeredFAQSection using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/sections/staggered-faq-section.mdx

Install the StaggeredFAQSection component into your project using the provided npx command. This is the quickest way to add the component.

```bash
npx shadcn@latest add "https://ruixen.com/r/staggered-faq-section"
```

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

### Install Tailwind CSS and Configure

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/vite.mdx

Installs Tailwind CSS and its peer dependencies, then generates the necessary configuration files (`tailwind.config.js` and `postcss.config.js`). This enables utility-first CSS styling.

```bash
npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p
```

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

### Install Component via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/CONTRIBUTING.md

Installs a specified component using the shadcn-ui CLI. This command fetches the component from a given URL and adds it to your project. Ensure you have npx and shadcn-ui installed.

```bash
npx shadcn@latest add "https://ruixen.com/r/example-component"
```

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

### Install Checkbox Simple Component using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/checkbox-simple.mdx

This command installs the Checkbox Simple component into your project using the shadcn-ui CLI. Ensure you have npx and shadcn-ui installed globally or available in your project's dependencies.

```bash
npx shadcn@latest add "https://ruixen.com/r/checkbox-simple"
```

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

### Install Magnetic Tabs via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/magnetic-tabs.mdx

Installs the Magnetic Tabs component using npx and shadcn-ui. This is the recommended installation method for quick setup.

```bash
npx shadcn@latest add "https://ruixen.com/r/magnetic-tabs"
```

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

### Create Vite Project

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/vite.mdx

Initializes a new project using Vite. This command is the first step in setting up a new frontend application with Vite.

```bash
npm create vite@latest
```

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

### Install Editorial Accordion via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/accordion-editorial.mdx

Installs the Editorial Accordion component using the shadcn-ui CLI. This is the recommended installation method for quick setup.

```bash
npx shadcn@latest add "https://ruixen.com/r/accordion-editorial"
```

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

### Initialize Next.js Project with shadcn/ui

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/next.mdx

This command initializes a new Next.js project or sets up an existing one with shadcn/ui. It can be run with default settings using the `-d` flag.

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

```bash
npx shadcn@latest init -d
```

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

### Install Wizard Stepper via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/wizard-stepper.mdx

Installs the Wizard Stepper component using the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add "https://ruixen.com/r/wizard-stepper"
```

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

### Create Remix Project

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/remix.mdx

Initializes a new Remix project using the create-remix CLI tool. This is the first step in setting up the application environment.

```bash
npx create-remix@latest my-app
```

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

### Install Checkbox Tree via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/checkbox-tree.mdx

Installs the Checkbox Tree component using npx and the shadcn-ui CLI. This is the recommended installation method for quick setup.

```bash
npx shadcn@latest add "https://ruixen.com/r/checkbox-tree"
```

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

### Install Stack Pagination via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/stack-pagination.mdx

Installs the Stack Pagination component using the shadcn-ui CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add "https://ruixen.com/r/stack-pagination"
```

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

### Install Input With Select via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/input-with-select.mdx

Installs the 'Input With Select' component using the shadcn-ui CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add "https://ruixen.com/r/input-with-select"
```

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

### Initialize Project with shadcn/ui CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/index.mdx

Initializes a new Next.js project or configures an existing one for shadcn/ui components. This command is the first step in setting up the project environment.

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

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

### Install Add To Cart Button via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/add-to-cart-button.mdx

Installs the 'Add To Cart Button' component using the shadcn CLI. This is the recommended installation method for quick setup.

```bash
npx shadcn@latest add "https://ruixen.com/r/add-to-cart-button"
```

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

### Install Progress Button via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/progress-button.mdx

Installs the Progress Button component using the shadcn-ui CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add "https://ruixen.com/r/progress-button"
```

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

### Install Promote Header via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/sections/promote-header.mdx

Installs the Promote Header component using the shadcn-ui CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add "https://ruixen.com/r/promote-header"
```

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

### Install Gooey Dock via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/gooey-dock.mdx

Installs the Gooey Dock component using the shadcn CLI. This is the recommended installation method for quick setup. It fetches the component directly from the provided URL.

```bash
npx shadcn@latest add "https://ruixen.com/r/gooey-dock"
```

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

### Install Docker and Docker Compose on EC2

Source: https://github.com/ruixenui/ruixen.com/blob/main/DOCKER_DEPLOYMENT_GUIDE.md

Installs Docker and Docker Compose on an EC2 instance running Ubuntu. This script updates the system, downloads and installs Docker, adds the current user to the docker group, and installs Docker Compose from GitHub.

```bash
# Update system
sudo apt update && sudo apt upgrade -y

# Install Docker
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh
sudo usermod -aG docker $USER

# Install Docker Compose
sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

# Install Nginx
sudo apt install nginx -y

# Install Git (if not already installed)
sudo apt install git -y
```

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

### Install Account Menu Component via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/account-menu.mdx

Installs the Account Menu component using the shadcn-ui CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add "https://ruixen.com/r/account-menu"
```

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

### Install Action Toolbar using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/action-toolbar.mdx

Installs the Action Toolbar component into your project using the `shadcn-ui` CLI. This is the recommended method for quick integration.

```bash
npx shadcn@latest add "https://ruixen.com/r/action-toolbar"
```

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

### Navbar Breadcrumb Usage Example

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/sections/navbar-breadcrumb.mdx

Demonstrates how to import and use the Navbar Breadcrumb component in a React application. It shows a basic setup for rendering the component.

```tsx
import NavbarBreadcrumb from "@/components/ruixen/navbar-breadcrumb";

export default function MyNavbar() {
  return <NavbarBreadcrumb />;
}
```

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

### Install Gradient Hero Showcase using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/gradient-hero-showcase.mdx

This command installs the Gradient Hero Showcase component using the shadcn-ui CLI. It fetches the component from the provided URL.

```bash
npx shadcn@latest add "https://ruixen.com/r/gradient-hero-showcase"
```

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

### Add Tailwind CSS Integration to Astro Project

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/astro.mdx

Command to install and integrate Tailwind CSS into an Astro project. This sets up Tailwind for utility-first CSS styling.

```bash
npx astro add tailwind
```

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

### Usage Example for Navbar Minimal in React

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/sections/navbar-minimal.mdx

Demonstrates how to import and use the Navbar Minimal component within a React application. It shows a basic setup for rendering the navbar.

```tsx
import NavbarMinimal from "@/components/ruixen/navbar-minimal";

export default function MyNavbar() {
  return <NavbarMinimal />;
}
```

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

### Create Component Documentation in MDX

Source: https://github.com/ruixenui/ruixen.com/blob/main/CONTRIBUTING.md

An example MDX file for documenting a new component. It includes frontmatter with metadata and uses the `<ComponentPreview>` shortcode to display the component demo.

```mdx
---
title: Example Component
date: 2024-06-01
description: Example component for Ruixen UI
author: ruixen
published: true
---

<ComponentPreview name="example-component-demo" />

```

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

### Import Global Styles in Astro Page

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/astro.mdx

Example of importing the global CSS file into an Astro page component. This ensures Tailwind styles are applied to the page.

```astro
---
import '@/styles/globals.css'
---
```

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

### Usage Example for Navbar Icon Links in React

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/sections/navbar-icon-links.mdx

Demonstrates how to import and use the NavbarIconLinks component within a React application. It shows a basic setup for rendering the navbar.

```tsx
import NavbarIconLinks from "@/components/ruixen/navbar-icon-links";

export default function MyNavbar() {
  return <NavbarIconLinks />; 
}
```

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

### Inline Copy Input Component Usage

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/inline-copy-input.mdx

This is a basic example of how to use the Inline Copy Input component in a React application. It assumes the component has been correctly installed and imported.

```tsx
<InlineCopyInput />
```

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

### Install Wordmark Footer via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/wordmark-footer.mdx

Installs the Wordmark Footer component using the shadcn-ui CLI. This command fetches the component definition from the provided URL.

```bash
npx shadcn@latest add "https://ruixen.com/r/wordmark-footer"
```

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

### Set up SSL with Let's Encrypt (Certbot)

Source: https://github.com/ruixenui/ruixen.com/blob/main/DOCKER_DEPLOYMENT_GUIDE.md

Installs Certbot and its Nginx plugin to automatically obtain and renew SSL certificates for your domain. This command configures Nginx to use HTTPS for the specified domains.

```bash
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your-domain.com -d www.your-domain.com
```

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

### Create Component Demo Example

Source: https://github.com/ruixenui/ruixen.com/blob/main/CONTRIBUTING.md

Provides a basic React component (`ExampleComponentDemo`) that renders the main `ExampleComponent`. This is used to showcase the component's functionality.

```typescript
import ExampleComponent from '@/registry/ruixenui/example-component'

export default function ExampleComponentDemo() {
  return (
    <div className="relative justify-center">
      <ExampleComponent />
    </div>
  )
}
```

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

### Install Pricing Tiers Component via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/pricing-tiers.mdx

Installs the pricing tiers component using the shadcn-ui CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add "https://ruixen.com/r/pricing-tiers"
```

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

### Install Product Feature Hero using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/sections/product-feature-hero.mdx

This command uses npx to add the Product Feature Hero component to your project. It fetches the component definition from the provided URL.

```bash
npx shadcn@latest add "https://ruixen.com/r/product-feature-hero"
```

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

### Install Calendar Lume via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/calendar-lume.mdx

Installs the Calendar Lume component using npx and shadcn-ui. This is the recommended and simplest installation method.

```bash
npx shadcn@latest add "https://ruixen.com/r/calendar-lume"
```

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

### Configure components.json (Text Input)

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/remix.mdx

Illustrates the interactive prompts users will encounter when configuring the `components.json` file for shadcn/ui. This step customizes the UI style and color settings.

```txt
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes
```

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

### Install Icon Pagination via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/icon-pagination.mdx

Installs the Icon Pagination component using the shadcn-ui CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add "https://ruixen.com/r/icon-pagination"
```

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

### Install Calendar Crest using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/calendar-crest.mdx

Installs the Calendar Crest component into your project using the shadcn-ui CLI. This is the recommended and simplest installation method.

```bash
npx shadcn@latest add "https://ruixen.com/r/calendar-crest"
```

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

### Install Badge Morph via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/badge-morph.mdx

Installs the Badge Morph component into your project using the shadcn-ui CLI. This is the recommended and simplest installation method.

```bash
npx shadcn@latest add "https://ruixen.com/r/badge-morph"
```

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

### Install Glass Image Compare via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/glass-image-compare.mdx

Installs the Glass Image Compare component using the shadcn-ui CLI. This command fetches the component from the provided URL and integrates it into your project.

```bash
npx shadcn@latest add "https://ruixen.com/r/glass-image-compare"
```

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

### Install Tailwind CSS Dependencies

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/installation/remix.mdx

Installs Tailwind CSS and Autoprefixer as development dependencies for styling the Remix application. These are essential for the CSS processing pipeline.

```bash
npm add -D tailwindcss@latest autoprefixer@latest
```

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

### Install Color Picker Input via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/color-picker-input.mdx

Installs the Color Picker Input component using the shadcn CLI. This is the recommended method for quick integration into your project.

```bash
npx shadcn@latest add "https://ruixen.com/r/color-picker-input"
```

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

### Install Luma Bar using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/sections/luma-bar.mdx

Installs the Luma Bar component into your project using the shadcn-ui CLI. This is the recommended installation method for ease of use.

```bash
npx shadcn@latest add "https://ruixen.com/r/luma-bar"
```

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

### Initialize shadcn-ui Project with Ruixen CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/packages/cli/README.md

Initializes a project that is already using shadcn-ui. It ensures compatibility by adding necessary configurations for Ruixen UI.

```bash
npx shadcn-ui init
```

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

### Install Variable Text via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/variable-text.mdx

This command installs the Variable Text component using npx and shadcn. It assumes you have npx and shadcn-ui installed in your project.

```bash
npx shadcn@latest add "https://ruixen.com/r/variable-text"
```

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

### Install Solar Loader via CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/solar-loader.mdx

Installs the Solar Loader component into your project using the shadcn-ui CLI. This is the recommended and quickest installation method.

```bash
npx shadcn@latest add "https://ruixen.com/r/solar-loader"
```

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

### Install Confetti Button using CLI

Source: https://github.com/ruixenui/ruixen.com/blob/main/content/docs/components/confetti-button.mdx

Install the Confetti Button component into your project using the provided npx command. This is the recommended and simplest installation method.

```bash
npx shadcn@latest add "https://ruixen.com/r/confetti-button"
```