RizzUI

https://www.rizzui.com/docs/
Admin
RizzUI is a modern, minimal React UI library built with Tailwind CSS v4 and React 19, offering 50+...
Tokens:321,379
Snippets:929
Trust Score:5.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install RizzUI and Dependencies

Source: https://www.rizzui.com/docs/0.8.7/guide/getting-started

Installs the RizzUI library along with its core dependencies, Headless UI and Floating UI, using npm. It's recommended to use specific versions for compatibility.

```bash
npm i rizzui @headlessui/react @floating-ui/react
```

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

### Install and Configure TailwindCSS

Source: https://www.rizzui.com/docs/0.8.7/guide/getting-started

Installs TailwindCSS and its necessary peer dependencies as development dependencies using npm. This setup is required for RizzUI's styling to function correctly.

```bash
npm i -D tailwindcss postcss autoprefixer @tailwindcss/forms
```

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

### Install RizzUI with npm or yarn

Source: https://www.rizzui.com/docs/guide/getting-started

Installs the RizzUI library into your React or Next.js project. Requires Node.js 18.20.4 or later. Ensure TailwindCSS is installed and configured for styling. RizzUI also supports React 19 with specific versions of headlessui and floating-ui.

```bash
npm install rizzui
# or
yarn add rizzui
```

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

### Install rc-table Package

Source: https://www.rizzui.com/docs/integrations/table

Installs the `rc-table` package using npm. This is the first step to using the table components.

```bash
npm i rc-table

```

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

### Install rc-table Package

Source: https://www.rizzui.com/docs/0.8.7/integrations/table

Installs the `rc-table` package using npm. This is the first step to using the table components.

```bash
npm i rc-table

```

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

### Use RizzUI Button Component

Source: https://www.rizzui.com/docs/guide/getting-started

This JavaScript code demonstrates how to import and use a basic Button component from the RizzUI library. It shows a simple React functional component that renders a button with the text 'Default'.

```javascript
import { Button } from "rizzui";

export default function App() {
  return <Button>Default</Button>;
}

```

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

### Configure Tailwind CSS for RizzUI

Source: https://www.rizzui.com/docs/guide/getting-started

This JavaScript configuration file sets up Tailwind CSS for RizzUI. It includes necessary paths for RizzUI components and integrates the required `@tailwindcss/forms` plugin. The theme extends default Tailwind colors with RizzUI's specific color palette for background, foreground, and primary/secondary elements.

```javascript
/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors");

module.exports = {
  content: [
    "./node_modules/rizzui/dist/*.{js,ts,jsx,tsx}", // ⚠️ Required this line to compile RizzUI style.
    // 💡 configure your components, and any other source files path that contain Tailwind class names.
  ],
  theme: {
    extend: {
      colors: {
        /*
        * body, modal, drawer background & ring-offset-color
        */
        background: colors.white,

        /*
        * body text color
        */
        foreground: colors.gray[600],

        /*
        * border, default flat bg color for input components, tab & dropdown hover color
        */
        muted: colors.gray[200],

        /*
        * primary colors
        */
        primary: {
          lighter: colors.gray[200],
          DEFAULT: colors.gray[800],
          dark: colors.gray[950],
          foreground: colors.white,
        },

        /*
        * secondary colors
        */
        secondary: {
          lighter: colors.indigo[200],
          DEFAULT: colors.indigo[500],
          dark: colors.indigo[700],
          foreground: colors.white,
        },

        /*
        * danger colors
        */
        red: {
          lighter: colors.rose[200],
          DEFAULT: colors.rose[500],
          dark: colors.rose[700],
        },

        /*
        * warning colors
        */
        orange: {
          lighter: colors.amber[200],
          DEFAULT: colors.amber[500],
          dark: colors.amber[700],
        },

        /*
        * info colors
        */
        blue: {
          lighter: colors.sky[200],
          DEFAULT: colors.sky[500],
          dark: colors.sky[700],
        },

        /*
        * success colors
        */
        green: {
          lighter: colors.emerald[200],
          DEFAULT: colors.emerald[500],
          dark: colors.emerald[700],
        },
      },
      // here goes your additional configuration
    },
  },
  plugins: [require("@tailwindcss/forms")], // ⚠️ Required @tailwindcss/forms plugin.
};

```

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

### Install rc-pagination Package

Source: https://www.rizzui.com/docs/integrations/pagination

Install the `rc-pagination` package using npm. This is the first step to integrate the pagination component into your project.

```bash
npm i rc-pagination
```

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

### Install rc-pagination Package

Source: https://www.rizzui.com/docs/0.8.7/integrations/pagination

Install the `rc-pagination` package using npm. This is the first step to integrate the pagination component into your project.

```bash
npm i rc-pagination
```

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

### Use RizzUI Button Component in React

Source: https://www.rizzui.com/docs/0.8.7/guide/getting-started

This snippet demonstrates how to import and use a basic RizzUI Button component within a React application. It assumes RizzUI has been installed and configured correctly.

```jsx
import { Button } from "rizzui";

export default function App() {
  return <Button>Default</Button>;
}

```

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

### Configure Tailwind CSS for RizzUI

Source: https://www.rizzui.com/docs/0.8.7/guide/getting-started

This snippet shows the necessary Tailwind CSS configuration for RizzUI. It includes essential paths for RizzUI components and extends the theme with custom colors for light and dark modes. It also requires the '@tailwindcss/forms' plugin.

```javascript
/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors");

module.exports = {
  content: [
    "./node_modules/rizzui/dist/*.{js,ts,jsx,tsx}", // ⚠️ Required this line to compile RizzUI style.
    // ... // 💡 configure your components, and any other source files path that contain Tailwind class names.
  ],
  theme: {
    extend: {
      colors: {
        /*
        * body, modal, drawer background & ring-offset-color
        */
        background: colors.white,

        /*
        * body text color
        */
        foreground: colors.gray[600],

        /*
        * border, default flat bg color for input components, tab & dropdown hover color
        */
        muted: colors.gray[200],

        /*
        * primary colors
        */
        primary: {
          lighter: colors.gray[200],
          DEFAULT: colors.gray[800],
          dark: colors.gray[950],
          foreground: colors.white,
        },

        /*
        * secondary colors
        */
        secondary: {
          lighter: colors.indigo[200],
          DEFAULT: colors.indigo[500],
          dark: colors.indigo[700],
          foreground: colors.white,
        },

        /*
        * danger colors
        */
        red: {
          lighter: colors.rose[200],
          DEFAULT: colors.rose[500],
          dark: colors.rose[700],
        },

        /*
        * warning colors
        */
        orange: {
          lighter: colors.amber[200],
          DEFAULT: colors.amber[500],
          dark: colors.amber[700],
        },

        /*
        * info colors
        */
        blue: {
          lighter: colors.sky[200],
          DEFAULT: colors.sky[500],
          dark: colors.sky[700],
        },

        /*
        * success colors
        */
        green: {
          lighter: colors.emerald[200],
          DEFAULT: colors.emerald[500],
          dark: colors.emerald[700],
        },
      },
      // ... here goes your additional configuration
    },
  },
  plugins: [require("@tailwindcss/forms")], // ⚠️ Required @tailwindcss/forms plugin.
};

```

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

### RizzUI Grid: Start & End Columns Example

Source: https://www.rizzui.com/docs/0.8.7/layouts/grid

Illustrates using `colStart` and `colEnd` props on `Grid.Col` to precisely define where a column begins and ends within the grid. This allows for complex layouts and overlapping elements.

```javascript
import { Grid } from "rizzui";

export default function App() {
  return (
    <Grid columns="6" className="w-full">
      <Grid.Col className="...">01</Grid.Col>
      <Grid.Col colStart="2" colSpan="4" className="...">
        02
      </Grid.Col>
      <Grid.Col className="...">03</Grid.Col>
      <Grid.Col colStart="1" colEnd="3" className="...">
        04
      </Grid.Col>
      <Grid.Col className="...">05</Grid.Col>
      <Grid.Col className="...">06</Grid.Col>
      <Grid.Col colEnd="7" colSpan="2" className="...">
        07
      </Grid.Col>
      <Grid.Col colStart="1" colEnd="7" className="...">
        08
      </Grid.Col>
    </Grid>
  );
}
```

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

### RizzUI Drawer: Shopping Cart Example

Source: https://www.rizzui.com/docs/0.8.7/overlays/drawer

Shows how to render custom content within the RizzUI Drawer, using an example of an empty shopping cart. It includes a header, an empty state component, and a checkout button.

```javascript
import { useState } from "react";
import { XMarkIcon } from "@heroicons/react/20/solid";
import { ShoppingBagIcon } from "@heroicons/react/24/outline";
import { Drawer, Button, Badge, ActionIcon, Text, Empty, EmptyProductBoxIcon } from "rizzui";

export default function App() {
  const [drawerState, setDrawerState] = useState(false);
  return (
    <>
      <div
        role="button"
        tabIndex={0}
        onClick={() => setDrawerState(true)}
        className="relative inline-flex cursor-pointer"
      >
        <ShoppingBagIcon
          className="h-auto w-8"
          strokeWidth={1.2}
        />
        <Badge
          size="sm"
          enableOutlineRing
          className="absolute right-1 top-0.5 -translate-y-1/3 translate-x-1/2"
        >
          0
        </Badge>
      </div>
      <Drawer
        isOpen={drawerState}
        onClose={() => setDrawerState(false)}
      >
        <div className="flex min-h-full flex-col py-4 px-5">
          <header className="flex items-center justify-between">
            <Text as="h4">Shopping Cart</Text>
            <ActionIcon
              size="sm"
              variant="outline"
              onClick={() => setDrawerState(false)}
            >
              <XMarkIcon
                className="h-auto w-5"
                strokeWidth={1.5}
              />
            </ActionIcon>
          </header>
          {/* End of drawer header */}
          <div className="flex flex-grow flex-col items-center justify-center">
            <Empty
              image={<EmptyProductBoxIcon />}
              text="No Product Available"
              textClassName="mt-1 text-gray-500"
            />
          </div>
          {/* End of drawer body */}
          <Button
            size="lg"
            className="sticky bottom-0 z-10"
          >
            Proceed to Checkout
          </Button>
          {/* End of drawer footer */}
        </div>
      </Drawer>
    </>
  );
}
```

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

### Install rc-rate Package

Source: https://www.rizzui.com/docs/0.8.7/integrations/rate

Installs the `rc-rate` package using npm. This is the initial step required to integrate the rating component into your project.

```bash
npm i rc-rate

```

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

### Install rc-rate Package

Source: https://www.rizzui.com/docs/integrations/rate

Installs the `rc-rate` package using npm. This is the initial step required to integrate the rating component into your project.

```bash
npm i rc-rate

```

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

### Example HTML Structure for Code Component

Source: https://www.rizzui.com/docs/0.8.7/typography/code

An example of an HTML structure that can be rendered or displayed using the RizzUI Code component, showcasing basic HTML tags.

```html
<html>

  <head>

    <title>Welcome to RizzUI.</title>

  </head>

  <body>

    <h1>RizzUI Wesbite</h1>

    <h2>My first page.</h2>

    <p>

      RizzUI is a free open source react ui
      library.

    <p>

  </body>

</html>
```

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

### Simple Stepper Example

Source: https://www.rizzui.com/docs/navigation/stepper

Demonstrates the basic usage of the Stepper component with multiple steps, each having a title and description. It requires importing the Stepper component from 'rizzui'.

```javascript
"use client";

import { Stepper } from "rizzui";

export default function App() {
  return (
    <Stepper>
      <Stepper.Step title="Step 1" description="This is a description" />
      <Stepper.Step title="Step 2" description="This is a description" />
      <Stepper.Step title="Step 3" description="This is a description" />
    </Stepper>
  );
}
```

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

### RadialProgressBar with Start Positions (JavaScript)

Source: https://www.rizzui.com/docs/feedback/radial-progressbar

Shows how to change the starting angle of the RadialProgressBar using the `startAngle` property. This example also includes displaying the current percentage value overlaid on the progress bar.

```javascript
"use client";

import { RadialProgressBar } from "rizzui";

export default function App() {
  const value = 70;
  return (
    <div className="relative">
      <RadialProgressBar
        size={120}
        value={value}
        startAngle={45}
      />
      <span className="absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-lg font-semibold">
        {value}%
      </span>
    </div>
  );
}
```

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

### PhoneNumber: Default Usage Example

Source: https://www.rizzui.com/docs/integrations/phone-number

Demonstrates the basic usage of the PhoneNumber component with essential props like label and country. This serves as the starting point for integrating the component into an application.

```javascript
import PhoneNumber from "@components/phone-number";

export default function App() {
  return (
    <PhoneNumber
      label="Phone Number"
      country="us"
      preferredCountries={["us"]}
    />
  );
}
```

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

### Simple Stepper

Source: https://www.rizzui.com/docs/0.8.7/navigation/stepper

Demonstrates a basic RizzUI Stepper component with multiple steps. Each step can include a title and a description. Requires importing `Stepper` from 'rizzui'.

```javascript
import { Stepper } from "rizzui";

export default function App() {
  return (
    <Stepper>
      <Stepper.Step title="Step 1" description="This is a description" />
      <Stepper.Step title="Step 2" description="This is a description" />
      <Stepper.Step title="Step 3" description="This is a description" />
    </Stepper>
  );
}
```

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

### PhoneNumber: Default Usage Example

Source: https://www.rizzui.com/docs/0.8.7/integrations/phone-number

Demonstrates the basic usage of the PhoneNumber component with essential props like label and country. This serves as the starting point for integrating the component into an application.

```javascript
import PhoneNumber from "@components/phone-number";

export default function App() {
  return (
    <PhoneNumber
      label="Phone Number"
      country="us"
      preferredCountries={["us"]}
    />
  );
}
```

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

### Textarea with Error Message

Source: https://www.rizzui.com/docs/Inputs/textarea

Demonstrates how to use the 'error' prop on the RizzUI Textarea component to display validation error messages to the user. This example shows a basic setup with a required message.

```typescript
"use client";

import { Textarea } from "rizzui";

export default function App() {
  return (
    <Textarea
      label="Message"
      error="This field is required"
      placeholder="Enter your message"
    />
  );
}
```

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

### Button Variants Example (RizzUI JavaScript)

Source: https://www.rizzui.com/docs/0.8.7/guide/theming

Demonstrates how to use the `variant` prop on RizzUI `Button` components to apply different visual styles. Shows examples for text, outline, flat, and default button variants. Requires the `rizzui` library.

```javascript
import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Button variant="text">Button</Button>
      <Button variant="outline">Button</Button>
      <Button variant="flat">Button</Button>
      <Button>Button</Button>
    </>
  );
}
```

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

### RangeSlider with Range Counter

Source: https://www.rizzui.com/docs/integrations/range-slider

Provides an example of a RangeSlider component integrated with input fields to control and display the minimum and maximum values. This setup allows for precise value setting and real-time updates via user input.

```javascript
import React from 'react';
import { RangeSlider, cn } from 'rizzui';

export default function App() {
	const [state, setState] = React.useState({
		min: 200,
		max: 600,
	});

	function handleRangeChange(value: any) {
		setState({
			min: value[0],
			max: value[1],
		});
	}
	function handleMaxChange(max: number) {
		setState({
			...state,
			max: max || state.min,
		});
	}
	function handleMinChange(min: number) {
		setState({
			...state,
			min: min || 0,
		});
	}

	return (
		<div>
			<RangeSlider
				range
				min={0}
				max={1000}
				value={[state.min, state.max]}
				onChange={(value: any) => handleRangeChange(value)}
				className={cn('[&>.rc-slider-step]:hidden')}
			/>
			<div className="mt-5 grid grid-cols-2 items-center justify-between gap-5 text-sm font-bold">
				<div className="overflow-hidden rounded-lg border py-2">
					<p className="px-3 pt-1 text-gray-400">Min</p>
					<input
						type="number"
						value={state.min}
						onChange={(e) => handleMinChange(parseInt(e.target.value))}
						className="w-full border-none bg-gray-lightest p-3 pb-1 pt-0 text-sm outline-none focus:shadow-none focus:ring-0"
						min={0}
						max={state.max}
						readOnly
					/>
				</div>
				<div className="overflow-hidden rounded-lg border py-2">
					<p className="px-3 pt-1 text-gray-400">Max</p>
					<input
						type="number"
						value={state.max}
						onChange={(e) => handleMaxChange(parseInt(e.target.value))}
						className="w-full border-none bg-gray-lightest p-3 pb-1 pt-0 text-sm outline-none focus:shadow-none focus:ring-0"
						min={state.min}
						readOnly
					/>
				</div>
			</div>
		</div>
	);
}
```

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

### RangeSlider with Range Counter

Source: https://www.rizzui.com/docs/0.8.7/integrations/range-slider

Provides an example of a RangeSlider component integrated with input fields to control and display the minimum and maximum values. This setup allows for precise value setting and real-time updates via user input.

```javascript
import React from 'react';
import { RangeSlider, cn } from 'rizzui';

export default function App() {
	const [state, setState] = React.useState({
		min: 200,
		max: 600,
	});

	function handleRangeChange(value: any) {
		setState({
			min: value[0],
			max: value[1],
		});
	}
	function handleMaxChange(max: number) {
		setState({
			...state,
			max: max || state.min,
		});
	}
	function handleMinChange(min: number) {
		setState({
			...state,
			min: min || 0,
		});
	}

	return (
		<div>
			<RangeSlider
				range
				min={0}
				max={1000}
				value={[state.min, state.max]}
				onChange={(value: any) => handleRangeChange(value)}
				className={cn('[&>.rc-slider-step]:hidden')}
			/>
			<div className="mt-5 grid grid-cols-2 items-center justify-between gap-5 text-sm font-bold">
				<div className="overflow-hidden rounded-lg border py-2">
					<p className="px-3 pt-1 text-gray-400">Min</p>
					<input
						type="number"
						value={state.min}
						onChange={(e) => handleMinChange(parseInt(e.target.value))}
						className="w-full border-none bg-gray-lightest p-3 pb-1 pt-0 text-sm outline-none focus:shadow-none focus:ring-0"
						min={0}
						max={state.max}
						readOnly
					/>
				</div>
				<div className="overflow-hidden rounded-lg border py-2">
					<p className="px-3 pt-1 text-gray-400">Max</p>
					<input
						type="number"
						value={state.max}
						onChange={(e) => handleMaxChange(parseInt(e.target.value))}
						className="w-full border-none bg-gray-lightest p-3 pb-1 pt-0 text-sm outline-none focus:shadow-none focus:ring-0"
						min={state.min}
						readOnly
					/>
				</div>
			</div>
		</div>
	);
}
```

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

### TanStack Table Integration Example

Source: https://www.rizzui.com/docs/0.8.7/integrations/tan-stack

Demonstrates the integration of TanStack Table with RizzUI's Table components. This example showcases building interactive and accessible tables using headless UI components.

```html
<!DOCTYPE html>
<html>
<head>
  <title>RizzUI TanStack Table Example</title>
  <link rel="stylesheet" href="/path/to/rizzui.css">
  <style>
    /* Basic styling for demonstration */
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background-color: #f2f2f2; }
    img { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; vertical-align: middle; }
  </style>
</head>
<body>

  <h1>TanStack Table with RizzUI</h1>

  <div id="table-container">
    <!-- Table will be rendered here by JavaScript -->
  </div>

  <div class="pagination-controls">
    <span>Rows per page: </span>
    <select id="rowsPerPage">
      <option value="5">5</option>
      <option value="10">10</option>
      <option value="20">20</option>
    </select>
    <span>Page 1 of 3</span>
  </div>

  <script src="https://unpkg.com/@tanstack/table-core"></script>
  <script src="/path/to/rizzui-table-component.js"></script>
  <script>
    // Mock data similar to the example
    const data = [
      { img: 'https://randomuser.me/api/portraits/women/8.jpg', name: 'Francis Sanford MD', email: 'marya.barrow@yahoo.com', dueDate: 'October 18, 2023 1:24 PM', amount: '$ 544', status: 'Paid' },
      { img: 'https://randomuser.me/api/portraits/women/2.jpg', name: 'Lucia Kshlerin', email: 'mason_davis4@yahoo.com', dueDate: 'July 18, 2023 1:06 AM', amount: '$ 560', status: 'Pending' },
      { img: 'https://randomuser.me/api/portraits/men/75.jpg', name: 'Byron Hoppe III', email: 'jayda_schill35@yahoo.com', dueDate: 'December 18, 2024 3:32 PM', amount: '$ 249', status: 'Pending' },
      { img: 'https://randomuser.me/api/portraits/men/9.jpg', name: 'Camille Jenkins', email: 'retha.lehne47@hotmail.com', dueDate: 'June 30, 2024 7:06 PM', amount: '$ 255', status: 'Draft' },
      { img: 'https://randomuser.me/api/portraits/men/22.jpg', name: 'Kelli Mitchell', email: 'guise.champ@hotmail.com', dueDate: 'July 24, 2025 6:45 PM', amount: '$ 329', status: 'Paid' }
    ];

    // Placeholder for actual TanStack Table and RizzUI Table integration logic
    // This would involve initializing TanStack Table, defining columns, and
    // then rendering the table using RizzUI's Table component, passing the
    // table instance and its state.
    console.log('TanStack Table integration logic would go here.');
    // Example of how RizzUI's Table component might be used:
    // const rizzTable = new RizzUITable({ element: '#table-container', tableInstance: tanstackTableInstance });

    // Mock rendering for demonstration purposes
    const tableContainer = document.getElementById('table-container');
    let htmlContent = '<table><thead><tr><th>Customer</th><th>Due Date</th><th>Amount</th><th>Status</th></tr></thead><tbody>';
    data.forEach(row => {
      htmlContent += `<tr>
        <td><img src="${row.img}" alt="${row.name}">${row.name}<br>${row.email}</td>
        <td>${row.dueDate}</td>
        <td>${row.amount}</td>
        <td>${row.status}</td>
      </tr>`;
    });
    htmlContent += '</tbody></table>';
    tableContainer.innerHTML = htmlContent;

  </script>

</body>
</html>
```

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

### Create Vertical Tabs with RizzUI Tab Component

Source: https://www.rizzui.com/docs/navigation/tabs

Demonstrates how to create vertical tab layouts using the `vertical` prop on the RizzUI `Tab` component. This example shows basic setup for recent, popular, and trending content panels, requiring the 'rizzui' library.

```typescript
"use client";

import { Tab } from "rizzui";

export default function App() {
  return (
    <Tab vertical>
      <Tab.List>
        <Tab.ListItem>Recent</Tab.ListItem>
        <Tab.ListItem>Popular</Tab.ListItem>
        <Tab.ListItem>Trending</Tab.ListItem>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>Recent panel</Tab.Panel>
        <Tab.Panel>Popular panel</Tab.Panel>
        <Tab.Panel>Trending panel</Tab.Panel>
      </Tab.Panels>
    </Tab>
  );
}
```

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

### TanStack Table Integration Example

Source: https://www.rizzui.com/docs/integrations/tan-stack

Demonstrates the integration of RizzUI's Table components with TanStack Table for building interactive and accessible data tables. This example showcases a typical data display with customer information, due dates, amounts, and status.

```markdown
# TanStack Table

HeadlessUI components for building highly interactive and accessible tables. In these example we have used our own **Table** components with **TanStack** table.

Status...

|  | Customer | Due Date | Amount | Status |  |
| --- | --- | --- | --- | --- | --- |
|  | ![Francis Sanford MD](https://randomuser.me/api/portraits/women/8.jpg "Francis Sanford MD")  Francis Sanford MD  marya.barrow@yahoo.com | October 18, 20231:24 PM | $ 544 | Paid |  |
|  | ![Lucia Kshlerin](https://randomuser.me/api/portraits/women/2.jpg "Lucia Kshlerin")  Lucia Kshlerin  mason_davis4@yahoo.com | July 18, 20231:06 AM | $ 560 | Pending |  |
|  | ![Byron Hoppe III](https://randomuser.me/api/portraits/men/75.jpg "Byron Hoppe III")  Byron Hoppe III  jayda_schill35@yahoo.com | December 18, 20243:32 PM | $ 249 | Pending |  |
|  | ![Camille Jenkins](https://randomuser.me/api/portraits/men/9.jpg "Camille Jenkins")  Camille Jenkins  retha.lehne47@hotmail.com | June 30, 20247:06 PM | $ 255 | Draft |  |
|  | ![Kelli Mitchell](https://randomuser.me/api/portraits/men/22.jpg "Kelli Mitchell")  Kelli Mitchell  guise.champ@hotmail.com | July 24, 20256:45 PM | $ 329 | Paid |  |

0 of 15 row(s) selected.

Rows per page

5

Page 1 of 3

```

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

### RizzUI Textarea Default Example

Source: https://www.rizzui.com/docs/Inputs/textarea

Demonstrates the basic RizzUI Textarea component with a label and placeholder. This snippet shows the default appearance for capturing user text input.

```javascript
"use client";

import { Textarea } from "rizzui";

export default function App() {
  return (
    <Textarea
      label="Message"
      placeholder="Write you message..."
    />
  );
}
```

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

### Default NumberInput Example

Source: https://www.rizzui.com/docs/Inputs/number-input

Demonstrates the default usage of the RizzUI NumberInput component. It allows for basic numeric input with a placeholder and a label.

```javascript
"use client";

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <NumberInput
      formatType="numeric"
      placeholder="Type your number"
      customInput={Input as React.ComponentType<unknown>}
      {...{ label: "NumberInput" }}
    />
  );
}
```

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

### Install rc-slider Package

Source: https://www.rizzui.com/docs/integrations/range-slider

Installs the `rc-slider` package using npm. This is a prerequisite for using the RangeSlider component in your project.

```bash
npm i rc-slider

```

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

### RizzUI Signup Modal Example

Source: https://www.rizzui.com/docs/overlays/modal

This example showcases a functional signup modal using the RizzUI library. It includes form inputs for name, email, and password, along with a checkbox for terms agreement. The modal is controlled by client-side state management.

```typescript
"use client";

import { useState } from "react";
import {
  Modal,
  Button,
  Title,
  Text,
  ActionIcon,
  Input,
  Password,
  Checkbox,
} from "rizzui";
import { XMarkIcon } from "@heroicons/react/20/solid";

export default function App() {
  const [modalState, setModalState] = useState(false);
  return (
    <>
      <Button onClick={() => setModalState(true)}>Open Modal</Button>
      <Modal isOpen={modalState} onClose={() => setModalState(false)}>
        <div className="m-auto px-7 pt-6 pb-8">
          <div className="mb-7 flex items-center justify-between">
            <Title as="h3">Welcome to RizzUi</Title>
            <ActionIcon
              size="sm"
              variant="text"
              onClick={() => setModalState(false)}
            >
              <XMarkIcon className="h-auto w-6" strokeWidth={1.8} />
            </ActionIcon>
          </div>
          <div className="grid grid-cols-2 gap-y-6 gap-x-5 [&_label>span]:font-medium">
            <Input label="First Name *" inputClassName="border-2" size="lg" />
            <Input label="Last Name *" inputClassName="border-2" size="lg" />
            <Input
              label="Email *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Confirm Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Checkbox
              size="lg"
              inputClassName="border-2"
              className="col-span-2"
              label={
                <Text className="text-sm">
                  I agree to RizzUI&lsquo;s{" "}
                  <a className="underline">Terms of Service</a> and{" "}
                  <a className="underline">Privacy Policy</a>
                </Text>
              }
            />
            <Button
              type="submit"
              size="lg"
              className="col-span-2 mt-2"
              onClick={() => setModalState(false)}
            >
              Create an Account
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
}

```

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

### Install rc-slider Package

Source: https://www.rizzui.com/docs/0.8.7/integrations/range-slider

Installs the `rc-slider` package using npm. This is a prerequisite for using the RangeSlider component in your project.

```bash
npm i rc-slider

```

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

### RizzUI Switch: Helper Text

Source: https://www.rizzui.com/docs/0.8.7/Inputs/switch

Explains how to add supplementary information or guidance to the RizzUI Switch using the 'helperText' property. This text appears below the switch to provide context or instructions.

```javascript
import { Switch } from "rizzui";

export default function App() {
  return (
    <Switch
      variant="outline"
      label="Remember me"
      labelClassName="font-medium"
      helperText="Please turn on the switch"
    />
  );
}
```

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

### Install react-phone-input-2

Source: https://www.rizzui.com/docs/integrations/phone-number

Installs the react-phone-input-2 package using npm. This command is essential for adding the phone input functionality to your project.

```bash
npm i react-phone-input-2
```

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

### Badge Color Variants Example (RizzUI JavaScript)

Source: https://www.rizzui.com/docs/0.8.7/guide/theming

Illustrates the usage of the `color` prop for RizzUI `Badge` components to apply semantic colors. Includes examples for default, secondary, info, warning, danger, and success color variants, as well as notes on flat and outline variants. Requires the `rizzui` library.

```javascript
import { Badge } from "rizzui";

export default function App() {
  return (
    <>
      <Badge>Badge</Badge>
      <Badge color="secondary">Badge</Badge>
      <Badge color="info">Badge</Badge>
      <Badge color="warning">Badge</Badge>
      <Badge color="danger">Badge</Badge>
      <Badge color="success">Badge</Badge>
      {/* ... other variants like flat & outline */}
    </>
  );
}
```

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

### Install react-phone-input-2

Source: https://www.rizzui.com/docs/0.8.7/integrations/phone-number

Installs the react-phone-input-2 package using npm. This command is essential for adding the phone input functionality to your project.

```bash
npm i react-phone-input-2
```

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

### RizzUI Signup Modal Example

Source: https://www.rizzui.com/docs/0.8.7/overlays/modal

This example showcases a signup modal built with RizzUI components in a React application. It utilizes the `useState` hook for modal visibility management and integrates various RizzUI elements like `Modal`, `Button`, `Input`, `Password`, and `Checkbox` for a complete user interface.

```javascript
import { useState } from "react";
import {
  Modal,
  Button,
  Text,
  ActionIcon,
  Input,
  Password,
  Checkbox,
} from "rizzui";
import { XMarkIcon } from "@heroicons/react/20/solid";

export default function App() {
  const [modalState, setModalState] = useState(false);
  return (
    <>
      <Button onClick={() => setModalState(true)}>Open Modal</Button>
      <Modal isOpen={modalState} onClose={() => setModalState(false)}>
        <div className="m-auto px-7 pt-6 pb-8">
          <div className="mb-7 flex items-center justify-between">
            <Text as="h3">Welcome to RizzUi</Text>
            <ActionIcon
              size="sm"
              variant="text"
              onClick={() => setModalState(false)}
            >
              <XMarkIcon className="h-auto w-6" strokeWidth={1.8} />
            </ActionIcon>
          </div>
          <div className="grid grid-cols-2 gap-y-6 gap-x-5 [&_label>span]:font-medium">
            <Input label="First Name *" inputClassName="border-2" size="lg" />
            <Input label="Last Name *" inputClassName="border-2" size="lg" />
            <Input
              label="Email *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Confirm Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Checkbox
              size="lg"
              inputClassName="border-2"
              className="col-span-2"
              label={
                <Text className="text-sm">
                  I agree to RizzUI&lsquo;s{" "}
                  <a className="underline">Terms of Service</a> and{" "}
                  <a className="underline">Privacy Policy</a>
                </Text>
              }
            />
            <Button
              type="submit"
              size="lg"
              className="col-span-2 mt-2"
              onClick={() => setModalState(false)}
            >
              Create an Account
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
}

```

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

### Basic Stepper Usage (React)

Source: https://www.rizzui.com/docs/0.8.7/navigation/stepper

Demonstrates the fundamental usage of the Stepper component with basic steps. It shows how to define steps with titles and descriptions.

```javascript
import { Stepper } from "rizzui";

export default function App() {
  return (
    <Stepper dot currentIndex={1}>
      <Stepper.Step
        variant="outline"
        color="primary"
        title="Step 1"
        description="This is a description"
      />

      <Stepper.Step
        variant="outline"
        color="primary"
        title="Step 2"
        description="This is a description"
      />

      <Stepper.Step
        variant="outline"
        color="primary"
        title="Step 3"
        description="This is a description"
      />
    </Stepper>
  );
}
```

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

### RizzUI Switch: Helper Text

Source: https://www.rizzui.com/docs/Inputs/switch

Shows how to add supplementary information or guidance to the Switch component using the `helperText` prop. This improves usability by providing context or instructions directly associated with the switch.

```typescript
import { Switch } from "rizzui";

export default function App() {
  return (
    <Switch
      variant="outline"
      label="Remember me"
      labelClassName="font-medium"
      helperText="Please turn on the switch"
    />
  );
}
```

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

### RizzUI Popover Component Usage

Source: https://www.rizzui.com/docs/0.8.7/overlays/popover

Demonstrates the basic usage of the RizzUI Popover component. It shows how to import the Popover, Trigger, and Content components, along with Title, Text, and Button for creating an interactive popover element. The example illustrates opening a popover when a button is clicked.

```jsx
import { Popover, Title, Text, Button } from "rizzui";

export default function App() {
  return (
    <Popover>
      <Popover.Trigger>
        <Button variant="outline">Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Title as="h6" fontWeight="medium">
          Default popover
        </Title>
        <Text>It is opened when button is clicked. </Text>
      </Popover.Content>
    </Popover>
  );
}
```

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

### Install React Datepicker and Types

Source: https://www.rizzui.com/docs/0.8.7/integrations/react-datepicker

Installs the `react-datepicker` library and its corresponding TypeScript types using npm. These are essential dependencies for using the custom DatePicker component.

```shell
npm i react-datepicker
```

```shell
npm i --save @types/react-datepicker
```

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

### Install next-themes

Source: https://www.rizzui.com/docs/0.8.7/guide/dark-mode

Installs the next-themes package, which is used for implementing dark mode functionality in Next.js applications. This is a prerequisite for setting up theme providers.

```bash
npm i next-themes
```

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

### Stepper with Descriptions (React)

Source: https://www.rizzui.com/docs/navigation/stepper

Shows how to use the Stepper component with descriptions for each step. Each `Stepper.Step` can accept a `description` prop to provide more context. This example uses default styling without explicit colors or statuses.

```javascript
"use client";

import { Stepper } from "rizzui";

export default function App() {
  return (
    <Stepper>
      <Stepper.Step description="This is a description" title="Step 1" />
      <Stepper.Step description="This is a description" title="Step 2" />
      <Stepper.Step description="This is a description" title="Step 3" />
    </Stepper>
  );
}
```
Tokens:
Raw