Keep React

https://github.com/staticmania/keep-react
Admin
Keep React is an open-source component library built on Tailwind CSS and React.js, offering...
Tokens:62,310
Snippets:216
Trust Score:-
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Vite React Dark Mode Setup

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/getting-started/dark-mode/DarkMode.mdx

This snippet demonstrates the integration of a dark mode component within a Vite-based React project. It assumes the existence of a `DarkModeStepForReact` component which handles the specific setup logic for Vite environments.

```jsx
import React from 'react';
import DarkModeStepForReact from './DarkModeStepForReact';

function ViteReactApp() {
  return (
    <div>
      <h1>Vite React App</h1>
      <p>Setting up dark mode in vite React Project.</p>
      <DarkModeStepForReact />
    </div>
  );
}
```

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

### Setup Toast Component

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/toast/Toast.mdx

Setup the Toast component by importing ToastWrapper and using the component. Paste the default toast variant from the documentation.

```javascript
import { ToastWrapper } from './variant/DefaultToast'

// In your root directory:
<ToastWrapper />
```

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

### Default Steps Setup

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/steps/Step.mdx

Showcases the basic setup and usage of the Steps Component for a default configuration.

```javascript
import { DefaultSteps, DefaultStepsCode } from './variant/DefaultSteps'
import CodeHighlightPreview from '../../../components/CodeHighlightPreview'

// ... inside a React component
<CodeHighlightPreview github="Steps" code={DefaultStepsCode}>
  <DefaultSteps />
</CodeHighlightPreview>
```

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

### Install Keep React in Vite App

Source: https://github.com/staticmania/keep-react/blob/main/README.md

Steps to install Keep React and its dependencies in a Vite React application. This includes creating the Vite app, installing Tailwind CSS, and adding the keep-react and phosphor-react packages.

```bash
Step 1: Create a Vite React Application
```console
npm create vite@latest my-project -- --template react
cd my-project
```

Step 2: Install Tailwind CSS
```console
npm i autoprefixer postcss tailwindcss
npx tailwindcss init -p
```

Step 3: Install Keep React
```console
npm i keep-react phosphor-react
```
Or with Yarn
```console
yarn add keep-react phosphor-react
```
Or with Pnpm
```console
pnpm add keep-react phosphor-react
```
```

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

### Next.js Dark Mode Setup

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/getting-started/dark-mode/DarkMode.mdx

This snippet illustrates how to set up dark mode in a Next.js application. It utilizes a dedicated `DarkModeStepForNext` component to manage the specific configurations required for Next.js projects.

```jsx
import React from 'react';
import DarkModeStepForNext from './DarkModeStepForNext';

function NextJsApp() {
  return (
    <div>
      <h1>Next.js App</h1>
      <p>Setting up dark mode in NextJs Project.</p>
      <DarkModeStepForNext />
    </div>
  );
}
```

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

### Default Tooltip Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/tooltip/tooltip.mdx

Demonstrates the basic usage of the Default Tooltip component to display additional information on hover.

```javascript
import React from 'react';
import { DefaultTooltip, DefaultTooltipCode } from './variant/DefaultTooltip';

function App() {
  return (
    <div>
      <DefaultTooltip />
    </div>
  );
}

export default App;
```

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

### Install Keep React in Next.js App

Source: https://github.com/staticmania/keep-react/blob/main/README.md

Steps to install Keep React and its dependencies in a Next.js application. This includes creating the Next.js app (ensuring Tailwind CSS is selected) and adding the keep-react and phosphor-react packages.

```bash
Step 1: Install Next Js Application
```console
npx create-next-app@latest
```
Ensure that you select `tailwindcss` as a dependency for your application during the setup.

`Would you like to use Tailwind CSS? -- Yes`

Step 2: Install Keep React
```console
npm i keep-react phosphor-react
```
Or with Yarn
```console
yarn add keep-react phosphor-react
```
Or with Pnpm
```console
pnpm add keep-react phosphor-react
```
```

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

### Default Pagination Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/pagination/Pagination.mdx

Demonstrates the basic usage of the Pagination component, displaying a standard list of page numbers for navigation.

```javascript
import { DefaultPagination, DefaultPaginationCode } from './variant/DefaultPagination'

// Usage:
<DefaultPagination />
```

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

### Recharts Installation

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/lineChart/LineChart.mdx

Installs the Recharts library, which is a dependency for the Line Chart component. This command should be run in your project's terminal.

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

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

### Tooltip Instantly Open Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/tooltip/tooltip.mdx

Demonstrates how to control the delay duration for a tooltip to open using the 'delayDuration' prop.

```javascript
import React from 'react';
import { TooltipInstantlyOpen, TooltipInstantlyOpenCode } from './variant/TooltipInstantlyOpen';

function App() {
  return (
    <div>
      <TooltipInstantlyOpen />
    </div>
  );
}

export default App;
```

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

### Recharts Installation for Area Chart

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/areaChart/AreaChart.mdx

Instructions for installing the Recharts library, which is a dependency for the Area Chart component. This step is crucial before using the chart.

```javascript
import { rechartsInstall } from './variant/Installation'
// ...
<CodeHighlight code={rechartsInstall} />
```

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

### Drawer Positioning Example (React)

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/drawer/Drawer.mdx

Illustrates how to position the Drawer component from different directions such as left, right, top, or bottom. This example showcases the flexibility in controlling the drawer's entry point and display.

```javascript
import { DrawerPosition, DrawerPositionCode } from './variant/DrawerPosition'
import React from 'react';

// Example usage:
function App() {
  return (
    <div>
      <DrawerPosition />
    </div>
  );
}

export default App;
```

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

### Navbar Layout 3 Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/navbar/Navbar.mdx

Illustrates the third layout variation for the Navbar component. This example provides a distinct visual style and the corresponding code for its implementation.

```jsx
import React from 'react';

const NavbarLayout3 = () => {
  return (
    <nav className="navbar navbar-light bg-light justify-content-between">
      <a className="navbar-brand" href="#">Navbar 3</a>
      <form className="form-inline">
        <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
        <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </nav>
  );
};

const NavbarLayout3Code = `import React from 'react';

const NavbarLayout3 = () => {
  return (
    <nav className=\"navbar navbar-light bg-light justify-content-between\">
      <a className=\"navbar-brand\" href=\"#\">Navbar 3</a>
      <form className=\"form-inline\">
        <input className=\"form-control mr-sm-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\" />
        <button className=\"btn btn-outline-success my-2 my-sm-0\" type=\"submit\">Search</button>
      </form>
    </nav>
  );
};
`;

export { NavbarLayout3, NavbarLayout3Code };

```

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

### Navbar Layout 2 Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/navbar/Navbar.mdx

Presents the second layout variant of the Navbar component. This example showcases a different design for the navigation bar, including its code for implementation.

```jsx
import React from 'react';

const NavbarLayout2 = () => {
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <div className="container">
        <a className="navbar-brand" href="#">Navbar 2</a>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDark" aria-controls="navbarDark" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarDark">
          <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <a className="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">About</a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

const NavbarLayout2Code = `import React from 'react';

const NavbarLayout2 = () => {
  return (
    <nav className=\"navbar navbar-expand-lg navbar-dark bg-dark\">
      <div className=\"container\">
        <a className=\"navbar-brand\" href=\"#\">Navbar 2</a>
        <button className=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarDark\" aria-controls=\"navbarDark\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">
          <span className=\"navbar-toggler-icon\"></span>
        </button>
        <div className=\"collapse navbar-collapse\" id=\"navbarDark\">
          <ul className=\"navbar-nav ms-auto mb-2 mb-lg-0\">
            <li className=\"nav-item\">
              <a className=\"nav-link active\" aria-current=\"page\" href=\"#\">Home</a>
            </li>
            <li className=\"nav-item\">
              <a className=\"nav-link\" href=\"#\">About</a>
            </li>
            <li className=\"nav-item\">
              <a className=\"nav-link\" href=\"#\">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};
`;

export { NavbarLayout2, NavbarLayout2Code };

```

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

### Basic Keep React Component Usage

Source: https://github.com/staticmania/keep-react/blob/main/README.md

A simple example demonstrating how to import and use a `Button` component from the `keep-react` library within a React application.

```jsx
import { Button } from 'keep-react'

const App = () => {
  return <Button>Button</Button>
}

export default App
```

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

### Tooltip Placement Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/tooltip/tooltip.mdx

Illustrates how to control the placement of a tooltip using the 'side' prop, which accepts values like 'top', 'bottom', 'left', and 'right'.

```javascript
import React from 'react';
import { TooltipPlacement, TooltipPlacementCode } from './variant/TooltipPlacement';

function App() {
  return (
    <div>
      <TooltipPlacement />
    </div>
  );
}

export default App;
```

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

### Install Recharts for Keep React Pie Charts

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/pieChart/PieChart.mdx

Instructions to install the Recharts library, a necessary dependency for the Keep React Pie Chart component. This step ensures all chart functionalities can be utilized correctly.

```javascript
npm install recharts
// or
yarn add recharts
```

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

### Default Dropdown Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/dropdown/Dropdown.mdx

Demonstrates the basic usage of the Dropdown component, displaying a list of items with `<DropdownItem>` components. It's designed for simple selection scenarios.

```javascript
import React from 'react';
import { DefaultDropdown, DefaultDropdownCode } from './variant/DefaultDropdown';

function App() {
  return (
    <DefaultDropdown />
  );
}
```

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

### Implement Default Popover in React

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/popover/popover.mdx

Demonstrates a basic popover component implementation using React. This example showcases the fundamental structure and usage of the Popover component.

```React
import { Popover, PopoverContent, PopoverTrigger } from '@radix-ui/react-popover'

export function DefaultPopover() {
  return (
    <Popover>
      <PopoverTrigger className="rounded-md bg-zinc-100 px-4 py-2 text-zinc-500 shadow-sm outline-none focus:ring-2">Open</PopoverTrigger>
      <PopoverContent className="z-50 rounded-md bg-white p-4 shadow-md outline-none data-[side=bottom]:animate-slide-up data-[side=top]:animate-slide-down data-[side=left]:animate-slide-in-left data-[side=right]:animate-slide-in-right">
        I am a popover!
      </PopoverContent>
    </Popover>
  )
}

export const DefaultPopoverCode = `import { Popover, PopoverContent, PopoverTrigger } from '@radix-ui/react-popover'\n\nexport function DefaultPopover() {\n  return (\n    <Popover>\n      <PopoverTrigger className=\"rounded-md bg-zinc-100 px-4 py-2 text-zinc-500 shadow-sm outline-none focus:ring-2\">Open</PopoverTrigger>\n      <PopoverContent className=\"z-50 rounded-md bg-white p-4 shadow-md outline-none data-[side=bottom]:animate-slide-up data-[side=top]:animate-slide-down data-[side=left]:animate-slide-in-left data-[side=right]:animate-slide-in-right\">\n        I am a popover!\n      </PopoverContent>\n    </Popover>\n  )\n}\n`
```

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

### Navbar Layout 1 Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/navbar/Navbar.mdx

Demonstrates the first layout variant of the Navbar component. It includes a preview of the component and its associated code, typically used for navigation at the top of a webpage.

```jsx
import React from 'react';

const NavbarLayout1 = () => {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <div className="container-fluid">
        <a className="navbar-brand" href="#">Navbar 1</a>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav">
            <li className="nav-item">
              <a className="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">Features</a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">Pricing</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

const NavbarLayout1Code = `import React from 'react';

const NavbarLayout1 = () => {
  return (
    <nav className=\"navbar navbar-expand-lg navbar-light bg-light\">
      <div className=\"container-fluid\">
        <a className=\"navbar-brand\" href=\"#\">Navbar 1</a>
        <button className=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">
          <span className=\"navbar-toggler-icon\"></span>
        </button>
        <div className=\"collapse navbar-collapse\" id=\"navbarNav\">
          <ul className=\"navbar-nav\">
            <li className=\"nav-item\">
              <a className=\"nav-link active\" aria-current=\"page\" href=\"#\">Home</a>
            </li>
            <li className=\"nav-item\">
              <a className=\"nav-link\" href=\"#\">Features</a>
            </li>
            <li className=\"nav-item\">
              <a className=\"nav-link\" href=\"#\">Pricing</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};
`;

export { NavbarLayout1, NavbarLayout1Code };

```

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

### Navbar Layout 4 Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/navbar/Navbar.mdx

Showcases the fourth layout variant of the Navbar component. This example offers another design perspective for navigation elements, complete with its source code.

```jsx
import React from 'react';

const NavbarLayout4 = () => {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <a className="navbar-brand" href="#">Navbar 4</a>
      <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
          <li className="nav-item active">
            <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Link</a>
          </li>
          <li className="nav-item">
            <a className="nav-link disabled" href="#" tabIndex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form className="form-inline my-2 my-lg-0">
          <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
          <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  );
};

const NavbarLayout4Code = `import React from 'react';

const NavbarLayout4 = () => {
  return (
    <nav className=\"navbar navbar-expand-lg navbar-light bg-light\">
      <a className=\"navbar-brand\" href=\"#\">Navbar 4</a>
      <button className=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarTogglerDemo02\" aria-controls=\"navbarTogglerDemo02\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">
        <span className=\"navbar-toggler-icon\"></span>
      </button>
      <div className=\"collapse navbar-collapse\" id=\"navbarTogglerDemo02\">
        <ul className=\"navbar-nav mr-auto mt-2 mt-lg-0\">
          <li className=\"nav-item active\">
            <a className=\"nav-link\" href=\"#\">Home <span className=\"sr-only\">(current)</span></a>
          </li>
          <li className=\"nav-item\">
            <a className=\"nav-link\" href=\"#\">Link</a>
          </li>
          <li className=\"nav-item\">
            <a className=\"nav-link disabled\" href=\"#\" tabIndex=\"-1\" aria-disabled=\"true\">Disabled</a>
          </li>
        </ul>
        <form className=\"form-inline my-2 my-lg-0\">
          <input className=\"form-control mr-sm-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\" />
          <button className=\"btn btn-outline-success my-2 my-sm-0\" type=\"submit\">Search</button>
        </form>
      </div>
    </nav>
  );
};
`;

export { NavbarLayout4, NavbarLayout4Code };

```

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

### Default Area Chart Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/areaChart/AreaChart.mdx

Demonstrates the basic implementation of an Area Chart for simple data visualization. It shows the fundamental structure and rendering.

```jsx
import { DefaultAreaChart, DefaultAreaChartCode } from './variant/DefaultAreaChart'
// ...
<CodeHighlightPreview code={DefaultAreaChartCode}>
  <DefaultAreaChart />
</CodeHighlightPreview>
```

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

### Textarea With Helper Text (React)

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/textArea/TextArea.mdx

Displays the textarea component with an associated label and helper text to guide user input. Enhances usability by providing context.

```jsx
import React from 'react';
import { TextAreaWithHelperText } from './variant/TextAreaWithHelperText';

const App = () => {
  return (
    <div>
      <TextAreaWithHelperText />
    </div>
  );
};

export default App;
```

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

### Default Notification Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/notification/notification.mdx

Demonstrates the basic usage of the Default Notification component to display informative messages or alerts to users.

```javascript
import React from 'react';
import { DefaultNotification } from './variant/DefaultNotification';

const App = () => {
  return (
    <div>
      <DefaultNotification message="This is a default notification." />
    </div>
  );
};

export default App;
```

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

### Dropdown With Icon Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/dropdown/Dropdown.mdx

Showcases the Dropdown component with icons integrated into its dropdown items. This variant enhances visual appeal and user recognition of options.

```javascript
import React from 'react';
import { DropdownWithIcon, DropdownWithIconCode } from './variant/DropdownWithIcon';

function App() {
  return (
    <DropdownWithIcon />
  );
}
```

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

### Tooltip with Arrow Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/tooltip/tooltip.mdx

Shows how to implement a tooltip with an optional arrow element to visually link the trigger with the tooltip content. The arrow must be rendered inside the TooltipContent.

```javascript
import React from 'react';
import { TooltipWithArrow, TooltipWithArrowCode } from './variant/TooltipWithArrow';

function App() {
  return (
    <div>
      <TooltipWithArrow />
    </div>
  );
}

export default App;
```

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

### Rating Types Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/rating/rating.mdx

Illustrates how to use custom rating icons to display the rating star. This allows for greater flexibility in the visual representation of user feedback.

```javascript
import React from 'react';
import { RatingTypes } from './variant/RatingTypes';

const App = () => {
  return (
    <div>
      <h2>Custom Rating Icons</h2>
      <RatingTypes />
    </div>
  );
};

export default App;
```

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

### Input Component Use Case

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/input/Input.mdx

Demonstrates a practical application or combination of input fields to showcase their usage in a real-world scenario. This example highlights how inputs can be integrated into forms or workflows.

```javascript
import React from 'react';
import { InputUseCases } from './InputUseCases';

const App = () => {
  return (
    <div>
      <InputUseCases />
    </div>
  );
};

export default App;
```

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

### Default Line Chart Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/lineChart/LineChart.mdx

Demonstrates a basic Line Chart component, suitable for visualizing simple data trends. It uses default configurations for axes, lines, and tooltips.

```jsx
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
];

const DefaultLineChart = () => (
  <LineChart
    width={500}
    height={300}
    data={data}
    margin={{
      top: 5,
      right: 30,
      left: 20,
      bottom: 5,
    }}
  >
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
    <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
  </LineChart>
);

export default DefaultLineChart;
```

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

### Default Drawer Example (React)

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/drawer/Drawer.mdx

Demonstrates the basic usage of the Drawer component, showcasing how to render a simple drawer with default content. This snippet highlights the core functionality and integration within a React application.

```javascript
import { DefaultDrawer, DefaultDrawerCode } from './variant/DefaultDrawer'
import React from 'react';

// Example usage:
function App() {
  return (
    <div>
      <DefaultDrawer />
    </div>
  );
}

export default App;
```

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

### Install Recharts for Bar Chart

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/barChart/BarChart.mdx

Installs the Recharts library, a dependency for using the Bar Chart component. This command ensures the necessary charting capabilities are available in your project.

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

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

### Keep React Installation Configuration

Source: https://github.com/staticmania/keep-react/blob/main/data/blogs/keep-react-v1.5.0.mdx

This snippet demonstrates how to configure Keep React by importing `keepTheme` and setting up the theme configuration. It specifies content paths for Tailwind CSS and exports the theme configuration, enabling custom styling and theming for your React application.

```tsx
import { keepTheme } from 'keep-react/keepTheme'\n\nconst config = {\n  content: ['./components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}'],\n  theme: {},\n}\n\nexport default keepTheme(config)
```

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

### Keep React Default Pie Chart Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/pieChart/PieChart.mdx

Demonstrates the basic implementation of the Pie Chart component. It displays data distribution with default styling and interactivity, suitable for straightforward data visualization.

```javascript
import React from 'react';
import { PieChart, Pie, Tooltip, Legend, Cell } from 'recharts';

const data = [
  { name: 'Group A', value: 400, color: '#0088FE' },
  { name: 'Group B', value: 300, color: '#00C49F' },
  { name: 'Group C', value: 300, color: '#FFBB28' },
  { name: 'Group D', value: 200, color: '#FF8042' },
];

const DefaultPie = () => (
  <PieChart width={400} height={300}>
    <Pie
      data={data}
      cx={200}
      cy={150}
      innerRadius={60}
      outerRadius={80}
      fill="#8884d8"
      dataKey="value"
      nameKey="name"
      label
    >
      {data.map((entry, index) => (
        <Cell key={`cell-${index}`} fill={entry.color} />
      ))}
    </Pie>
    <Tooltip />
    <Legend />
  </PieChart>
);

export default DefaultPie;
```

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

### Notification With Card Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/notification/notification.mdx

Shows how to use the Notification component with a card layout for a more visually appealing display of messages.

```javascript
import React from 'react';
import { NotificationWithCard } from './variant/NotificationWithCard';

const App = () => {
  return (
    <div>
      <NotificationWithCard title="Card Notification" message="This notification has a card layout." />
    </div>
  );
};

export default App;
```

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

### Carousel With Auto Play

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/carousel/carousel.mdx

Carousel component featuring an auto-play plugin that automatically advances slides. Requires installation of 'embla-carousel-autoplay'.

```javascript
import { CarouselWithAutoPlay, CarouselWithAutoPlayCode } from './variant/CarouselWithAutoPlay'

// Requires: npm install embla-carousel-autoplay
// Usage example:
// <CodeHighlightPreview code={CarouselWithAutoPlayCode}>
//   <CarouselWithAutoPlay />
// </CodeHighlightPreview>
```

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

### Divider Align Variant

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/divider/Divider.mdx

Controls the alignment of the divider using the `variant` prop. Choose from 'start', 'end', or 'center'.

```jsx
<DividerAlign />
```

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

### Carousel With ClassNames

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/carousel/carousel.mdx

Carousel component that allows styling slide items using custom class names. Requires installation of 'embla-carousel-class-names'.

```javascript
import { CarouselWithClassNames, CarouselWithClassNamesCode } from './variant/CarouselWithClassNames'

// Requires: npm install embla-carousel-class-names
// Usage example:
// <CodeHighlightPreview code={CarouselWithClassNamesCode}>
//   <CarouselWithClassNames />
// </CodeHighlightPreview>
```

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

### Radix UI Select API Reference

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/select/Select.mdx

API documentation for the underlying Radix UI Select primitive. This reference covers the core components, props, and functionalities provided by the `@radix-ui/react-select` package, which powers the Keep React Select component.

```APIDOC
Radix UI Select Primitive API Reference:

Provides a flexible and accessible set of components for building custom select dropdowns.

Core Components:
- Select: The main wrapper component for the select input.
- SelectTrigger: The button that opens and closes the select menu.
- SelectValue: Displays the currently selected value.
- SelectIcon: An icon displayed within the trigger.
- SelectContent: The container for the select options.
- SelectViewport: The scrollable viewport for the select options.
- SelectGroup: Used to group related select items.
- SelectItem: An individual selectable item within the select menu.
- SelectItemText: The text label for a select item.
- SelectLabel: A label for a group of select items.
- SelectSeparator: A visual separator between select items.
- SelectScrollButton: Buttons for scrolling the select content.

Key Props (examples):

Select:
  - `open`: boolean - Controls the open state of the select menu.
  - `onOpenChange`: (open: boolean) => void - Callback when the open state changes.
  - `dir`: 'ltr' | 'rtl' - Specifies the text direction.

SelectTrigger:
  - `asChild`: boolean - Renders the trigger as a child element.
  - `disabled`: boolean - Disables the trigger.

SelectValue:
  - `placeholder`: string - Text to display when no value is selected.

SelectContent:
  - `position`: 'popper' | 'item-aligned' - Controls the positioning of the content.
  - `side`: 'top' | 'right' | 'bottom' | 'left' - The preferred side for the content to appear.
  - `align`: 'start' | 'center' | 'end' - The alignment of the content relative to the trigger.
  - `sideOffset`: number - The offset from the trigger's side.
  - `alignOffset`: number - The offset from the trigger's alignment.

SelectItem:
  - `value`: string - The value associated with the item.
  - `disabled`: boolean - Disables the item.
  - `textValue`: string - The text content for accessibility.

Related Components:
- SelectPortal: Renders the select content in a portal.

Accessibility:
- Built with WAI-ARIA standards.
- Supports keyboard navigation (Arrow keys, Enter, Escape).

For detailed API and usage examples, refer to the official Radix UI documentation: https://www.radix.com/primitives/docs/components/select#api-reference
```

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

### Notification Positioning Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/notification/notification.mdx

Illustrates how to position notifications using predefined options like 'top-left', 'top-right', 'bottom-left', and 'bottom-right'. The default position is 'bottom-right'.

```javascript
import React from 'react';
import { NotificationPosition } from './variant/NotificationPosition';

const App = () => {
  return (
    <div>
      <NotificationPosition position="top-left" message="Notification positioned top-left." />
      <NotificationPosition position="bottom-right" message="Notification positioned bottom-right (default)." />
    </div>
  );
};

export default App;
```

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

### Popover Component API Reference

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/popover/popover.mdx

API documentation for the Popover component, detailing available props and their functionalities. Includes information on customizing the behavior and appearance of the Popover.

```APIDOC
Popover.Root:
  - None

Popover.Trigger:
  - asChild?: boolean

Popover.Portal:
  - container?: HTMLElement
  - disableOutsidePointerEvents?: boolean
  - forceMount?: boolean

Popover.Content:
  - asChild?: boolean
  - side?: 'top' | 'right' | 'bottom' | 'left'
  - sideOffset?: number
  - align?: 'start' | 'center' | 'end'
  - alignOffset?: number
  - arrowPadding?: number
  - collisionPadding?: number
  - hideWhenDetached?: boolean
  - avoidCollisions?: boolean
  - onOpenAutoFocus?: (event: Event) => void
  - onCloseAutoFocus?: (event: Event) => void
  - onEscapeKeyDown?: (event: KeyboardEvent) => void
  - onPointerDownOutside?: (event: Event) => void
  - forceMount?: boolean
```

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

### Configure Tailwind CSS for Keep React (Vite)

Source: https://github.com/staticmania/keep-react/blob/main/README.md

Configuration for the `tailwind.config.js` file to integrate Keep React's theme. This involves importing `keepTheme` and setting up the content paths.

```jsx
import { keepTheme } from 'keep-react/keepTheme'

const config = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {},
}

export default keepTheme(config)
```

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

### Dropdown With Radio Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/dropdown/Dropdown.mdx

Demonstrates the Dropdown component featuring radio buttons in its items. This variant is suitable for single-selection scenarios within a list of options.

```javascript
import React from 'react';
import { DropdownWithRadio, DropdownWithRadioCode } from './variant/DropdownWithRadio';

function App() {
  return (
    <DropdownWithRadio />
  );
}
```

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

### Popover Content API Reference

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/popover/popover.mdx

API documentation for the Popover content component, detailing available props and their functionalities. Includes information on customizing the content and behavior of the Popover.

```APIDOC
PopoverContent.Root:
  - None
```

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

### Navigator with Icons

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/pagination/Pagination.mdx

Shows how to implement pagination navigators using icons for previous and next page actions, enhancing visual appeal and usability.

```javascript
import { PaginationNavigatorComponent, PaginationNavigatorCode } from './variant/PaginationNavigator'

// Usage:
<PaginationNavigatorComponent />
```

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

### Default Tabs Component Usage (React)

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/tabs/tabs.mdx

Demonstrates the basic implementation of the Tabs component. It utilizes CodeHighlightPreview to showcase the component's structure and functionality, relying on DefaultTabsCode for the code example and DefaultTabs for the rendered component.

```javascript
import { DefaultTabs, DefaultTabsCode } from './variant/DefaultTabs'
import CodeHighlightPreview from '../../../components/CodeHighlightPreview'

// ... inside a React component
<CodeHighlightPreview code={DefaultTabsCode}>
  <DefaultTabs />
</CodeHighlightPreview>
```

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

### Upload Component API Reference (APIDOC)

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/upload/Upload.mdx

Provides details on the available props and their configurations for the Upload component. This reference helps in customizing the component's behavior and appearance.

```APIDOC
UploadComponent:
  Props:
    horizontal: boolean
      Description: Displays the upload component in a horizontal layout.
      Default: false

    multiple: boolean
      Description: Allows multiple file selections. Set to false to restrict to a single file.
      Default: true

    disabled: boolean
      Description: Prevents user interaction and file uploads.
      Default: false

    options: object
      Description: An object to pass additional configuration options to the underlying react-dropzone library.
      Example: { accept: 'image/*', maxSize: 1000000 }

    onDrop: function
      Description: Callback function triggered when files are dropped or selected.
      Parameters:
        acceptedFiles: Array<File>
        rejectedFiles: Array<File>

    onFileChange: function
      Description: Callback function triggered when the file selection state changes.
      Parameters:
        files: Array<File>

    onFileRemove: function
      Description: Callback function triggered when a file is removed from the selection.
      Parameters:
        file: File

    renderFilePreview: function
      Description: Custom render function for file previews.
      Parameters:
        file: File
      Returns: ReactNode

    renderFileItem: function
      Description: Custom render function for individual file items in the list.
      Parameters:
        file: File
        removeFile: function
      Returns: ReactNode

    renderDropzoneContent: function
      Description: Custom render function for the dropzone area content.
      Returns: ReactNode

    renderLoadingIndicator: function
      Description: Custom render function for loading indicators.
      Returns: ReactNode

    renderError: function
      Description: Custom render function for displaying errors.
      Parameters:
        error: object
      Returns: ReactNode

    uploadUrl: string
      Description: The URL endpoint for file uploads.

    uploadMethod: string
      Description: The HTTP method for file uploads (e.g., 'POST', 'PUT').
      Default: 'POST'

    headers: object
      Description: Custom headers to include in the upload request.

    withCredentials: boolean
      Description: Whether to send cookies or authorization headers with the request.
      Default: false

    onUploadSuccess: function
      Description: Callback function for successful file uploads.
      Parameters:
        response: any

    onUploadError: function
      Description: Callback function for failed file uploads.
      Parameters:
        error: any

    onUploadProgress: function
      Description: Callback function for upload progress updates.
      Parameters:
        progress: number

  Dependencies:
    - react-dropzone: For core drag-and-drop functionality.

  Usage Notes:
    - The component is built upon `react-dropzone`.
    - Refer to the `react-dropzone` documentation for advanced configuration options passed via the `options` prop.

```

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

### Value From Rating Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/rating/rating.mdx

Shows how to access and utilize the value provided by the Rating component. This is useful for capturing and processing user ratings within your application logic.

```javascript
import React from 'react';
import { ValueFromRating } from './variant/ValueFromRating';

const App = () => {
  return (
    <div>
      <h2>Accessing Rating Value</h2>
      <ValueFromRating />
    </div>
  );
};

export default App;
```

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

### Keep React Code Contribution Workflow

Source: https://github.com/staticmania/keep-react/blob/main/Contribute.md

Steps to follow for submitting code changes to the Keep React project. This includes forking the repository, creating branches, making changes, and submitting a pull request.

```git
git clone <your-forked-repo-url>
git checkout -b <your-branch-name>
# Make your changes
git commit -m "<Your Commit Message>"
git push origin <your-branch-name>
```

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

### Dropdown Component API Reference

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/dropdown/Dropdown.mdx

API documentation for the main Dropdown component, detailing all available props for customization and functionality. This reference helps developers integrate and configure the dropdown effectively.

```APIDOC
Component: Dropdown

Description: A versatile UI element providing a menu of selectable options with extensive customization.

Props:
  - (Refer to dropdownAPIData for detailed prop definitions and types)

Usage Example:
<Dropdown {...props} />

Dependencies:
- @radix-ui/react-dropdown-menu

Related Components:
- DropdownItem
- DropdownContent

Note: For detailed prop specifications, consult the `dropdownAPIData` object provided in the component's source or accompanying documentation.
```

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

### Dropdown With Submenu Example

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/dropdown/Dropdown.mdx

Illustrates the Dropdown component's capability to include submenus within its items. This allows for hierarchical navigation and more complex option structures.

```javascript
import React from 'react';
import { DropdownWithSubmenu, DropdownWithSubmenuCode } from './variant/DropdownWithSubmenu';

function App() {
  return (
    <DropdownWithSubmenu />
  );
}
```

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

### Tabs Component API Reference (APIDOC)

Source: https://github.com/staticmania/keep-react/blob/main/app/docs/components/tabs/tabs.mdx

Provides detailed API documentation for the main Tabs component. It outlines the available props, their types, and descriptions, enabling developers to customize the component's behavior and appearance.

```APIDOC
Component: Tabs

Description: Organizes and displays content in a tabbed interface.

Props:
  - variant: string
    Description: Specifies the visual style of the tabs. Supported values: 'default', 'underline'.
    - className: string
    Description: Custom CSS class to apply to the Tabs container.
  - children: ReactNode
    Description: The content of the tabs, typically TabsItem components.

Example Usage:
<Tabs variant="underline" className="my-custom-tabs">
  <TabsItem label="Tab 1">Content for Tab 1</TabsItem>
  <TabsItem label="Tab 2">Content for Tab 2</TabsItem>
</Tabs>

Related Components:
  - TabsItem: Represents an individual tab within the Tabs component.
```
Tokens:
Raw