Luxe

Luxe 2.0 introduces variant props to simplify component customization. Instead of importing specialized components for specific styles, you can pass a variant name directly to the base component.

For example, instead of importing ButtonGlitchBrightness, you can use the standard Button component with the glitch-brightness variant.

Supported components with variant props include:

• Button
• Badge
• Card
• Text

// Example of using a variant prop on a Button
<Button variant="glitch-brightness">Click Me</Button>

// The Button component supports these variants:
// shine, animated-border, rotate-border, magnetic, default, outline, success, destructive

// For the 'magnetic' variant, use the 'isMagnetic' prop:
<Button variant="magnetic" isMagnetic>Magnetic Button</Button>

Luxe 2.0 components are built using the following technologies:

• Radix UI Primitives: For accessible component logic.
• Tailwind CSS v4: For styling.
• Motion Preferences: Components respect user system motion preferences.

The MultiStepModal component consists of three main parts:

1. MultiStepModal: The root container.
2. MultiStepModalTrigger: The element that triggers the modal opening. It supports the asChild prop to merge its functionality with a custom child component (like a Button).
3. MultiStepModalContent: The content container that renders the steps. It accepts a steps prop which is an array of objects with the shape { title: string; description: string; }.

const steps = [
  { title: "Step 1", description: "Description of step 1"},
  { title: "Step 2", description: "Description of step 2" }
]

<MultiStepModal>
  <MultiStepModalTrigger>
    Multi Step Modal Trigger
  </MultiStepModalTrigger>
  <MultiStepModalContent steps={steps} />
</MultiStepModal>

The fastest way to add the Card component to your project is using the Luxe CLI. This will automatically handle the component addition and necessary dependencies.

npx luxe add card
# or
pnpm dlx luxe add card
# or
yarn npx luxe add card
# or
bunx --bun luxe add card

If you prefer to install the Checkbox component manually, follow these steps:

1. Install dependencies: You need motion, @radix-ui/react-checkbox, clsx, and tailwind-merge.
2. Copy the component code: Create a checkbox.tsx file and paste the provided component implementation.
3. Setup utility function: Ensure you have a cn utility function in utils/cn.ts for class merging.
4. Configure CSS variables: Add the required color variables (--main-muted, --primary, --primary-invert, --border) to your CSS file and map them to your Tailwind theme.
5. Adjust imports: Update the import paths in checkbox.tsx to match your project's directory structure.

npm i motion @radix-ui/react-checkbox clsx tailwind-merge

The fastest way to add the Accordion component to your project is using the luxe CLI. This will automatically handle the installation of necessary dependencies and component files.

npx luxe add accordion
# or
pnpm dlx luxe add accordion
# or
yarn npx luxe add accordion
# or
bunx --bun luxe add accordion

Use the init command to perform the initial setup for Luxe in your project. This command automates several setup steps, including:

• Installing required dependencies.
• Configuring CSS variables.
• Adding the cn utility (typically used for class name merging).

npx luxe init
# or
pnpm dlx luxe init
# or
yarn luxe init
# or
bunx --bun luxe init

If you prefer to install the component manually, you must first install the required peer dependencies: motion, @radix-ui/react-slot, clsx, and tailwind-merge.

npm i motion @radix-ui/react-slot clsx tailwind-merge
# or
pnpm add motion @radix-ui/react-slot clsx tailwind-merge
# or
yarn add motion @radix-ui/react-slot clsx tailwind-merge
# or
bun add motion @radix-ui/react-slot clsx tailwind-merge

If you prefer to install the component manually, follow these steps:

1. Install dependencies: You need input-otp, motion, clsx, and tailwind-merge.
2. Add the component code: Copy the input-otp.tsx implementation into your project.
3. Setup utility: Ensure you have a utils/cn.ts file for class merging.
4. Configure CSS: Add the required CSS variables and animations to your global CSS file.
5. Adjust imports: Update the import paths in the copied component to match your project's directory structure.

npm i input-otp motion clsx tailwind-merge

To ensure correct styling and theme support (including dark mode), add the following CSS variables to your global CSS file. This configuration uses OKLCH colors and defines them for Tailwind CSS via the @theme inline directive.

:root {
  --main-secondary: oklch(97% 0 0);
  --main-foreground: oklch(0.925 0 0);

  --primary-foreground: oklch(37.1% 0 0);
  --primary-muted: oklch(0.556 0 0);

  --border: oklch(0.885 0 0);
}

.dark {
  --main-secondary: oklch(0.205 0 0);
  --main-foreground: oklch(0.269 0 0);

  --primary-foreground: oklch(0.97 0 0);
  --primary-muted: oklch(0.708 0 0);

  --border: oklch(0.26 0 0);
}

@theme inline {
  --color-main-secondary: var(--main-secondary);
  --color-main-foreground: var(--main-foreground);

  --color-primary-foreground: var(--primary-foreground);
  --color-primary-muted: var(--primary-muted);

  --color-border: var(--border);
}