``` -------------------------------- ### Install ReUI Accordion Component Source: https://github.com/keenthemes/reui/blob/main/content/docs/(root)/registry.mdx Use the shadcn CLI to add the accordion component from the ReUI registry. Ensure the registry is configured in `components.json`. ```bash npx dlx shadcn@latest add @reui/c-accordion-1 ``` -------------------------------- ### Install Tree Component Dependencies Manually Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/radix/tree.mdx Manually install the necessary dependencies for the Reui Tree component if not using a CLI. ```bash npm install @headless-tree/core @headless-tree/react radix-ui ``` -------------------------------- ### Install Timeline Component via CLI Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/radix/timeline.mdx Use this command to add the Timeline component to your project using the CLI. ```bash npx shadcn@latest add @reui/r-timeline ``` -------------------------------- ### Install Sortable via CLI Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/sortable.mdx Use this command to add the Sortable component to your project using the CLI. ```bash npx shadcn@latest add @reui/sortable ``` -------------------------------- ### Install Stepper via CLI Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/stepper.mdx Use this command to add the Stepper component to your project using the Reui CLI. ```bash npx shadcn@latest add @reui/stepper ``` -------------------------------- ### Install Badge Component via CLI Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/badge.mdx Use this command to add the Badge component to your project using the shadcn CLI. ```bash npx shadcn@latest add @reui/badge ``` -------------------------------- ### Sortable Menu Items Example Source: https://context7.com/keenthemes/reui/llms.txt Create a sortable list of menu items using the Sortable component. This example demonstrates vertical layout and uses GripVertical icon for drag handles. ```tsx import { Sortable, SortableItem, SortableItemHandle, } from "@/components/reui/sortable" import { useState } from "react" import { GripVertical } from "lucide-react" type MenuItem = { id: string label: string order: number } export function SortableMenuItems() { const [items, setItems] = useState([ { id: "1", label: "Dashboard", order: 1 }, { id: "2", label: "Users", order: 2 }, { id: "3", label: "Settings", order: 3 }, { id: "4", label: "Reports", order: 4 }, ]) return ( item.id} layout="vertical" > {items.map((item) => ( {item.label} ))} ) } ``` -------------------------------- ### Install ReUI Filters Component Source: https://github.com/keenthemes/reui/blob/main/content/docs/(root)/registry.mdx Use the shadcn CLI to add the filters component from the ReUI registry. Ensure the registry is configured in `components.json`. ```bash npx dlx shadcn@latest add @reui/filters ``` -------------------------------- ### Basic Alert Usage Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/alert.mdx A simple example of how to render an Alert component with an icon, title, description, and action buttons. ```tsx Security Update Update your password and enable 2FA. ``` -------------------------------- ### Install Rating Component via CLI Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/rating.mdx Use this command to add the Rating component to your project using the CLI. ```bash npx shadcn@latest add @reui/rating ``` -------------------------------- ### Install Frame Component via CLI Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/frame.mdx Use this command to add the Frame component to your project using the shadcn CLI. ```bash npx shadcn@latest add @reui/frame ``` -------------------------------- ### Install ReUI Components with shadcn CLI Source: https://github.com/keenthemes/reui/blob/main/README.md Use the shadcn CLI to add ReUI components directly into your project. Components are prefixed with 'c-'. ```bash npx shadcn@latest add @reui/c-button-10 npx shadcn@latest add @reui/c-data-grid-9 npx shadcn@latest add @reui/c-filters-5 ``` -------------------------------- ### Install Tree Component via CLI Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/tree.mdx Use this command to add the @reui/tree package to your project using the shadcn-ui CLI. ```bash npx shadcn@latest add @reui/tree ``` -------------------------------- ### Basic Frame Component Usage Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/frame.mdx A basic example demonstrating the structure of the Frame component with a header, content, and footer. ```tsx Frame Title Frame Description

Frame Content

Frame Footer ``` -------------------------------- ### Install Date Selector via CLI Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/radix/date-selector.mdx Use this command to add the Date Selector component to your project using the shadcn CLI. ```bash npx shadcn@latest add @reui/r-date-selector ``` -------------------------------- ### Import Data Grid Components Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/data-grid.mdx Import the necessary components from the @reui/data-grid package for basic data grid setup. ```tsx import { DataGrid, DataGridContainer, DataGridPagination, DataGridTable, DataGridTableFootRow, DataGridTableFootRowCell, } from "@/components/reui/data-grid" ``` -------------------------------- ### Install Tree Component via CLI Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/radix/tree.mdx Use this command to add the Reui Tree component to your project using the shadcn-ui CLI. ```bash npx shadcn@latest add @reui/r-tree ``` -------------------------------- ### Install Date Selector via CLI Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/date-selector.mdx Use this command to add the Date Selector component to your project using the command-line interface. ```bash npx shadcn@latest add @reui/date-selector ``` -------------------------------- ### Install Sortable Dependencies Manually Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/radix/sortable.mdx Manually install the necessary npm packages for the Sortable component. Ensure you have @dnd-kit/core, @dnd-kit/sortable, and radix-ui installed. ```bash npm install @dnd-kit/core @dnd-kit/sortable radix-ui ``` -------------------------------- ### Install Date Selector Dependencies Manually Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/date-selector.mdx Manually install the required npm packages for the Date Selector component. Ensure you have date-fns, @base-ui/react, and react-day-picker installed. ```bash npm install date-fns @base-ui/react date-fns react-day-picker ``` -------------------------------- ### Initialize MCP Server Source: https://github.com/keenthemes/reui/blob/main/content/docs/(root)/mcp.mdx Run this command to configure the MCP server. You will be prompted to select your MCP client and enable the MCP server. ```bash npx dlx shadcn@latest mcp init ``` -------------------------------- ### Initialize MCP Server for AI Component Generation Source: https://context7.com/keenthemes/reui/llms.txt Initialize the Model Context Protocol server for AI-assisted component generation using the `dlx` command. ```bash # Initialize MCP server npx dlx shadcn@latest mcp init ``` -------------------------------- ### Scrollspy Component Manual Installation Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/scrollspy.mdx Copy and paste this code into your project for manual installation of the Scrollspy component. ```tsx import { Scrollspy } from "@/components/reui/scrollspy" const YourComponent = () => { const containerRef = React.useRef(null) return ( <> Section 1 Section 2

Content 1

Content 2

) } ``` -------------------------------- ### Onboarding Wizard Stepper Implementation Source: https://context7.com/keenthemes/reui/llms.txt Shows how to implement a horizontal Stepper component for multi-step processes like onboarding. Includes custom indicators and navigation between steps. ```tsx import { Stepper, StepperContent, StepperIndicator, StepperItem, StepperNav, StepperPanel, StepperSeparator, StepperTitle, StepperDescription, StepperTrigger, } from "@/components/reui/stepper" import { useState } from "react" import { CheckCircle, Circle, Loader2 } from "lucide-react" export function OnboardingWizard() { const [currentStep, setCurrentStep] = useState(1) return ( , completed: , inactive: , loading: , }} > 1 Account Create your account 2 Profile Add personal info 3 Complete Review and finish

Create Account

Enter your email and password to get started.

Profile Information

Tell us about yourself.

All Done!

Your account has been created successfully.

) } ``` -------------------------------- ### Initialize and Render Filters Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/radix/filters.mdx Set up initial filters and field configurations, then render the Filters component. The `onChange` prop handles filter updates. ```typescript const [filters, setFilters] = useState([ createFilter("priority", "is_any_of", ["low", "medium"]), ]) const fields: FilterFieldConfig[] = [ { key: "priority", label: "Priority", type: "multiselect", options: [ { value: "low", label: "Low" }, { value: "medium", label: "Medium" }, { value: "high", label: "High" }, ], }, ] return ``` -------------------------------- ### Rating Component Examples Source: https://context7.com/keenthemes/reui/llms.txt Illustrates the Rating component's functionality for displaying read-only ratings and handling interactive user input. Includes examples for average rating display, editable input, and compact display with review counts. ```tsx import { Rating } from "@/components/reui/rating" import { useState } from "react" export function ProductRating() { const [userRating, setUserRating] = useState(0) return (

{/* Read-only rating display */}

Average Rating

{/* Editable rating input */}

Your Rating

{ setUserRating(rating) console.log("User rated:", rating) }} />

{/* Small compact rating */}

(128 reviews)

) } ``` -------------------------------- ### Stepper Usage Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/radix/stepper.mdx Example of how to import and use the Stepper component in your React application. ```APIDOC ## Usage ### Importing Components ```tsx import { Stepper, StepperContent, StepperIndicator, StepperItem, StepperNav, StepperPanel, StepperSeparator, StepperTrigger, } from "@/components/reui/stepper" ``` ### Basic Stepper Example ```tsx 1 2 Content 1 Content 2 ``` ``` -------------------------------- ### Rating Component Usage Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/rating.mdx Example of how to import and use the Rating component in your project. ```typescript import { Rating } from "@/components/reui/rating" ``` -------------------------------- ### Install Scrollspy via CLI Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/scrollspy.mdx Use this command to add the Scrollspy component to your project using the CLI. ```bash npx shadcn@latest add @reui/scrollspy ``` -------------------------------- ### Basic Autocomplete Usage Source: https://github.com/keenthemes/reui/blob/main/content/docs/components/base/autocomplete.mdx Demonstrates how to set up a basic Autocomplete component with a list of items. Ensure your items have 'value' and 'label' properties. ```tsx const items = [ { value: "apple", label: "Apple" }, { value: "banana", label: "Banana" }, { value: "orange", label: "Orange" }, { value: "grape", label: "Grape" }, ] No results found. {(item) => {item.label}} ```

{id}

Create Account

Profile Information

All Done!