### Run Development Server

Source: https://github.com/iurvish/uselayouts/blob/main/README.md

Start the development server to view the documentation site locally. This command is used after installing dependencies.

```bash
yarn dev
```

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

### Install Dependencies for Morphing Input

Source: https://context7.com/iurvish/uselayouts/llms.txt

Installs necessary packages for the animated placeholder input component.

```bash
npm install motion lucide-react @hugeicons/react @hugeicons/core-free-icons
npx shadcn@latest add input
```

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

### Install Shadcn Components for Stacked List

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/stacked-list.mdx

Install required shadcn UI components like input and button.

```bash
npx shadcn@latest add input button
```

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

### Install Component via Shadcn CLI

Source: https://context7.com/iurvish/uselayouts/llms.txt

Demonstrates how to install uselayouts components using the shadcn CLI. Replace `<name>` with the desired component's registry key.

```bash
# Install the Bucket component
npx shadcn@latest add "https://uselayouts.com/r/bucket.json"

# Install the Pricing Card component
npx shadcn@latest add "https://uselayouts.com/r/pricing-card.json"

# Install the Multi Step Form
npx shadcn@latest add "https://uselayouts.com/r/multi-step-form.json"

# Install the Morphing Input
npx shadcn@latest add "https://uselayouts.com/r/morphing-input.json"
```

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

### Install Shadcn UI Button Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/status-button.mdx

Ensure the Shadcn UI Button component is installed before proceeding.

```bash
npx shadcn@latest add button
```

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

### Install Bucket Component via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/bucket.mdx

Use the npx command to add the Bucket component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/bucket.json"
```

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

### Install Dependencies Manually

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/pricing-card.mdx

Manually install the necessary npm packages for the Pricing Card component.

```bash
npm install motion @hugeicons/react @hugeicons/core-free-icons @number-flow/react
```

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

### Install List Item via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/list-item.mdx

Use the shadcn-ui CLI to add the List Item component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/list-item.json"
```

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

### Install Day Picker Dependencies

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/day-picker.mdx

Manually install the necessary dependencies for the Day Picker component.

```bash
npm install motion clsx tailwind-merge @hugeicons/react @hugeicons/core-free-icons
```

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

### Install List Item Dependencies

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/list-item.mdx

Install the necessary npm packages for the List Item component.

```bash
npm install motion clsx @hugeicons/react @hugeicons/core-free-icons
```

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

### Install Dependencies for Empty Testimonial

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/empty-testimonial.mdx

Install necessary npm packages for the Empty Testimonial component, including motion, lucide-react, and hugeicons.

```bash
npm install motion lucide-react @hugeicons/react @hugeicons/core-free-icons
```

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

### Install Discover Button via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/discover-button.mdx

Use the shadcn-ui CLI to add the Discover Button component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/discover-button.json"
```

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

### Install Magnified Bento via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/magnified-bento.mdx

Use the shadcn-ui CLI to add the Magnified Bento component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/magnified-bento.json"
```

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

### Install Dependencies for Development

Source: https://github.com/iurvish/uselayouts/blob/main/README.md

Install project dependencies using Yarn after cloning the repository. This is a required step before running the development server.

```bash
yarn install
```

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

### Usage Example for Inline Edit

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/inline-edit.mdx

Import and use the Inline Edit component in your React page. This example shows a basic setup for integrating the component.

```tsx
import SaveInput from "@/components/inline-edit";

export default function Page() {
  return <SaveInput />;
}
```

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

### Install Pricing Card via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/pricing-card.mdx

Use this command to add the Pricing Card component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add "https://uselayouts.com/r/pricing-card.json"
```

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

### Install Smooth Dropdown via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/smooth-dropdown.mdx

Use the CLI command to add the smooth dropdown component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/smooth-dropdown.json"
```

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

### Install Stacked List via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/stacked-list.mdx

Use the CLI command to add the Stacked List component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/stacked-list.json"
```

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

### Install Discrete Tabs Dependencies

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/discrete-tab.mdx

Install the 'motion' package as a dependency for the discrete tabs component.

```bash
npm install motion
```

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

### Install Dependencies for Multi Step Form

Source: https://context7.com/iurvish/uselayouts/llms.txt

Installs packages required for the multi-step form with Zod validation and animations.

```bash
npm install react-hook-form @hookform/resolvers zod motion react-use-measure date-fns
npx shadcn@latest add card button input textarea select badge calendar popover
```

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

### Install Morphing Input via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/morphing-input.mdx

Use the CLI command to add the Morphing Input component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/morphing-input.json"
```

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

### Install Day Picker via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/day-picker.mdx

Use the shadcn-ui CLI to add the Day Picker component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/day-picker.json"
```

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

### Install Bottom Menu via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/bottom-menu.mdx

Use the shadcn-ui CLI to add the Bottom Menu component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/bottom-menu.json"
```

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

### Basic Usage of Morphing Input

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/morphing-input.mdx

Import and render the Morphing Input component in your page. This is the basic setup to get the component working.

```tsx
import InputSwitch from "@/components/morphing-input";

export default function Page() {
  return <InputSwitch />;
}
```

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

### Install Dependencies for Multi Step Form

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/multi-step-form.mdx

Install the necessary npm packages for the multi-step form, including form handling, validation, and animation libraries.

```bash
npm install react-hook-form @hookform/resolvers zod motion react-use-measure date-fns
```

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

### Install Delete Button Dependencies

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/delete-button.mdx

Install necessary npm packages for the delete button component.

```bash
npm install motion @hugeicons/react @hugeicons/core-free-icons
```

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

### Install Expandable Gallery via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/expandable-gallery.mdx

Use this command to add the Expandable Gallery component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add "https://uselayouts.com/r/expandable-gallery.json"
```

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

### Install Multi Step Form via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/multi-step-form.mdx

Use the CLI command to add the multi-step form component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/multi-step-form.json"
```

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

### Install 3D Book Component via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/3d-book.mdx

Use the shadcn-ui CLI to add the 3D Book component to your project. This command fetches the necessary configuration and code.

```bash
npx shadcn@latest add "https://uselayouts.com/r/3d-book.json"
```

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

### Install Shake Testimonial Card via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/shake-testimonial-card.mdx

Use the CLI command to add the Shake Testimonial Card component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/shake-testimonial-card.json"
```

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

### Install Bottom Menu Dependencies Manually

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/bottom-menu.mdx

Manually install the necessary npm packages for the Bottom Menu component.

```bash
npm install motion react-use-measure @hugeicons/react @hugeicons/core-free-icons
```

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

### Install Inline Edit via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/inline-edit.mdx

Use the CLI command to add the Inline Edit component to your project. This is the recommended installation method.

```bash
npx shadcn@latest add "https://uselayouts.com/r/inline-edit.json"
```

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

### Install Shadcn UI Input Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/inline-edit.mdx

Ensure the Shadcn UI Input component is installed, as it is a dependency for the Inline Edit component. This command adds the input component.

```bash
npx shadcn@latest add input
```

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

### Install Dependencies for Fluid Expanding Grid

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/fluid-expanding-grid.mdx

Manually install the necessary npm packages for the Fluid Expanding Grid component.

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

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

### Clone Repository for Local Development

Source: https://github.com/iurvish/uselayouts/blob/main/README.md

Clone the uselayouts repository to run the documentation site locally. Ensure you have Git installed.

```bash
git clone https://github.com/iurvish/uselayouts.git
```

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

### Install Folder Interaction via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/folder-interaction.mdx

Use the shadcn-ui CLI to add the folder interaction component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/folder-interaction.json"
```

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

### Install Animated Collection via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/animated-collection.mdx

Use the shadcn-ui CLI to add the Animated Collection component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/animated-collection.json"
```

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

### Install Empty Testimonial via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/empty-testimonial.mdx

Use the shadcn-ui CLI to add the Empty Testimonial component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/empty-testimonial.json"
```

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

### Install Dynamic Toolbar via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/dynamic-toolbar.mdx

Use the provided CLI command to add the dynamic toolbar component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/dynamic-toolbar.json"
```

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

### Install Status Button via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/status-button.mdx

Use the CLI command to add the Status Button component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/status-button.json"
```

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

### Install Fluid Expanding Grid via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/fluid-expanding-grid.mdx

Use the shadcn-ui CLI to add the Fluid Expanding Grid component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/fluid-expanding-grid.json"
```

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

### Install Discrete Tabs via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/discrete-tab.mdx

Use the shadcn-ui CLI to add the discrete tabs component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/discrete-tabs.json"
```

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

### Install Vertical Tabs via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/vertical-tabs.mdx

Use the shadcn-ui CLI to add the vertical tabs component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/vertical-tabs.json"
```

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

### Usage Example for Status Button

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/status-button.mdx

Import and use the SaveButton component in your React page.

```tsx
import { SaveButton } from "@/components/status-button";

export default function Page() {
  return <SaveButton />;
}
```

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

### Install Delete Button via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/delete-button.mdx

Use the shadcn-ui CLI to add the delete button component to your project.

```bash
npx shadcn@latest add "https://uselayouts.com/r/delete-button.json"
```

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

### Install Bento Card via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/bento-card.mdx

Use this command to add the Bento Card component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add "https://uselayouts.com/r/bento-card.json"
```

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

### Install Feature Carousel via CLI

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/feature-carousel.mdx

Use this command to add the Feature Carousel component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add "https://uselayouts.com/r/feature-carousel.json"
```

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

### Usage Example for 3D Book Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/3d-book.mdx

Demonstrates how to integrate the 3D Book component into a React page. Ensure the parent container has defined dimensions for proper rendering.

```tsx
import InteractiveBook from "@/components/3d-book";

export default function Page() {
  return (
    <div className="h-[500px] w-full">
      <InteractiveBook />
    </div>
  );
}
```

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

### ComponentPreview Props and Usage

Source: https://context7.com/iurvish/uselayouts/llms.txt

Defines the props for the ComponentPreview component and shows examples of its usage within MDX files.

```tsx
// Used inside .mdx files
import { ComponentPreview } from "@/components/component-preview";

// Props
interface ComponentPreviewProps {
  name?: string;                            // Registry key (e.g. "bucket", "pricing-card")
  align?: "center" | "start" | "end";      // Vertical alignment inside the preview box
  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"; // Container size hint passed to component
  full?: boolean;                           // Removes min-height padding
}

// Example — in a .mdx component page:
<ComponentPreview name="pricing-card" align="center" size="lg" />

// Or with inline children instead of a named registry component:
<ComponentPreview align="center">
  <MyCustomComponent />
</ComponentPreview>
```

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

### Public JSON Registry File - `public/r/<name>.json`

Source: https://context7.com/iurvish/uselayouts/llms.txt

A shadcn-compatible registry item served as a JSON file, containing the full component source inline for easy installation.

```jsonc
// public/r/bucket.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bucket",
  "title": "Bucket",
  "description": "An interactive card component...",
  "dependencies": ["motion", "@hugeicons/core-free-icons", "@hugeicons/react", "clsx", "tailwind-merge"],
  "files": [
    {
      "path": "registry/default/example/bucket.tsx",
      "content": "/* full component source code */",
      "type": "registry:component"
    },
    {
      "path": "hooks/use-mobile.ts",
      "content": "/* full hook source code */",
      "type": "registry:hook"
    }
  ],
  "type": "registry:component"
}

```

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

### Example Usage of Expanded Toolbar

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/dynamic-toolbar.mdx

Render the `ExpandedToolbar` component within a container to display it on the page. Ensure the parent container has appropriate dimensions.

```tsx
import ExpandedToolbar from "@/components/dynamic-toolbar";

export default function Page() {
  return (
    <div className="flex items-center justify-center h-[200px] w-full">
      <ExpandedToolbar />
    </div>
  );
}
```

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

### Usage Example for Folder Interaction

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/folder-interaction.mdx

Demonstrates how to import and render the FolderInteraction component within a React page. Ensure the parent div provides sufficient height and width for proper display.

```tsx
import FolderInteraction from "@/components/folder-interaction";

export default function Page() {
  return (
    <div className="flex items-center justify-center min-h-[400px] w-full">
      <FolderInteraction />
    </div>
  );
}
```

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

### Animated Pricing Card with Price Transitions

Source: https://context7.com/iurvish/uselayouts/llms.txt

A pricing card component with a monthly/yearly toggle. Features shared layout animations for plan selection and smooth digit-by-digit price transitions using `@number-flow/react`. Install dependencies using npm.

```bash
npm install motion @hugeicons/react @hugeicons/core-free-icons @number-flow/react

```

```tsx
// Minimal usage — the plans array drives all content
import PricingCard from "@/components/pricing-card";

export default function PricingPage() {
  return (
    <div className="flex items-center justify-center py-10 w-full">
      <PricingCard />
    </div>
  );
}

// Inside pricing-card.tsx: customize this array
const plans = [
  {
    id: "plus",
    name: "Plus",
    description: "solo",
    monthlyPrice: 8.99,
    yearlyPrice: 6.99,
    features: ["1TB Space", "30 days recovery"],
    popular: false,
  },
  {
    id: "pro",
    name: "Pro",
    description: "teams",
    monthlyPrice: 19.99,
    yearlyPrice: 14.99,
    features: ["5TB Space", "90 days recovery", "Priority support"],
    popular: true,
  },
];

// Period toggle state drives <NumberFlow value={currentPrice} /> for animated numbers
// Shared layout animations use layoutId on the selected-plan highlight element

```

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

### Render Pricing Card Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/pricing-card.mdx

Example of how to import and render the Pricing Card component within a React page. Ensure the parent div has appropriate styling for centering and padding.

```tsx
import PricingCard from "@/components/pricing-card";

export default function Page() {
  return (
    <div className="flex items-center justify-center py-10 w-full">
      <PricingCard />
    </div>
  );
}
```

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

### Basic Bento Card Implementation

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/bento-card.mdx

This is a basic example of how to use the BentoCard component in your React application. Ensure the component is placed within a flex container for proper centering.

```tsx
import BentoCard from "@/components/bento-card";

export default function Page() {
  return (
    <div className="h-screen flex items-center justify-center">
      <BentoCard />
    </div>
  );
}
```

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

### Use Feature Carousel Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/feature-carousel.mdx

Import and render the FeatureCarousel component in your React page. This is the basic setup for displaying the carousel.

```tsx
import FeatureCarousel from "@/components/feature-carousel";

export default function Page() {
  return <FeatureCarousel />;
}
```

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

### useMeasure Hook for Element Sizing

Source: https://context7.com/iurvish/uselayouts/llms.txt

Tracks element dimensions using ResizeObserver. Attach the returned ref to an element to get its live width and height.

```tsx
// hooks/use-measure.tsx
import useMeasure from "@/hooks/use-measure";

function DynamicContainer() {
  const [ref, bounds] = useMeasure();

  return (
    <div ref={ref as React.RefObject<HTMLDivElement>} className="w-full">
      <p>Width: {bounds.width}px</p>
      <p>Height: {bounds.height}px</p>
      {/* Animate based on measured height, e.g. for multi-step forms */}
      <motion.div animate={{ height: bounds.height }} transition={{ type: "spring" }}>
        <SomeContent />
      </motion.div>
    </div>
  );
}
// ref  → React.RefObject<HTMLElement> to attach to the target element
// bounds → { width: number, height: number }
```

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

### Customize Morphing Input Placeholder Options

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/morphing-input.mdx

Modify the placeholder text and icons by updating the placeholderOptions array. This example shows how to change the placeholder text and assign different icons.

```tsx
// Change Here
const placeholderOptions = [
  { id: 1, placeholder: "Search anything...", icon: SparklesIcon },
  { id: 2, placeholder: "Generate Image", icon: Album02Icon },
  // ...
];
```

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

### Basic List Item Usage

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/list-item.mdx

Render the FilterInteraction component within a container that has defined height and width. This example shows the default integration.

```tsx
import FilterInteraction from "@/components/filter-interaction";

export default function Page() {
  return (
    <div className="flex items-center justify-center h-[400px] w-full">
      <FilterInteraction />
    </div>
  );
}
```

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

### Build Component Registry

Source: https://github.com/iurvish/uselayouts/blob/main/README.md

Execute this command to build the component registry. This is typically used for development or deployment purposes.

```bash
yarn build:registry
```

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

### Add Component using Shadcn CLI

Source: https://github.com/iurvish/uselayouts/blob/main/README.md

Use this command to add a component to your project. Replace '3d-book' with the desired component name from the documentation.

```bash
npx shadcn@latest add https://uselayouts.com/r/3d-book
```

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

### Docs Source Loader - `lib/source.ts`

Source: https://context7.com/iurvish/uselayouts/llms.txt

Initializes the fumadocs content source from MDX collections. Used for sidebar navigation, page rendering, search, and sitemap.

```ts
// lib/source.ts
import { docs } from "fumadocs-mdx:collections/server";
import { loader } from "fumadocs-core/source";

export const source = loader({
  baseUrl: "/docs",
  source: docs.toFumadocsSource(),
});

// Usage patterns across the app:
source.getPage(slug)         // → page object with .data.title, .data.body, .data.toc
source.getPages()            // → all pages (used by /api/search and sitemap.ts)
source.generateParams()      // → static params for generateStaticParams()
source.pageTree             // → sidebar navigation tree (used by DocsLayout)

```

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

### Basic Bucket Component Implementation

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/bucket.mdx

Render the Bucket component within a centered div on your page.

```tsx
import Bucket from "@/components/bucket";

export default function Page() {
  return (
    <div className="h-screen flex items-center justify-center">
      <Bucket />
    </div>
  );
}
```

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

### Customize Vertical Tabs Content

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/vertical-tabs.mdx

Modify the SERVICES array to change the content displayed in the vertical tabs. This example shows how to add a new section.

```tsx
// Change Here
const SERVICES = [
  {
    id: "01",
    title: "Web Design",
    description: "Creating beautiful digital experiences.",
    image: "https://images.unsplash.com...",
  },
  // ...
];
```

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

### shadcn Project Configuration - `components.json`

Source: https://context7.com/iurvish/uselayouts/llms.txt

Defines the project's shadcn configuration, including style, RSC and TSX settings, Tailwind CSS integration, icon library, and component/utility aliases.

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "rsc": true,
  "tsx": true,
  "tailwind": { "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true },
  "iconLibrary": "hugeicons",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

```

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

### SourceCode Component Usage

Source: https://context7.com/iurvish/uselayouts/llms.txt

Illustrates how to use the SourceCode component to display server-side syntax-highlighted code blocks in MDX files.

```tsx
// Used inside .mdx files
import { SourceCode } from "@/components/source-code";

// By registry name (resolves file path from Index automatically):
<SourceCode name="bucket" />

// By explicit path:
<SourceCode filePath="registry/default/example/bucket.tsx" title="bucket.tsx" />

// Supported props:
// name?      — looks up Index[name].files[0].path
// filePath?  — explicit path relative to process.cwd()
// title?     — overrides the filename shown in the code block header

// Error states are rendered inline (no throw):
// • Missing name AND filePath → red error box
// • File not found on disk   → red error box with the path
```

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

### Multi Step Form Component Usage

Source: https://context7.com/iurvish/uselayouts/llms.txt

Shows how to integrate the MultiStepForm component and define its steps and content.

```tsx
import MultiStepForm from "@/components/multi-step-form";

export default function OnboardingPage() {
  return (
    <div className="max-w-xl mx-auto py-12">
      <MultiStepForm />
    </div>
  );
}

// Inside multi-step-form.tsx: customize steps
const stepTitles = [
  { title: "Create New Project",   description: "Start by providing the essential details." },
  { title: "Team & Roles",         description: "Who will be collaborating?" },
  { title: "Launch Settings",      description: "Configure visibility and timeline." },
];

// Step content rendered via useMemo switch(currentStep) — add/remove cases freely
const content = useMemo(() => {
  switch (currentStep) {
    case 0:
      return (
        <div className="space-y-6 py-4">
          <Field>
            <FieldLabel htmlFor="project-name">Project Name</FieldLabel>
            <Input id="project-name" {...form.register("project-name")} />
          </Field>
        </div>
      );
    case 1:
      return ( /* Team fields */ );
    default:
      return null;
  }
}, [currentStep, form]);
```

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

### Next.js Configuration - `next.config.mjs`

Source: https://context7.com/iurvish/uselayouts/llms.txt

Configures Next.js for the project, including remote image patterns and integrating fumadocs-mdx for MDX file processing.

```js
// next.config.mjs
import { createMDX } from "fumadocs-mdx/next";

const config = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "images.unsplash.com" },
      { protocol: "https", hostname: "tapback.co" },
      { protocol: "https", hostname: "pbs.twimg.com" },
      { protocol: "https", hostname: "raw.githubusercontent.com" },
    ],
  },
};

export default createMDX()(config);
// createMDX wraps the config to process .mdx files and generate the fumadocs collection
// Run "yarn build:docs" (fumadocs-mdx) before "next build" or in watch mode during dev

```

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

### Morphing Input Component Usage

Source: https://context7.com/iurvish/uselayouts/llms.txt

Demonstrates how to use the Morphing Input component and customize its placeholder options.

```tsx
import InputSwitch from "@/components/morphing-input";

export default function SearchBar() {
  return <InputSwitch />;
}

// Inside morphing-input.tsx: customize placeholder options
const placeholderOptions = [
  { id: 1, placeholder: "Search anything...",  icon: SparklesIcon },
  { id: 2, placeholder: "Generate Image",       icon: Album02Icon },
  { id: 3, placeholder: "Ask a question...",    icon: MessageIcon },
];

// Each option is animated character-by-character on entry using motion/react variants
// The mode-switch button (left icon) cycles through options; clicking the right icon
// reveals an expanded "free text" state with additional controls.
```

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

### Basic Bottom Menu Usage

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/bottom-menu.mdx

Import and render the BottomMenu component in your application.

```tsx
import BottomMenu from "@/components/bottom-menu";

export default function Page() {
  return <BottomMenu />;
}
```

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

### Basic Usage of Empty Testimonial Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/empty-testimonial.mdx

Demonstrates how to import and render the EmptyTestimonial component within a React page, centering it on the screen.

```tsx
import EmptyTestimonial from "@/components/empty-testimonial";

export default function Page() {
  return (
    <div className="h-screen flex items-center justify-center">
      <EmptyTestimonial />
    </div>
  );
}
```

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

### Create Utility Helper Function (cn)

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/installation.mdx

Set up the 'cn' utility function in 'lib/utils.ts' to manage Tailwind CSS classes efficiently using clsx and tailwind-merge.

```tsx
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

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

### Use Expandable Gallery Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/expandable-gallery.mdx

Import and render the ExpandableGallery component in your page.

```tsx
import ExpandableGallery from "@/components/expandable-gallery";

export default function Page() {
  return <ExpandableGallery />;
}
```

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

### useIsMobile Hook for Responsive Design

Source: https://context7.com/iurvish/uselayouts/llms.txt

Detects if the current viewport width is below 768px. It uses matchMedia for instant reactivity and returns false during SSR.

```tsx
// hooks/use-mobile.ts
import { useIsMobile } from "@/hooks/use-mobile";

function ResponsiveWidget() {
  const isMobile = useIsMobile();
  return (
    <div style={{ padding: isMobile ? "8px" : "24px" }}>
      {isMobile ? "Mobile view" : "Desktop view"}
    </div>
  );
}
// Returns boolean (false during SSR, resolves on hydration)
// Breakpoint: 768px (MOBILE_BREAKPOINT constant)
```

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

### Basic Magnified Bento Implementation

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/magnified-bento.mdx

Render the MagnifiedBento component within a centered div for basic usage. Ensure the parent container has a defined height for proper display.

```tsx
import MagnifiedBento from "@/components/magnified-bento";

export default function Page() {
  return (
    <div className="h-screen flex items-center justify-center">
      <MagnifiedBento />
    </div>
  );
}
```

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

### Animated 3D Glassmorphic Bucket Component

Source: https://context7.com/iurvish/uselayouts/llms.txt

Renders a multi-layer SVG bucket with animated cards falling through. Uses `AnimatePresence` for mount/unmount animations and `useIsMobile` for responsiveness. Customize `INITIAL_CHIPS` to change content.

```tsx
"use client";
import { AnimatePresence, motion } from "motion/react";
import { useEffect, useState } from "react";
import { SecurityCheckIcon, ZapIcon, UserStoryIcon, SparklesIcon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { useIsMobile } from "@/hooks/use-mobile";

// Customize this array to change the chip content
const INITIAL_CHIPS = [
  { id: 1, title: "Production Ready", description: "Fully type-safe and tested", icon: SecurityCheckIcon },
  { id: 2, title: "Fluid Motion",     description: "60fps optimizations built-in", icon: ZapIcon },
  { id: 3, title: "Accessible",       description: "Works perfectly for everyone", icon: UserStoryIcon },
  { id: 4, title: "Modern Design",    description: "Crafted for high-end feel", icon: SparklesIcon },
];

const Bucket = () => {
  const [items, setItems] = useState(INITIAL_CHIPS);
  const isMobile = useIsMobile();

  // Rotate the array every 2 s so the next chip "falls in"
  useEffect(() => {
    const interval = setInterval(() => {
      setItems((prev) => {
        const [first, ...rest] = prev;
        return [...rest, first];
      });
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  // Only the first item in `items` is rendered at any time.
  // AnimatePresence handles mount / unmount animations.
  return (
    <div className="flex flex-col gap-4 items-center justify-center h-fit relative w-full">
      {/* SVG bucket layers + AnimatePresence chips go here — see full source */}
      <AnimatePresence mode="popLayout">
        {items.slice(0, 1).map((chip) => (
          <motion.div
            key={chip.id}
            initial={{ y: isMobile ? -70 : -100, opacity: 0, scale: 0.8 }}
            animate={{ y: 0, opacity: 1, scale: isMobile ? 1 : 1.25 }}
            exit={{ y: isMobile ? 100 : 130, scale: 0.8, transition: { duration: 0.8 } }}
            transition={{ duration: 0.5, ease: [0.455, 0.03, 0.515, 0.955] }}
            className="bg-card border border-border rounded-full p-2 w-[240px] shadow-sm flex items-center gap-2"
          >
            <div className="flex size-10 items-center justify-center rounded-full bg-muted-foreground/10">
              <HugeiconsIcon icon={chip.icon} className="size-5" />
            </div>
            <div className="flex flex-col gap-0.5">
              <span className="text-sm font-medium">{chip.title}</span>
              <span className="text-xs text-muted-foreground">{chip.description}</span>
            </div>
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
};

export default Bucket;

```

```tsx
// Usage in a page
import Bucket from "@/components/bucket";

export default function HeroSection() {
  return (
    <div className="h-screen flex items-center justify-center">
      <Bucket />
    </div>
  );
}

```

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

### API Route for Documentation Search

Source: https://context7.com/iurvish/uselayouts/llms.txt

A Next.js Route Handler providing full-text search over documentation pages. It's powered by fumadocs-core and used by the site's search dialog.

```ts
// app/api/search/route.ts — auto-wired, no manual configuration needed
// Powered by fumadocs-core createSearchAPI("advanced", { indexes })
// Each index entry: { title, structuredData, id, url }

// Client usage via the default fumadocs search dialog:
import { RootProvider } from "fumadocs-ui/provider";
// The provider auto-connects to /api/search; no manual fetch required.

// Manual fetch example:
const res = await fetch("/api/search?query=pricing+card");
const data = await res.json();
// Returns fumadocs advanced search results: { results: Array<{ id, url, title, content }> }
```

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

### Basic Usage of Discover Button

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/discover-button.mdx

Render the DiscoverButton component within your React page.

```typescript
import DiscoverButton from "@/components/discover-button";

export default function Page() {
  return <DiscoverButton />;
}
```

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

### Integrate Smooth Dropdown in a Page

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/smooth-dropdown.mdx

Import and render the `MenuInteraction` component within your page. It's recommended to center it for visual appeal.

```tsx
import MenuInteraction from "@/components/smooth-dropdown";

export default function Page() {
  return (
    <div className="flex items-center justify-center h-[400px] w-full">
      <MenuInteraction />
    </div>
  );
}
```

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

### Define Step Content in Multi Step Form

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/multi-step-form.mdx

Customize the form fields for each step by modifying the `content` useMemo block. Add or change input fields within the respective step cases.

```tsx
const content = useMemo(() => {
  switch (currentStep) {
    case 0:
      return (
        <div className="space-y-6 py-4">
          <Field>
            <FieldLabel htmlFor="project-name">Project Name</FieldLabel>
            <Input id="project-name" {...form.register("project-name")} />
          </Field>
          {/* Add more fields for Step 1 */}
        </div>
      );
    // Add more cases for each step index...
  }
}, [currentStep, form]);
```

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

### Use Day Picker Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/day-picker.mdx

Import and render the FrequencySelector component in your application.

```tsx
import FrequencySelector from "@/components/day-picker";

export default function Page() {
  return <FrequencySelector />;
}
```

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

### Define Submenu Content Layout

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/bottom-menu.mdx

Customize the layout and elements within each submenu using the `content` useMemo hook.

```tsx
const content = useMemo(() => {
  switch (view) {
    case "home":
      return (
        <div className="space-y-0.5 min-w-[210px] p-[6px] py-0.5">
          {HOME_ITEMS.map(({ icon: Icon, text }) => (
            <button key={text} className="...">
              <HugeiconsIcon icon={Icon} size={20} />
              <span>{text}</span>
            </button>
          ))}
        </div>
      );
    // Add more cases for other views...
  }
}, [view]);
```

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

### Integrate Multi Step Form Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/multi-step-form.mdx

Import and render the `MultiStepForm` component within your application. Ensure it's wrapped in a container with appropriate styling.

```tsx
import MultiStepForm from "@/components/multi-step-form";

export default function Page() {
  return (
    <div className="max-w-xl mx-auto py-12">
      <MultiStepForm />
    </div>
  );
}
```

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

### Use Stacked List Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/stacked-list.mdx

Import and render the StackedList component in your page.

```tsx
import StackedList from "@/components/stacked-list";

export default function Page() {
  return <StackedList />;
}
```

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

### Customize Initial Chips Data

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/bucket.mdx

Modify the INITIAL_CHIPS array to change the content displayed in the bucket.

```tsx
const INITIAL_CHIPS = [
  {
    id: 1,
    title: "Production Ready",
    description: "Fully type-safe and tested",
    icon: SecurityCheckIcon,
  },
  // ... add more items
];
```

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

### Use Fluid Expanding Grid Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/fluid-expanding-grid.mdx

Import and render the Fluid Expanding Grid component in your React page.

```typescript
import FluidExpandingGrid from "@/components/fluid-expanding-grid";

export default function Page() {
  return <FluidExpandingGrid />;
}
```

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

### Customize Day Picker Options

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/day-picker.mdx

Modify the `options` array to change the available frequency selections.

```tsx
// Change Here
const options = ["Daily", "Weekly", "Monthly", "Yearly"];
```

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

### Use Delete Button Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/delete-button.mdx

Import and render the DeleteButton component in your application.

```tsx
import DeleteButton from "@/components/delete-button";

export default function Page() {
  return <DeleteButton />;
}
```

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

### Use Animated Collection Component in a Page

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/animated-collection.mdx

Import and render the LayoutSwitcher component (which likely uses Animated Collection internally) in your main page component.

```typescript
import LayoutSwitcher from "@/components/layout-switcher";

export default function Page() {
  return <LayoutSwitcher />;
}
```

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

### Use Discrete Tabs Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/discrete-tab.mdx

Import and render the DiscreteTabs component within your React page.

```tsx
import DiscreteTabs from "@/components/discrete-tabs";

export default function Page() {
  return <DiscreteTabs />;
}
```

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

### Customize Stacked List Content

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/stacked-list.mdx

Modify the ALL_MEMBERS array to represent your list data, such as members, files, or projects.

```tsx
// Change Here
const ALL_MEMBERS = [
  {
    id: "01",
    name: "Oliver Smith",
    status: "Online",
    online: true,
    role: "Project Manager",
    roleType: "pm",
    avatar: "https://...",
  },
  // ... add more members
];
```

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

### Customize Dropdown Menu Items

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/smooth-dropdown.mdx

Modify the `menuItems` array to change the options displayed in the dropdown. Ensure icons are imported correctly.

```tsx
// Change Here
const menuItems = [
  { id: "profile", label: "Profile", icon: UserIcon },
  { id: "upgrade", label: "Upgrade", icon: CreditCardIcon },
  // ...
];
```

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

### Customize Pricing Card Content

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/pricing-card.mdx

Modify the 'plans' array to define your own pricing tiers, features, and descriptions for the Pricing Card component.

```tsx
// Change Here
const plans = [
  {
    id: "plus",
    name: "Plus",
    description: "solo",
    monthlyPrice: 8.99,
    yearlyPrice: 6.99,
    features: ["1TB Space", "30 days recovery"],
  },
  // ...
];
```

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

### Component Registry - `registry/__index__.tsx`

Source: https://context7.com/iurvish/uselayouts/llms.txt

Auto-generated registry mapping component names to their source file paths and React.lazy loaders. Do not edit directly.

```tsx
// registry/__index__.tsx (auto-generated)
export const Index: Record<string, any> = {
  "bucket": {
    name: "bucket",
    description: "An interactive card component that simulates a bucket...",
    type: "registry:component",
    files: [
      { path: "registry/default/example/bucket.tsx", type: "registry:component" },
      { path: "hooks/use-mobile.ts",                 type: "registry:hook" },
    ],
    component: React.lazy(async () => {
      const mod = await import("@/registry/default/demo/bucket-demo.tsx");
      return { default: mod.default };
    }),
  },
  "multi-step-form": {
    name: "multi-step-form",
    registryDependencies: ["card","button","input","textarea","select","badge","calendar","popover"],
    files: [{ path: "registry/default/example/multi-step-form.tsx", type: "registry:component" }],
    component: React.lazy(() => import("@/registry/default/example/multi-step-form.tsx")),
  },
  // 20+ additional components follow the same shape...
};

// All available registry keys:
// "3d-book", "animated-collection", "bento-card", "bottom-menu", "bucket",
// "day-picker", "delete-button", "discover-button", "discrete-tabs",
// "dynamic-toolbar", "empty-testimonial", "expandable-gallery",
// "feature-carousel", "fluid-expanding-grid", "folder-interaction",
// "inline-edit", "list-item", "magnified-bento", "morphing-input",
// "multi-step-form", "pricing-card", "shake-testimonial-card",
// "smooth-dropdown", "stacked-list", "status-button", "vertical-tabs"

```

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

### Customize Expandable Gallery Images

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/expandable-gallery.mdx

Modify the PHOTOS array in the component file to change the images displayed in the gallery.

```tsx
// Change Here
const PHOTOS = [
  {
    id: "photo-1",
    src: "https://images.unsplash.com...",
    alt: "Image Description",
  },
  // ...
];
```

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

### Use Vertical Tabs Component

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/vertical-tabs.mdx

Import and render the VerticalTabs component in your page.

```tsx
import VerticalTabs from "@/components/vertical-tabs";

export default function Page() {
  return <VerticalTabs />;
}
```

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

### Customize Step Titles in Multi Step Form

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/multi-step-form.mdx

Modify the `stepTitles` array to change the titles and descriptions for each step in the multi-step form.

```tsx
// Change Here
const stepTitles = [
  {
    title: "Create New Project",
    description: "Start by providing the essential details.",
  },
  // ...
];
```

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

### Basic Usage of Shake Testimonial Card

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/shake-testimonial-card.mdx

Import and render the ShakeTestimonial component within your page. The component is designed to be centered and takes up the full width.

```tsx
import ShakeTestimonial from "@/components/shake-testimonial-card";

export default function Page() {
  return (
    <div className="h-[500px] w-full flex items-center justify-center">
      <ShakeTestimonial />
    </div>
  );
}
```

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

### Customize Bottom Menu Items

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/bottom-menu.mdx

Modify these arrays to change the icons and text of the main menu items.

```tsx
// Change Here
const HOME_ITEMS = [
  { icon: PencilEdit02Icon, text: "Note" },
  { icon: Mic01Icon, text: "Voice" },
  // ...
];

const NOTIFICATION_TYPES = ["Messages", "System Alerts"];
```

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

### Customize Fluid Expanding Grid Items

Source: https://github.com/iurvish/uselayouts/blob/main/content/docs/components/fluid-expanding-grid.mdx

Modify the ITEMS array in the component file to change the content displayed in the grid.

```typescript
const ITEMS = [
  {
    id: "grassy",
    title: "Highlands",
    subtitle: "Golden fields under the giant",
    image: "https://images.unsplash.com/...",
    color: "#84cc16",
  },
  // ...
];
```