Relume Library for React

https://react-docs.relume.io/
Admin
A React and Tailwind CSS component library featuring 1000+ pre-built section components and UI...
Tokens:55,789
Snippets:178
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Relume UI Packages

Source: https://react-docs.relume.io/getting-started/installation

Installs the Relume UI and Tailwind CSS packages using npm, yarn, or pnpm.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

```bash
yarn add @relume_io/relume-ui @relume_io/relume-tailwind
```

```bash
pnpm add @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Relume UI Components

Source: https://react-docs.relume.io/elements/carousel

Installs the necessary Relume UI packages for React and Tailwind CSS integration using npm.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Relume UI and Tailwind CSS

Source: https://react-docs.relume.io/elements/tooltip

This command installs the necessary Relume UI and Tailwind CSS packages for your React project using npm.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Relume UI Textarea

Source: https://react-docs.relume.io/elements/textarea

Installs the necessary Relume UI packages for using the Textarea component and Tailwind CSS integration.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Relume UI Label

Source: https://react-docs.relume.io/elements/label

Installs the necessary Relume UI packages for using the Label component and Tailwind CSS integration.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Relume UI and Tailwind CSS

Source: https://react-docs.relume.io/elements/button

Installs the necessary Relume UI and Tailwind CSS packages using npm. These are the core dependencies for using Relume components.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Relume UI and Tailwind CSS

Source: https://react-docs.relume.io/elements/pagination

Installs the necessary Relume UI and Tailwind CSS packages using npm. These are the core dependencies for using Relume components.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Relume UI Components

Source: https://react-docs.relume.io/elements/sidebar

Installs the necessary Relume UI packages for React and Tailwind CSS integration using npm.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Dialog Component Sign Up Form Example

Source: https://react-docs.relume.io/elements/dialog

Provides an example of using the Dialog component to create a sign-up form. This includes input fields for email and password, along with buttons for signing up and signing up with Google. It also demonstrates how to handle existing account links.

```jsx
import {
  Dialog,
  DialogTrigger,
  DialogPortal,
  DialogOverlay,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  Button,
  Label,
  Input,
} from "@relume_io/relume-ui"
import { BiLogoGoogle } from "react-icons/bi";

<Dialog>
  <DialogTrigger asChild>
    <Button>Open modal</Button>
  </DialogTrigger>
  <DialogPortal>
    <DialogOverlay className="bg-black/25" />
    <DialogContent className="w-full max-w-md bg-white px-10 py-14 md:py-16 md:px-12 md:data-[state=open]:duration-300 md:data-[state=open]:animate-in md:data-[state=closed]:animate-out md:data-[state=closed]:fade-out-0 md:data-[state=open]:fade-in-0 md:data-[state=closed]:slide-out-to-left-1/2 md:data-[state=open]:slide-in-from-left-1/2">
      <DialogHeader>
        <DialogTitle className="mb-2">Sign up</DialogTitle>
        <DialogDescription>Create an account to get started with Relume</DialogDescription>
      </DialogHeader>
      <div className="grid gap-4 py-4">
        <div className="grid items-center gap-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" />
        </div>
        <div className="grid items-center gap-2">
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" />
        </div>
      </div>
      <div className="mt-6 flex w-full flex-col gap-4 md:mt-8">
        <Button>Sign up</Button>
        <Button variant="secondary" iconLeft={<BiLogoGoogle className="size-6" />} className="gap-x-3">
          Sign up with Google
        </Button>
      </div>
      <DialogFooter className="mt-6">
        <span>Already have an account?</span>
        <Button asChild variant="link" size="link">
          <a href="https://www.relume.io" target="_blank" rel="noopener" className="underline">
            Log in
          </a>
        </Button>
      </DialogFooter>
    </DialogContent>
  </DialogPortal>
</Dialog>
```

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

### Use Relume Button Component

Source: https://react-docs.relume.io/getting-started/installation

Demonstrates how to import and use the Button component from Relume UI in a React application.

```javascript
import * as React from 'react';  
import { Button } from '@relume_io/relume-ui';  

<Button>Buy Now</Button>
```

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

### Install Relume UI and Tailwind CSS

Source: https://react-docs.relume.io/elements/switch

Installs the necessary Relume UI and Tailwind CSS packages using npm. These are essential dependencies for using the Relume UI components.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Relume UI and Tailwind CSS

Source: https://react-docs.relume.io/elements/separator

Installs the necessary Relume UI and Tailwind CSS packages using npm. These packages provide the foundation for using Relume's React components.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Tailwind CSS Dependencies (PNPM)

Source: https://react-docs.relume.io/getting-started/tailwind

Installs the `tailwindcss-animate` and `@tailwindcss/typography` packages using pnpm. PNPM is a fast, disk-space-efficient package manager.

```bash
pnpm add tailwindcss-animate @tailwindcss/typography
```

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

### Install Relume UI Components

Source: https://react-docs.relume.io/elements/dialog

Installs the Relume UI and Relume Tailwind packages using npm. These packages provide pre-built UI components and Tailwind CSS configurations for React applications.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Relume UI and Tailwind CSS

Source: https://react-docs.relume.io/elements/input

Installs the necessary Relume UI and Tailwind CSS packages using npm. These are the core dependencies for using Relume components.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Relume UI and Tailwind CSS

Source: https://react-docs.relume.io/elements/tabs

Installs the necessary Relume UI and Tailwind CSS packages using npm. These are the core dependencies for using the Relume components.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Relume UI and Tailwind

Source: https://react-docs.relume.io/elements/checkbox

Installs the necessary Relume UI and Tailwind CSS packages using npm. These are the core dependencies for using Relume components.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Input Component Examples

Source: https://react-docs.relume.io/elements/input

Provides various examples of the Input component's functionality, including disabled state, file input, left/right icons, prefixes, and integration with Label and Button components.

```javascript
import { Input, Label, Button } from '@relume_io/relume-ui';
import { BiSearch } from 'react-icons/bi'; // Assuming BiSearch is available

// Disabled Input
<Input placeholder="Email" disabled />

// File Input
<Input type="file" />

// Input with Left Icon (default iconPosition)
<Input id="search" placeholder="Search" icon={<BiSearch className="size-6" />} />

// Input with Right Icon
<Input
    id="search"
    placeholder="Search"
    icon={<BiSearch className="size-6" />}
    iconPosition="right"
/>

// Input with Button
<div className="grid items-center gap-4 md:grid-cols-[1fr_max-content]">
  <Input type="email" placeholder="Email" />
  <Button>Button</Button>
</div>

// Input with Label
<div className="grid gap-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" placeholder="Email" />
</div>
```

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

### Install Relume UI Components

Source: https://react-docs.relume.io/elements/dropdown

This snippet shows the npm command to install the Relume UI library and its Tailwind CSS integration. It's a prerequisite for using Relume's UI components in a React project.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Implement Relume Section Component (Header1)

Source: https://react-docs.relume.io/getting-started/installation

Provides a React component implementation for a header section using Relume UI components, including props for customization.

```typescript
import { Button } from "@relume_io/relume-ui";  
import type { ImageProps, ButtonProps } from "@relume_io/relume-ui";  

type Props = {  
  heading: string;  
  description: string;  
  buttons: ButtonProps[];  
  image: ImageProps;  
};

export type Header1Props = React.ComponentPropsWithoutRef<"section"> & Props;  

export const Header1 = (props: Header1Props) => {  
  const { heading, description, buttons, image } = {  
    ...defaultProps,  
    ...props,  
  } as Props;  
  return (  
    <section className="px-[5%] py-16 md:py-24 lg:py-28">  
      <div className="container">  
        <div className="grid grid-cols-1 gap-x-20 gap-y-12 md:gap-y-16 lg:grid-cols-2 lg:items-center">  
          <div>  
            <h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl">{heading}</h1>  
            <p className="md:text-md font-bold text-2xl">My description s;ldfjasdf sdlkfjasldf asldkf sadfl </p>  
            <div className="mt-6 flex flex-wrap gap-4 md:mt-8">  
              {buttons.map((button: ButtonProps, index) => (  
                <Button  
                  key={`${button.title}-${index}`}  
                  variant={button.variant}  
                  size={button.size}  
                  iconRight={button.iconRight}  
                  iconLeft={button.iconLeft}  
                >  
                  {button.title}  
                </Button>  
              ))}  
            </div>  
          </div>  
          <div>  
            <img src={image.src} className="w-full object-cover" alt={image.alt} />  
          </div>  
        </div>  
      </div>  
    </section>  
  );  
};  

const defaultProps = {  
  heading: "Medium length hero heading goes here",  
  description:  
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",  
  buttons: [  
    { title: "Button", variant: "primary" },  
    { title: "Button", variant: "secondary" },  
  ],  
  image: { src: "/placeholder-image.svg", alt: "placeholder image" },  
};  
```

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

### Basic Input Usage

Source: https://react-docs.relume.io/elements/input

Shows a simple example of rendering the Input component with a placeholder.

```jsx
<Input placeholder="Email" />
```

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

### Install Relume UI and Tailwind CSS

Source: https://react-docs.relume.io/elements/breadcrumb

Installs the necessary Relume UI packages for React and Tailwind CSS. This is a prerequisite for using the Relume UI components.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Basic Switch Usage

Source: https://react-docs.relume.io/elements/switch

A simple example of how to render the Switch component in a React application.

```jsx
<Switch />

```

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

### Install Relume UI and Tailwind CSS

Source: https://react-docs.relume.io/elements/accordion

This command installs the necessary Relume UI and Relume Tailwind packages using npm, which are required for using the Accordion component and its styling.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### React Pagination Component Example

Source: https://react-docs.relume.io/elements/pagination

This example showcases a basic React pagination component structure using Relume UI. It includes previous and next buttons, page links, and ellipsis for navigation.

```jsx
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" variant="tertiary" size="primary" />
    </PaginationItem>
    <div className="flex w-full justify-center items-center gap-2">
      <PaginationItem>
        <PaginationLink href="#" variant="secondary" size="primary">1</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" variant="secondary" size="primary">2</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" variant="secondary" size="primary">3</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationEllipsis />
      </PaginationItem>
    </div>
    <PaginationItem>
      <PaginationNext href="#" variant="tertiary" size="primary" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

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

### Install Relume UI and Tailwind CSS

Source: https://react-docs.relume.io/elements/radio-group

Installs the necessary Relume UI and Tailwind CSS packages using npm. These are essential for using the RadioGroup component and its styling.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Configure Tailwind CSS (JavaScript)

Source: https://react-docs.relume.io/getting-started/installation

Configures Tailwind CSS for a JavaScript project by including Relume UI's content and applying its preset.

```javascript
/** @type {import('tailwindcss').Config} */  

module.exports = {  
  content: [  
    "./node_modules/@relume_io/relume-ui/dist/**/*.{js,ts,jsx,tsx}"  
    "./app/**/*.{js,ts,jsx,tsx,mdx}",  
    "./src/**/*.{js,ts,jsx,tsx,mdx}",  
  ],  
  presets: [require("@relume_io/relume-tailwind")]  
}
```

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

### Install Relume UI with npm

Source: https://react-docs.relume.io/elements/select

This snippet shows the command to install the Relume UI library and its Tailwind CSS integration using npm. It's a prerequisite for using Relume components in a React project.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Install Relume UI with npm

Source: https://react-docs.relume.io/elements/sheet

This snippet shows the command to install the Relume UI library and its Tailwind CSS integration using npm. It's a prerequisite for using Relume UI components in your project.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Configure Tailwind CSS (TypeScript)

Source: https://react-docs.relume.io/getting-started/installation

Configures Tailwind CSS for a TypeScript project by importing Relume's preset and specifying content paths.

```typescript
import type { Config } from "tailwindcss";  

import relumeTailwindPreset from "@relume_io/relume-tailwind";  

const config: Config = {  
  content: [  
    "./node_modules/@relume_io/relume-ui/dist/**/*.{js,ts,jsx,tsx}",  
    "./app/**/*.{js,ts,jsx,tsx,mdx}",  
    "./src/**/*.{js,ts,jsx,tsx,mdx}",  
  ],  
  presets: [relumeTailwindPreset]  
};
export default config;
```

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

### Install Relume UI and Tailwind CSS

Source: https://react-docs.relume.io/elements/badge

Installs the necessary Relume UI and Tailwind CSS packages using npm. This is the primary method for integrating Relume components into your React project.

```bash
npm i @relume_io/relume-ui @relume_io/relume-tailwind
```

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

### Basic Pagination Usage Example

Source: https://react-docs.relume.io/elements/pagination

Illustrates a typical implementation of the Pagination component in a React application. It shows how to structure the Pagination, PaginationContent, and PaginationItem components to create a functional pagination interface.

```html
<Pagination>  
  <PaginationContent>  
    <PaginationItem>  
      <PaginationPrevious href="#" />  
    </PaginationItem>  
    <PaginationItem>  
      <PaginationLink href="#">1</PaginationLink>  
    </PaginationItem>  
    <PaginationItem>  
      <PaginationLink href="#">2</PaginationLink>  
    </PaginationItem>  
    <PaginationItem>  
      <PaginationLink href="#">3</PaginationLink>  
    </PaginationItem>  
    <PaginationItem>  
      <PaginationEllipsis />  
    </PaginationItem>  
    <PaginationItem>  
      <PaginationNext href="#" />  
    </PaginationItem>  
  </PaginationContent>  
</Pagination>  

```

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

### Basic Tooltip Usage Example

Source: https://react-docs.relume.io/elements/tooltip

This JSX code demonstrates how to use the Relume UI Tooltip component. It includes a TooltipProvider, a Tooltip with a Button as the trigger, and TooltipContent displaying text when hovered.

```jsx
<TooltipProvider>  
  <Tooltip>  
    <TooltipTrigger asChild>  
      <Button>Hover</Button>  
    </TooltipTrigger>  
    <TooltipContent>  
      <p>Hovered</p>  
    </TooltipContent>  
  </Tooltip>  
</TooltipProvider>  

```

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

### Relume Button Examples: Variants and Sizes

Source: https://react-docs.relume.io/elements/button

Illustrates various button styles and sizes available in the Relume UI library, including primary, secondary, tertiary, link, small, and icon buttons.

```jsx
// Variants
<Button>Button</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="link" size="link">Link</Button>
// Sizes
<Button size="sm">Small</Button>
<Button size="icon"><RelumeLogo /></Button>
<Button size="link">Link</Button>
```

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

### Basic Dropdown Menu Example

Source: https://react-docs.relume.io/elements/dropdown

Demonstrates the usage of the DropdownMenu component with a Button trigger. It includes a DropdownMenuLabel, a DropdownMenuSeparator, and several DropdownMenuItems.

```jsx
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>
      Dropdown
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Option One</DropdownMenuItem>
    <DropdownMenuItem>Option Two</DropdownMenuItem>
    <DropdownMenuItem>Option Three</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

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

### Usage Examples for Relume React Badge

Source: https://react-docs.relume.io/elements/badge

Illustrates how to use the Relume React Badge component with different variants. This includes the default, secondary, and outline styles.

```jsx
<Badge>Badge</Badge>
<Badge variant="secondary">Badge</Badge>
<Badge variant="outline">Badge</Badge>

```

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

### Relume Button Examples: Icons

Source: https://react-docs.relume.io/elements/button

Demonstrates how to integrate icons with the Relume Button component, showing placement on the left, right, or both sides, as well as an icon-only button.

```jsx
<Button iconLeft={<RelumeLogo />}>Button</Button>
<Button iconRight={<RelumeLogo />}>Button</Button>
<Button iconLeft={<RelumeLogo />} iconRight={<RelumeLogo />}>Button</Button>
<Button size="icon"><RelumeLogo /></Button>
```

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

### Install Tailwind CSS Dependencies (Yarn)

Source: https://react-docs.relume.io/getting-started/tailwind

Installs the `tailwindcss-animate` and `@tailwindcss/typography` packages using Yarn. This is an alternative to npm for managing project dependencies.

```bash
yarn add tailwindcss-animate @tailwindcss/typography
```

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

### Dialog Component Basic Usage

Source: https://react-docs.relume.io/elements/dialog

Demonstrates the basic implementation of the Dialog component, including its trigger, overlay, content, header, title, description, and footer. This example shows how to open a simple modal with a button and includes basic styling.

```jsx
import {
  Dialog,
  DialogTrigger,
  DialogPortal,
  DialogOverlay,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  Button,
} from "@relume_io/relume-ui"
import { BiLogoGoogle } from "react-icons/bi";

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Modal</Button>
  </DialogTrigger>
  <DialogPortal>
    <DialogOverlay className="bg-black/50" />
    <DialogContent className="w-full max-w-md bg-white p-10 md:p-12">
      <DialogHeader>
        <DialogTitle>Modal Title</DialogTitle>
        <DialogDescription>Modal Description</DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <Button variant="link" size="link" asChild>
          <a href="https://www.relume.io" className="underline" target="_blank" rel="noopener">
            Modal Footer
          </a>
        </Button>
      </DialogFooter>
    </DialogContent>
  </DialogPortal>
</Dialog>
```

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

### Install Tailwind CSS Dependencies (NPM)

Source: https://react-docs.relume.io/getting-started/tailwind

Installs the `tailwindcss-animate` and `@tailwindcss/typography` packages using npm. These are common dependencies for enhancing Tailwind CSS functionality.

```bash
npm i tailwindcss-animate @tailwindcss/typography
```

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

### React Sign Up Components

Source: https://react-docs.relume.io/sections/changelog

This section lists various React sign-up components. These are used for user registration directly on a page.

```React
/* Example of a generic React sign-up component */
function SignUpComponent(props) {
  return (
    <form className="signup-form">
      <h3>Sign Up</h3>
      {/* Form fields for username, email, password */}
      {props.children}
    </form>
  );
}
```

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

### Example Usage of Relume UI Breadcrumb (React)

Source: https://react-docs.relume.io/elements/breadcrumb

Shows a practical example of how to structure and render the Relume UI Breadcrumb component within a React application, including nested items and separators.

```jsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/blog">Blog</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

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

### React Product Header Components

Source: https://react-docs.relume.io/sections/changelog

This section lists various React product header components. These are used to introduce and highlight specific products.

```React
/* Example of a generic React product header component */
function ProductHeaderComponent(props) {
  return (
    <div className="product-header">
      <h2>{props.productName}</h2>
      <p>{props.tagline}</p>
    </div>
  );
}
```

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

### Basic RadioGroup Usage Example

Source: https://react-docs.relume.io/elements/radio-group

Demonstrates how to use the RadioGroup and RadioGroupItem components to create a selection interface. Includes associating labels with radio buttons.

```jsx
<RadioGroup defaultValue="option-one">  
  <div className="flex items-center space-x-2">  
    <RadioGroupItem value="option-one" id="option-one" />  
    <Label htmlFor="option-one">Option one</Label>  
  </div>  
  <div className="flex items-center space-x-2">  
    <RadioGroupItem value="option-two" id="option-two" />  
    <Label htmlFor="option-two">Option two</Label>  
  </div>  
</RadioGroup>  

```

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

### React Portfolio Components

Source: https://react-docs.relume.io/sections/changelog

This section lists various React portfolio components. These are used to showcase projects, work, or case studies.

```React
/* Example of a generic React portfolio component */
function PortfolioComponent(props) {
  return (
    <div className="portfolio-item">
      <h4>{props.title}</h4>
      <p>{props.description}</p>
    </div>
  );
}
```

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

### Render Textarea with Disabled State and Integrations (React)

Source: https://react-docs.relume.io/elements/textarea

Provides examples of using the Textarea component with a disabled attribute, alongside a Button, and with a Label for accessibility.

```jsx
<Textarea placeholder="Type your message..." disabled />

<div className="grid gap-y-4">
  <Textarea placeholder="Type your message..." />
  <Button>Button</Button>
</div>

<div className="grid gap-y-2">
  <Label htmlFor="message">Message</Label>
  <Textarea placeholder="Type your message..." id="message" />
</div>

```

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

### Basic Sidebar Structure Example

Source: https://react-docs.relume.io/elements/sidebar

Demonstrates the basic structure for implementing the Relume UI Sidebar component within a React application. It shows how to wrap the main content with SidebarProvider and Sidebar, and includes placeholders for header, content, footer, and trigger elements.

```jsx
<SidebarProvider>
  <Sidebar>
    <SidebarHeader />
    <SidebarContent>
      <SidebarGroup />
      <SidebarGroup />
    </SidebarContent>
    <SidebarFooter />
  </Sidebar>
  <main>
    <SidebarTrigger />
    {children}
  </main>
</SidebarProvider>
```

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

### Usage: Label with Checkbox (React)

Source: https://react-docs.relume.io/elements/label

Shows an example of using the Relume UI Label component with a Checkbox component, allowing the label to control the checkbox interaction.

```javascript
import { Label, Checkbox } from '@relume_io/relume-ui';

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms" className="cursor-pointer">
    I accept the{" "}
    <a
      className="text-link-primary underline ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-primary focus-visible:ring-offset-2"
      href="https://www.relume.io"
      target="_blank"
      rel="noopener noreferrer"
    >
      Terms
    </a>
  </Label>
</div>

```
Tokens:
Raw