### 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;
```