``` ``` -------------------------------- ### Install ReUI Accordion Component Source: https://reui.io/docs/registry Install the accordion component from the ReUI registry using the shadcn CLI with the `@reui/c-accordion-1` syntax. This command requires pnpm. ```bash pnpm dlx dlx shadcn@latest add @reui/c-accordion-1 ``` -------------------------------- ### Install Shadcn Alert Source: https://reui.io/docs/components/base/alert Install the Shadcn Alert component using pnpm. This command adds the necessary package to your project. ```bash pnpm dlx shadcn@latest add @reui/alert ``` -------------------------------- ### Alert with Action Buttons Example Source: https://reui.io/docs/alert Example of an Alert component featuring action buttons for user interaction. ```javascript import { Alert, AlertAction, ``` -------------------------------- ### Date Selector Configuration Example Source: https://reui.io/docs/components/base/date-selector Example of a JSON configuration object for the Date Selector, specifying the period and operator. ```json { "period": "day", "operator": "is" } ``` -------------------------------- ### Install Shadcn Badge Source: https://reui.io/docs/components/radix/badge Install the ReUI badge component using pnpm. This command adds the necessary package to your project. ```bash pnpm dlx shadcn@latest add @reui/r-badge ``` -------------------------------- ### Avatar Upload Example Source: https://reui.io/docs/components/base/file-upload Example of an avatar upload component. It specifies accepted image types and size limits. ```javascript "use client" import { ``` -------------------------------- ### Install ReUI Filters Component Source: https://reui.io/docs/registry Install the filters component from the ReUI registry using the shadcn CLI with the `@reui/filters` syntax. This command requires pnpm. ```bash pnpm dlx dlx shadcn@latest add @reui/filters ``` -------------------------------- ### Install Shadcn Tree with pnpm Source: https://reui.io/docs/components/base/tree Use this command to add the Shadcn Tree component to your project using pnpm. ```bash pnpm dlx shadcn@latest add @reui/tree ``` -------------------------------- ### Install Shadcn Rating Source: https://reui.io/docs/components/base/rating Install the Shadcn Rating component using pnpm. This command adds the necessary package to your project. ```bash pnpm dlx shadcn@latest add @reui/rating ``` -------------------------------- ### Frame with Separated Panels Example Source: https://reui.io/docs/components/base/frame Illustrates the usage of the Frame component with separated panels. This setup is suitable for distinct content sections within a frame. ```jsx import { Frame, FrameDescription, } ``` -------------------------------- ### API Usage Example: Success Light Badge Source: https://reui.io/docs/components/base/badge Illustrates using the 'success-light' variant and 'sm' size for a badge. This example highlights the extended color tokens used by ReUI. ```javascript Success ``` -------------------------------- ### Usage Source: https://reui.io/docs/components/base/sortable Basic usage example for the ReUI Sortable component. ```APIDOC ## Usage ```typescript import { Sortable, SortableItem, SortableItemHandle, } from "@/components/reui/sortable" ``` ```jsx item.id} > {items.map((item) => ( {item.content} ))} ``` ``` -------------------------------- ### Configure MCP Server Source: https://reui.io/docs/mcp Run this command to initialize the MCP server. Select your MCP client and enable the server to complete the setup. ```bash pnpm dlx shadcn@latest mcp init ``` -------------------------------- ### Install Date Selector with pnpm Source: https://reui.io/docs/components/base/date-selector Install the ReUI Date Selector component using pnpm. This command adds the necessary package to your project. ```bash pnpm dlx shadcn@latest add @reui/date-selector ``` -------------------------------- ### Badge API Usage Examples Source: https://reui.io/docs/components/radix/badge Illustrates how to use the Badge component with specific variants and sizes, and how to achieve a pill shape. ```javascript Success ``` ```javascript Pill ``` -------------------------------- ### Alert Usage Example Source: https://reui.io/docs/alert Demonstrates how to import and use the ReUI Alert component in a React application. ```APIDOC ## Usage ```javascript import { Alert, AlertAction, AlertDescription, AlertTitle, } from "@/components/reui/alert" ``` ```javascript Security Update Update your password and enable 2FA. ``` ``` -------------------------------- ### Shadcn Number Field Size Example Source: https://reui.io/docs/components/base/number-field Example demonstrating how to configure the size of the Shadcn Number Field. This snippet focuses on the import statements. ```jsx import { NumberField, NumberFieldDecrement, } ``` -------------------------------- ### Rating Component Examples Source: https://reui.io/docs/components/radix/rating Demonstrates various configurations of the ReUI Rating component. ```APIDOC ## Examples ### Decimal Rating ```javascript import { Rating } from "@/components/reui/rating" export function Pattern() { return ; } ``` ### Show Value ```javascript import { Rating } from "@/components/reui/rating" export function Pattern() { return ; } ``` ### Editable Rating ```javascript import { Rating } from "@/components/reui/rating" import { useState } from "react" export function Pattern() { const [rating, setRating] = useState(0.0) return ; } ``` ### Size Variants ```javascript import { Rating } from "@/components/reui/rating" export function Pattern() { return ( <> ); } ``` ``` -------------------------------- ### Sortable Upload Example Source: https://reui.io/docs/components/radix/file-upload Example of a sortable file upload component for images. It allows users to reorder uploaded files via drag and drop and specifies file type and size limits. ```javascript "use client" import { useCallback, useEffect, useState } from "react" ``` -------------------------------- ### Timeline Component Usage Source: https://reui.io/docs/components/radix/timeline Example of how to import and use the Timeline component with its various sub-components. ```jsx import { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle, } from "@/components/reui/r-timeline" March 2024 Project Initialized Successfully set up the project repository and initial architecture. ``` -------------------------------- ### Secondary Badge Example Source: https://reui.io/docs/badge Renders a badge with the 'secondary' variant. Ensure the Badge component is imported. ```javascript import { Badge } from "@/components/reui/badge" export function Pattern() { ``` View Code ``` -------------------------------- ### Import Timeline Components Source: https://reui.io/docs/components/base/timeline Import all necessary components for the Timeline from the ReUI library. Ensure the path is correct for your project setup. ```javascript import { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle, } from "@/components/reui/timeline" ``` -------------------------------- ### Horizontal Example Source: https://reui.io/docs/components/radix/scrollspy An example demonstrating the horizontal layout of the Scrollspy component. ```APIDOC ## Examples ### Horizontal ```jsx // Example JSX for horizontal layout would go here, similar to the basic usage but styled horizontally. // The provided text only shows the visual output and a client-side hook, not the full JSX. ``` ```jsx "use client" import { useRef } from "react" ``` ``` -------------------------------- ### Rating Component Usage Example Source: https://reui.io/docs/components/base/rating Basic usage example of the ReUI Rating component. ```APIDOC ## Usage Example ### Basic Usage ```jsx import { Rating } from "@/components/reui/rating" ``` ``` -------------------------------- ### Sortable Upload Example Source: https://reui.io/docs/components/base/file-upload Allows uploading up to 5 images (JPG, PNG, GIF, WebP, max 10 MB each) with drag-and-drop reordering functionality. Includes accessibility features for managing draggable items. ```javascript "use client" import { useCallback, useEffect, useState } from "react" ``` -------------------------------- ### Basic Kanban Board Usage Source: https://reui.io/docs/components/base/kanban Implement a functional Kanban board using the imported components. This example demonstrates how to manage column and item state with `useState` and pass it to the `Kanban` component. ```typescript item.id} > {Object.entries(columns).map(([id, items]) => (

{id}

{items.map((item) => ( {item.content} ))} ))}

``` -------------------------------- ### Basic Usage Source: https://reui.io/docs/components/base/file-upload Demonstrates how to use the `useFileUpload` hook to manage file uploads in a React component. ```APIDOC ## Usage ```javascript import { useFileUpload } from "@/hooks/use-file-upload" const [{ files }, { openFileDialog, getInputProps }] = useFileUpload({ accept: "image/*", multiple: false, }) return (

{files.map((file) => (

{file.file.name}

))}

) ``` ``` -------------------------------- ### Install Shadcn Number Field Source: https://reui.io/docs/components/base/number-field Install the Shadcn Number Field component using pnpm. This command adds the necessary package to your project. ```bash pnpm dlx shadcn@latest add @reui/number-field ``` -------------------------------- ### Basic File Upload Usage Source: https://reui.io/docs/components/base/file-upload Demonstrates the basic usage of the `useFileUpload` hook to handle file uploads. It includes opening the file dialog and displaying selected file names. ```javascript import { useFileUpload } from "@/hooks/use-file-upload" const [{ files }, { openFileDialog, getInputProps }] = useFileUpload({ accept: "image/*", multiple: false, }) return (

{files.map((file) => (

{file.file.name}

))}

) ``` -------------------------------- ### Basic Tree Usage in React Source: https://reui.io/docs/components/radix/tree Demonstrates how to use the Tree, TreeItem, and TreeItemLabel components to render a tree structure. Ensure you have the tree instance from '@headless-tree/core'. ```jsx import { Tree, TreeItem, TreeItemLabel } from "@/components/reui/r-tree" ``` ```jsx {tree.getItems().map((item) => ( ))} ``` -------------------------------- ### Editable Rating Example Source: https://reui.io/docs/components/base/rating Example demonstrating an editable rating component. This requires the `editable` prop to be set to `true` and typically involves managing the rating state with `useState`. ```javascript "use client" import { useState } from "react" ``` -------------------------------- ### Number Field Imports (Example Base) Source: https://reui.io/docs/components/radix/number-field These import statements are common across various Shadcn Number Field examples. They provide the necessary components for building the number field interface. ```jsx import { NumberField, NumberFieldDecrement, ``` -------------------------------- ### Kanban Component Client Component Setup Source: https://reui.io/docs/components/base/kanban This import is typically used within a 'use client' directive to enable client-side interactivity for the Kanban component. ```typescript "use client" import { ComponentProps, useState } from "react" ``` -------------------------------- ### Usage Source: https://reui.io/docs/components/radix/scrollspy Example of how to use the Scrollspy component in a React application. ```APIDOC ## Usage ```jsx import { Scrollspy } from "@/components/reui/scrollspy" import { useRef } from "react" function MyComponent() { const containerRef = useRef(null) return (

Section 1 Section 2

Content 1

Content 2

) } ``` ``` -------------------------------- ### Image Upload Example Source: https://reui.io/docs/components/base/file-upload A simple image upload component that accepts JPEG and PNG files up to 2MB. It includes a browse button. ```javascript "use client" import { useCallback, useState } from "react" ``` -------------------------------- ### Badge with Secondary Variant Source: https://reui.io/docs/components/radix/badge Example of a Badge component with the 'secondary' variant. ```javascript import { Badge } from "@/components/reui/badge" export function Pattern() { ``` -------------------------------- ### Basic Data Grid Usage with Footer Source: https://reui.io/docs/components/base/data-grid Implement a basic Data Grid with a custom footer. The footer displays the number of rows shown. This example assumes 'data' and 'columns' are defined elsewhere and 'useReactTable' is imported. ```javascript const footer = ( Showing {data.length} rows ) const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel(), }) return ( ) ```