### Integration Examples

Source: https://github.com/itssunnyscode/novus/blob/main/Tag.md

Examples demonstrating how to integrate and use the Tag component.

```APIDOC
## Integration Examples

### Basic Usage

Use `Tag` in a simple context with essential props.

```tsx
import { Tag } from "novus";

export default function Example() {
  return (
    <Tag children="example" />
  );
}
```

### Interactive Usage

Using `Tag` with state management for user interactions.

```tsx
import { useState } from "react";
import { Tag } from "novus";

export default function InteractiveExample() {
  const [value, setValue] = useState(null);
  
  return (
    <Tag 
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  );
}
```
```

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

### Basic Toggle Integration Example (React)

Source: https://github.com/itssunnyscode/novus/blob/main/Toggle.md

A simple example of integrating the Toggle component with basic props. It assumes the 'novus' library is installed.

```tsx
import { Toggle } from "novus";

export default function Example() {
  return (
    <Toggle checked={true} onChange={true} />
  );
}
```

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

### SelectorTabs Basic Usage Example (React)

Source: https://github.com/itssunnyscode/novus/blob/main/SelectorTabs.md

Illustrates the basic integration of the SelectorTabs component. It shows how to import and render the component with a simple 'label' prop. This is a minimal example to get started.

```tsx
import { SelectorTabs } from "novus";

export default function Example() {
  return (
    <SelectorTabs label="example" />
  );
}
```

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

### Basic CounterBadge Usage Example

Source: https://github.com/itssunnyscode/novus/blob/main/CounterBadge.md

A fundamental example of integrating the CounterBadge component into an application. It highlights the essential `content` prop. Requires the 'novus' library.

```tsx
import { CounterBadge } from "novus";

export default function Example() {
  return (
    <CounterBadge content="example" />
  );
}
```

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

### Avatar Integration Examples

Source: https://github.com/itssunnyscode/novus/blob/main/Avatar.md

Code examples showing how to integrate and use the Avatar component in various scenarios.

```APIDOC
## Integration Examples

### Basic Usage

Demonstrates the simplest way to render an Avatar component.

```tsx
import { Avatar } from "novus";

export default function Example() {
  return (
    <Avatar />
  );
}
```

### Interactive Usage

Shows how to use the Avatar component with state management for interactive features.

```tsx
import { useState } from "react";
import { Avatar } from "novus";

export default function InteractiveExample() {
  const [value, setValue] = useState(null);
  
  return (
    <Avatar 
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  );
}
```
```

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

### FilterPill Integration Examples

Source: https://github.com/itssunnyscode/novus/blob/main/FilterPill.md

Examples of how to integrate and use the FilterPill component in different scenarios.

```APIDOC
## FilterPill Integration Examples

### Description
Examples of how to integrate and use the FilterPill component in different scenarios.

### Basic Usage

Use `FilterPill` in a simple context with essential props.

#### Request Example
```tsx
import { FilterPill } from "novus";

export default function Example() {
  return (
    <FilterPill label="example" />
  );
}
```

### Interactive Usage

Using `FilterPill` with state management for user interactions.

#### Request Example
```tsx
import { useState } from "react";
import { FilterPill } from "novus";

export default function InteractiveExample() {
  const [value, setValue] = useState(null);
  
  return (
    <FilterPill 
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  );
}
```
```

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

### Install Novus Design System

Source: https://context7.com/itssunnyscode/novus/llms.txt

Install the Novus design system package using npm. This command fetches and installs the library into your project's node_modules directory.

```bash
npm install novus
```

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

### Link Component Basic Usage

Source: https://github.com/itssunnyscode/novus/blob/main/Link.md

Provides a basic example of integrating the Novus Link component into an application. This shows the minimal setup required to render the component.

```tsx
import { Link } from "novus";

export default function Example() {
  return (
    <Link  />
  );
}
```

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

### Basic App Setup with Novus ThemeProvider and Button

Source: https://context7.com/itssunnyscode/novus/llms.txt

Demonstrates the basic setup of a React application using Novus. It wraps the application with `ThemeProvider` to apply the light theme and renders a primary `Button` component.

```tsx
import { ThemeProvider, Button, Input } from "novus";

export default function App() {
  return (
    <ThemeProvider mode="light">
      <Button type="primary">Get Started</Button>
    </ThemeProvider>
  );
}
```

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

### Radio Component: Basic Usage Example

Source: https://github.com/itssunnyscode/novus/blob/main/Radio.md

Provides a fundamental example of integrating the Radio component. This snippet imports 'Radio' from 'novus' and renders it with the 'checked' prop set to true.

```tsx
import { Radio } from "novus";

export default function Example() {
  return (
    <Radio checked={true} />
  );
}
```

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

### Novus Icon Component - Basic Usage Example

Source: https://github.com/itssunnyscode/novus/blob/main/Icon.md

Provides a fundamental example of integrating the Novus Icon component into an application. It imports the Icon from 'novus' and displays an icon with a given name.

```tsx
import { Icon } from "novus";

export default function Example() {
  return (
    <Icon name="example" />
  );
}
```

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

### MultiSelect Basic Usage Example (React)

Source: https://github.com/itssunnyscode/novus/blob/main/MultiSelect.md

Shows a basic example of using the MultiSelect component with label and value props. Ensure the 'novus' library is available.

```tsx
import { MultiSelect } from "novus";

export default function Example() {
  return (
    <MultiSelect label="example" value="example" />
  );
}
```

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

### Basic Slider Integration Example (TypeScript React)

Source: https://github.com/itssunnyscode/novus/blob/main/Slider.md

Shows a basic integration of the Slider component with essential props. This example assumes the 'novus' library is available in the project.

```tsx
import { Slider } from "novus";

export default function Example() {
  return (
    <Slider  />
  );
}
```

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

### Novus Select Component Basic Usage Example

Source: https://github.com/itssunnyscode/novus/blob/main/Select.md

Illustrates the basic usage of the Novus Select component with essential props like 'label' and 'value'. This example is useful for understanding how to provide fundamental data to the Select component for a simple selection scenario.

```tsx
import { Select } from "novus";

export default function Example() {
  return (
    <Select label="example" value="example" />
  );
}
```

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

### Default Slider Usage (TypeScript React)

Source: https://github.com/itssunnyscode/novus/blob/main/Slider.md

Demonstrates the default instantiation of the Slider component from the 'novus' library. This example requires the 'novus' package to be installed.

```tsx
import { Slider } from "novus";

export default function Demo() {
  return (
    <Slider />
  );
}
```

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

### Radio Component: Default Variant Example

Source: https://github.com/itssunnyscode/novus/blob/main/Radio.md

Demonstrates the default state of the Radio component. It requires the 'novus' library and shows a basic instantiation with a label.

```tsx
import { Radio } from "novus";

export default function Demo() {
  return (
    <Radio checked={false} label={'Radio Button'} />
  );
}
```

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

### Basic Popover Integration (React)

Source: https://github.com/itssunnyscode/novus/blob/main/Popover.md

Shows a basic integration example of the Popover component with the 'open' prop set to true. This is useful for demonstrating a Popover that is initially visible.

```tsx
import { Popover } from "novus";

export default function Example() {
  return (
    <Popover open={true} />
  );
}
```

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

### Radio Component: Form Integration Example

Source: https://github.com/itssunnyscode/novus/blob/main/Radio.md

Shows how to integrate the Radio component within an HTML form, including basic submission handling. The example demonstrates using the 'name' and 'required' props on the Radio component within a form element.

```tsx
import { Radio } from "novus";

export default function FormExample() {
  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <Radio name="field" required />
      <button type="submit">Submit</button>
    </form>
  );
}
```

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

### Install Novus Design System

Source: https://github.com/itssunnyscode/novus/blob/main/README.md

Install the Novus design system package using npm, yarn, or pnpm. This makes the design system's components and utilities available for use in your project.

```bash
npm install novus
# or
yarn add novus
# or
pnpm add novus
```

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

### Tab Component Usage

Source: https://github.com/itssunnyscode/novus/blob/main/Tab.md

Examples demonstrating how to use the Tab component in different scenarios, including default and interactive usage.

```APIDOC
## Tab Component Variants

### Default Usage

```typescript
import { Tab } from "novus";

export default function Demo() {
  return (
    <Tab />
  );
}
```

### Basic Usage

Use `Tab` in a simple context with essential props.

```typescript
import { Tab } from "novus";

export default function Example() {
  return (
    <Tab value="example" label="example" />
  );
}
```

### Interactive Usage

Using `Tab` with state management for user interactions.

```typescript
import { useState } from "react";
import { Tab } from "novus";

export default function InteractiveExample() {
  const [value, setValue] = useState(null);
  
  return (
    <Tab 
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  );
}
```
```

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

### Novus Select Component Form Integration Example

Source: https://github.com/itssunnyscode/novus/blob/main/Select.md

Shows how to integrate the Novus Select component within an HTML form. This example includes handling form submission and demonstrates using common form attributes like 'name' and 'required' with the Select component.

```tsx
import { Select } from "novus";

export default function FormExample() {
  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <Select name="field" required />
      <button type="submit">Submit</button>
    </form>
  );
}
```

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

### Basic ThemeProvider Usage (TypeScript)

Source: https://github.com/itssunnyscode/novus/blob/main/ThemeProvider.md

Demonstrates the default usage of the ThemeProvider component. It requires importing the component from the 'novus' library. No specific props are shown in this basic example.

```tsx
import { ThemeProvider } from "novus";

export default function Demo() {
  return (
    <ThemeProvider />
  );
}
```

```tsx
import { ThemeProvider } from "novus";

export default function Example() {
  return (
    <ThemeProvider  />
  );
}
```

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

### Radio Component: With Feedback Variant Example

Source: https://github.com/itssunnyscode/novus/blob/main/Radio.md

Demonstrates the Radio component displaying feedback, such as an error state. This example uses the 'state' prop to indicate an error, importing 'Radio' from 'novus'.

```tsx
import { Radio } from "novus";

export default function Demo() {
  return (
    <Radio checked={false} label={'Radio Button'} state={'error'} />
  );
}
```

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

### Tag Variants

Source: https://github.com/itssunnyscode/novus/blob/main/Tag.md

Examples of different Tag component variants.

```APIDOC
## Tag Variants

### Feature

Feature variant of the component

```tsx
import { Tag } from "novus";

export default function Demo() {
  return (
    <Tag type={'feature'} text={'Feature Tag'} />
  );
}
```

### Dismissible

Dismissible variant of the component

```tsx
import { Tag } from "novus";

export default function Demo() {
  return (
    <Tag type={'dismissible'} text={'Dismissible Tag'} />
  );
}
```

### Editable

Editable variant of the component

```tsx
import { Tag } from "novus";

export default function Demo() {
  return (
    <Tag type={'editable'} text={'Editable Tag'} />
  );
}
```

### Selectable

Selectable variant of the component

```tsx
import { Tag } from "novus";

export default function Demo() {
  return (
    <Tag type={'selectable'} text={'Selectable Tag'} />
  );
}
```
```

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

### Novus Input Component Examples

Source: https://context7.com/itssunnyscode/novus/llms.txt

Demonstrates the usage of the Novus `Input` component for various input types including text, password, number, and OTP. It includes examples of labels, placeholders, value binding, change handlers, and basic form submission with validation.

```tsx
import { Input } from "novus";
import { useState } from "react";

export default function InputExample() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [otp, setOtp] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) {
      setError("Invalid email address");
      return;
    }
    console.log("Submitting:", { email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <Input
        type="text"
        label="Email Address"
        placeholder="Enter your email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />

      <Input
        type="password"
        label="Password"
        placeholder="Enter password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />

      <Input
        type="number"
        label="Amount"
        value={0}
      />

      <Input
        type="otp"
        label="Verification Code"
        value={otp}
        onChange={(e) => setOtp(e.target.value)}
      />

      {error && <p style={{color: 'red'}}>{error}</p>}
      <button type="submit">Login</button>
    </form>
  );
}
```

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

### Novus Tooltip Example (React/TSX)

Source: https://context7.com/itssunnyscode/novus/llms.txt

Illustrates the Novus Tooltip component, which provides contextual information on hover or focus. Examples show different positions and appearances applied to Button and Icon components, enhancing user guidance.

```tsx
import { Tooltip, Button, Icon } from "novus";

export default function TooltipExample() {
  return (
    <div style={{display: 'flex', gap: '20px', padding: '40px'}}>
      <Tooltip content="Click to add a new item" position="top">
        <Button type="primary" prefixIconName="ic_add">
          Add Item
        </Button>
      </Tooltip>

      <Tooltip
        content="This action cannot be undone"
        position="bottom"
        appearance="warning"
      >
        <Button type="secondary" appearance="negative">
          Delete
        </Button>
      </Tooltip>

      <Tooltip
        content="More information about this feature"
        position="right"
      >
        <Icon name="ic_info" size={24} />
      </Tooltip>

      <Tooltip
        content="Settings and preferences"
        position="left"
      >
        <Icon name="ic_settings" size={24} />
      </Tooltip>
    </div>
  );
}
```

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

### Radio Component: Checked Variant Example

Source: https://github.com/itssunnyscode/novus/blob/main/Radio.md

Illustrates how to render the Radio component in a checked state. This example imports the 'Radio' component from 'novus' and sets the 'checked' prop to true.

```tsx
import { Radio } from "novus";

export default function Demo() {
  return (
    <Radio checked={true} label={'Radio Button'} />
  );
}
```

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

### Default Toggle Component Usage (React)

Source: https://github.com/itssunnyscode/novus/blob/main/Toggle.md

Demonstrates the basic instantiation of the Toggle component with its default state and a label. This example requires the 'novus' library.

```tsx
import { Toggle } from "novus";

export default function Demo() {
  return (
    <Toggle checked={false} label={'Toggle'} />
  );
}
```

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

### Shimmer Component - Basic Usage Example

Source: https://github.com/itssunnyscode/novus/blob/main/Shimmer.md

A fundamental example of integrating the Shimmer component into a React application with minimal props. This showcases the default rendering behavior when only the component is included. It depends on the 'Shimmer' component from the 'novus' package.

```tsx
import { Shimmer } from "novus";

export default function Example() {
  return (
    <Shimmer  />
  );
}
```

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

### Input Component: With Tooltip (TSX)

Source: https://github.com/itssunnyscode/novus/blob/main/Input.md

Demonstrates the Input component setup for text input, featuring a label and placeholder, suggesting tooltip integration.

```tsx
import { Input } from "novus";

export default function Demo() {
  return (
    <Input type={'text'} label={'Input with Tooltip'} placeholder={'Enter text'} />
  );
}
```

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

### Basic IconButton Integration

Source: https://github.com/itssunnyscode/novus/blob/main/IconButton.md

Shows a simple example of how to use the IconButton component with the essential `iconName` prop.

```tsx
import { IconButton } from "novus";

export default function Example() {
  return (
    <IconButton iconName="example" />
  );
}
```

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

### MenuItem Variants

Source: https://github.com/itssunnyscode/novus/blob/main/MenuItem.md

Examples demonstrating different variants of the MenuItem component.

```APIDOC
## Variants

### Default

Default variant of the component

```tsx
import { MenuItem } from "novus";

export default function Demo() {
  return (
    <MenuItem children={'Menu Item'} value={'item1'} onClick={(event} />
  );
}
```

### WithPrefix

WithPrefix variant of the component

```tsx
import { MenuItem } from "novus";

export default function Demo() {
  return (
    <MenuItem children={'Menu Item with Icon'} value={'item2'} prefix={<Icon name="ic_favourite" size="s" color="neutral" />} />
  );
}
```

### WithSuffix

WithSuffix variant of the component

```tsx
import { MenuItem } from "novus";

export default function Demo() {
  return (
    <MenuItem children={'Menu Item with Suffix'} value={'item3'} suffix={<Icon name="ic_chevron_right" size="s" color="neutral" />} />
  );
}
```

### Selected

Selected variant of the component

```tsx
import { MenuItem } from "novus";

export default function Demo() {
  return (
    <MenuItem children={'Selected Menu Item'} value={'item4'} selected={true} />
  );
}
```

### Disabled

Disabled variant of the component

```tsx
import { MenuItem } from "novus";

export default function Demo() {
  return (
    <MenuItem children={'Disabled Menu Item'} value={'item5'} disabled={true} />
  );
}
```

### WithSupportingText

WithSupportingText variant of the component

```tsx
import { MenuItem } from "novus";

export default function Demo() {
  return (
    <MenuItem children={'Menu Item'} value={'item6'} supportingText={'This is additional supporting text'} />
  );
}
```
```

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

### Novus TextArea Example (React/TSX)

Source: https://context7.com/itssunnyscode/novus/llms.txt

Demonstrates the Novus TextArea component for multi-line text input. Examples cover basic input with state management, character count limits, helper text, and read-only configurations using React hooks.

```tsx
import { TextArea } from "novus";
import { useState } from "react";

export default function TextAreaExample() {
  const [description, setDescription] = useState("");
  const [feedback, setFeedback] = useState("");
  const maxLength = 500;

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
      <TextArea
        label="Description"
        placeholder="Enter a detailed description..."
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        rows={4}
      />

      <TextArea
        label="Feedback"
        placeholder="Share your thoughts..."
        value={feedback}
        onChange={(e) => setFeedback(e.target.value)}
        rows={6}
        maxLength={maxLength}
        helperText={`${feedback.length}/${maxLength} characters`}
      />

      <TextArea
        label="Read-only content"
        value="This content cannot be edited"
        readOnly={true}
        rows={3}
      />
    </div>
  );
}
```

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

### Basic Avatar Usage

Source: https://github.com/itssunnyscode/novus/blob/main/Avatar.md

A fundamental example of integrating the Avatar component with minimal required props.

```tsx
import { Avatar } from "novus";

export default function Example() {
  return (
    <Avatar  />
  );
}
```

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

### Linear ProgressBar Example

Source: https://github.com/itssunnyscode/novus/blob/main/ProgressBar.md

Demonstrates the basic usage of the linear ProgressBar component. It requires the 'type' and 'progress' props to display the progress bar. No external dependencies beyond the 'novus' library are needed.

```tsx
import { ProgressBar } from "novus";

export default function Demo() {
  return (
    <ProgressBar type={'linear'} progress={50} />
  );
}
```

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

### FormStepper Basic Usage (TSX)

Source: https://github.com/itssunnyscode/novus/blob/main/FormStepper.md

Illustrates the basic usage of the FormStepper component, suitable for simple contexts. This example shows how to render the component with minimal configuration, relying on its default behaviors.

```tsx
import { FormStepper } from "novus";

export default function Example() {
  return (
    <FormStepper  />
  );
}
```

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

### Complete Form Example with Novus UI (React/TSX)

Source: https://context7.com/itssunnyscode/novus/llms.txt

A comprehensive form example built with React and TypeScript, utilizing Novus UI components for a seamless user experience. It handles state management, form validation, API submission, and success feedback. This component requires React and the 'novus' UI library.

```tsx
import {
  ThemeProvider,
  Input,
  TextArea,
  Select,
  Checkbox,
  Radio,
  Toggle,
  Button,
  Modal,
  NotificationBanner
} from "novus";
import { useState } from "react";

export default function CompleteFormExample() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    country: "",
    plan: "basic",
    bio: "",
    agreeTerms: false,
    newsletter: false,
    notifications: true
  });
  const [showModal, setShowModal] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);
  const [errors, setErrors] = useState({});

  const validateForm = () => {
    const newErrors = {};
    if (!formData.name) newErrors.name = "Name is required";
    if (!formData.email.includes("@")) newErrors.email = "Invalid email";
    if (!formData.country) newErrors.country = "Please select a country";
    if (!formData.agreeTerms) newErrors.terms = "You must agree to terms";
    return newErrors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = validateForm();

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    setShowModal(true);
  };

  const confirmSubmit = async () => {
    try {
      const response = await fetch("/api/signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData)
      });

      if (response.ok) {
        setShowModal(false);
        setShowSuccess(true);
        // Reset form
        setFormData({
          name: "",
          email: "",
          country: "",
          plan: "basic",
          bio: "",
          agreeTerms: false,
          newsletter: false,
          notifications: true
        });
      }
    } catch (error) {
      console.error("Submission failed:", error);
    }
  };

  return (
    <ThemeProvider mode="light">
      <div style={{maxWidth: '600px', margin: '0 auto', padding: '20px'}}>
        <h1>Sign Up Form</h1>

        {showSuccess && (
          <NotificationBanner
            type="success"
            title="Registration Successful!"
            message="Welcome to Novus. Check your email for confirmation."
            onClose={() => setShowSuccess(false)}
            dismissible={true}
          />
        )}

        <form onSubmit={handleSubmit}>
          <Input
            type="text"
            label="Full Name"
            placeholder="John Doe"
            value={formData.name}
            onChange={(e) => setFormData({...formData, name: e.target.value})}
          />
          {errors.name && <span style={{color: 'red'}}>{errors.name}</span>}

          <Input
            type="text"
            label="Email Address"
            placeholder="john@example.com"
            value={formData.email}
            onChange={(e) => setFormData({...formData, email: e.target.value})}
          />
          {errors.email && <span style={{color: 'red'}}>{errors.email}</span>}

          <Select
            label="Country"
            value={formData.country}
            onChange={(value) => setFormData({...formData, country: value})}
          >
            <option value="">Select a country</option>
            <option value="us">United States</option>
            <option value="uk">United Kingdom</option>
            <option value="ca">Canada</option>
          </Select>
          {errors.country && <span style={{color: 'red'}}>{errors.country}</span>}

          <fieldset>
            <legend>Choose a plan</legend>
            <Radio
              name="plan"
              value="basic"
              checked={formData.plan === "basic"}
              onChange={(e) => setFormData({...formData, plan: e.target.value})}
              label="Basic - $9/month"
            />
            <Radio
              name="plan"
              value="pro"
              checked={formData.plan === "pro"}
              onChange={(e) => setFormData({...formData, plan: e.target.value})}
              label="Pro - $29/month"
            />
          </fieldset>

          <TextArea
            label="Bio (optional)"
            placeholder="Tell us about yourself..."
            value={formData.bio}
            onChange={(e) => setFormData({...formData, bio: e.target.value})}
            rows={4}
            maxLength={500}
          />

          <Checkbox
            checked={formData.agreeTerms}
            onChange={(e) => setFormData({...formData, agreeTerms: e.target.checked})}
            label="I agree to the terms and conditions"
          />
          {errors.terms && <span style={{color: 'red'}}>{errors.terms}</span>}

          <Checkbox
            checked={formData.newsletter}
            onChange={(e) => setFormData({...formData, newsletter: e.target.checked})}
            label="Subscribe to newsletter"
          />

          <Toggle
            checked={formData.notifications}

```

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

### Novus Toggle Example (React/TSX)

Source: https://context7.com/itssunnyscode/novus/llms.txt

Shows how to implement the Novus Toggle component for binary on/off states. Examples demonstrate controlling the checked state with React's useState hook, alongside different sizes and helper text configurations.

```tsx
import { Toggle } from "novus";
import { useState } from "react";

export default function ToggleExample() {
  const [notifications, setNotifications] = useState(true);
  const [darkMode, setDarkMode] = useState(false);
  const [autoSave, setAutoSave] = useState(true);

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
      <Toggle
        checked={notifications}
        onChange={(e) => setNotifications(e.target.checked)}
        label="Enable Notifications"
        size="m"
      />

      <Toggle
        checked={darkMode}
        onChange={(e) => setDarkMode(e.target.checked)}
        label="Dark Mode"
        size="l"
        helperText="Switch between light and dark themes"
      />

      <Toggle
        checked={autoSave}
        onChange={(e) => setAutoSave(e.target.checked)}
        label="Auto-save"
        size="s"
        disabled={false}
      />

      <Toggle
        checked={false}
        label="Disabled Toggle"
        disabled={true}
      />
    </div>
  );
}
```

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

### Basic UploadDropZone Configuration (React)

Source: https://github.com/itssunnyscode/novus/blob/main/UploadDropZone.md

Shows how to configure the UploadDropZone component with essential props like `allowedFileTypes` and `maxSizeInMB`. This example illustrates setting specific constraints for file uploads.

```tsx
import { UploadDropZone } from "novus";

export default function Example() {
  return (
    <UploadDropZone allowedFileTypes="example" maxSizeInMB={0} />
  );
}
```

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

### Full Featured Menu Component

Source: https://github.com/itssunnyscode/novus/blob/main/Menu.md

Presents the Menu component configured with all available features, including larger size and search functionality. This example showcases the component's extensive capabilities.

```tsx
import { Menu } from "novus";

export default function Demo() {
  return (
    <Menu isOpen={true} size={'l'} showSearch={true} />
  );
}
```

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

### Avatar Variants

Source: https://github.com/itssunnyscode/novus/blob/main/Avatar.md

Examples demonstrating different visual variants of the Avatar component, including text, icon, image, and status indicators.

```APIDOC
## Avatar Variants

### Text Avatar

Displays an avatar using text.

```tsx
import { Avatar } from "novus";

export default function Demo() {
  return (
    <Avatar type={'text'} avatarName={'John Doe'} />
  );
}
```

### Icon Avatar

Displays an avatar using an icon.

```tsx
import { Avatar } from "novus";

export default function Demo() {
  return (
    <Avatar type={'icon'} iconName={'add'} />
  );
}
```

### Image Avatar

Displays an avatar using an image URL.

```tsx
import { Avatar } from "novus";

export default function Demo() {
  return (
    <Avatar type={'image'} imageURL={'https://example.com/avatar.jpg'} />
  );
}
```

### Avatar with Status

Displays an avatar with an online status indicator.

```tsx
import { Avatar } from "novus";

export default function Demo() {
  return (
    <Avatar type={'text'} avatarName={'Jane Doe'} status={'online'} />
  );
}
```
```

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

### Novus ProgressBar Example (React/TSX)

Source: https://context7.com/itssunnyscode/novus/llms.txt

Demonstrates the usage of the Novus ProgressBar component to display linear and circular progress indicators. It includes examples of different variants, sizes, and label configurations, with dynamic progress updates using React hooks.

```tsx
import { ProgressBar } from "novus";
import { useState, useEffect } from "react";

export default function ProgressBarExample() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval);
          return 100;
        }
        return prev + 10;
      });
    }, 500);

    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{padding: '20px'}}>
      <ProgressBar
        value={progress}
        max={100}
        variant="linear"
        size="m"
        showLabel={true}
        label={`Upload Progress: ${progress}%`}
      />

      <ProgressBar
        value={75}
        max={100}
        variant="circular"
        size="l"
        showLabel={true}
      />

      <ProgressBar
        value={progress}
        max={100}
        variant="linear"
        size="s"
        appearance="positive"
      />
    </div>
  );
}
```

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

### Default UploadDropZone Usage (React)

Source: https://github.com/itssunnyscode/novus/blob/main/UploadDropZone.md

Demonstrates the basic setup of the UploadDropZone component in a React application. It requires importing the component from the 'novus' library and rendering it within a functional component.

```tsx
import { UploadDropZone } from "novus";

export default function Demo() {
  return (
    <UploadDropZone />
  );
}
```

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

### Shimmer Component - Interactive Usage Example

Source: https://github.com/itssunnyscode/novus/blob/main/Shimmer.md

Demonstrates using the Shimmer component in an interactive React scenario, managing state with `useState`. This example includes `value` and `onChange` props, suggesting integration with form elements or dynamic data. Requires 'react' and 'Shimmer' from 'novus'.

```tsx
import { useState } from "react";
import { Shimmer } from "novus";

export default function InteractiveExample() {
  const [value, setValue] = useState(null);
  
  return (
    <Shimmer 
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  );
}
```

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

### MultiSelect Default Usage (React)

Source: https://github.com/itssunnyscode/novus/blob/main/MultiSelect.md

Demonstrates the default instantiation of the MultiSelect component. This snippet requires the 'novus' library to be installed.

```tsx
import { MultiSelect } from "novus";

export default function Demo() {
  return (
    <MultiSelect />
  );
}
```

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

### Spinner Component Examples (React)

Source: https://context7.com/itssunnyscode/novus/llms.txt

Shows the Spinner component, a loading indicator that can be displayed with or without a label. Supports different sizes and can be used to indicate ongoing processes or data fetching. The example includes a basic fetch mechanism to toggle loading state.

```tsx
import { Spinner } from "novus";
import { useState, useEffect } from "react";

export default function SpinnerExample() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);

  const fetchData = async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/data');
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error('Error:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (loading) {
    return (
      <div style={{display: 'flex', justifyContent: 'center', padding: '40px'}}>
        <Spinner size="l" label="Loading data..." />
      </div>
    );
  }

  return (
    <div>
      <Spinner size="s" />
      <Spinner size="m" label="Processing" />
      <Spinner size="xl" label="Please wait..." />
    </div>
  );
}
```

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

### Default FormStep Usage (React/TypeScript)

Source: https://github.com/itssunnyscode/novus/blob/main/FormStep.md

Demonstrates the basic integration of the FormStep component in a React application using TypeScript. This example shows how to import and render the component with its default settings.

```tsx
import { FormStep } from "novus";

export default function Demo() {
  return (
    <FormStep />
  );
}
```

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

### Basic NotificationBanner Integration

Source: https://github.com/itssunnyscode/novus/blob/main/NotificationBanner.md

A simple example of integrating the NotificationBanner component with minimal props. Ensure the 'novus' library is available in your project.

```tsx
import { NotificationBanner } from "novus";

export default function Example() {
  return (
    <NotificationBanner  />
  );
}
```

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

### Avatar Image Variant Example

Source: https://github.com/itssunnyscode/novus/blob/main/Avatar.md

Illustrates the usage of the Avatar component for displaying an image. It requires the 'type' and 'imageURL' props.

```tsx
import { Avatar } from "novus";

export default function Demo() {
  return (
    <Avatar type={'image'} imageURL={'https'} />
  );
}
```

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

### Basic Tooltip with Content in React

Source: https://github.com/itssunnyscode/novus/blob/main/Tooltip.md

Shows a basic usage example of the Tooltip component, specifying the `tooltipContent` prop. This is the essential prop for defining the text or element displayed within the tooltip.

```tsx
import { Tooltip } from "novus";

export default function Example() {
  return (
    <Tooltip tooltipContent="example" />
  );
}
```

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

### Default UploadButton Usage (React)

Source: https://github.com/itssunnyscode/novus/blob/main/UploadButton.md

Demonstrates the basic instantiation of the UploadButton component. This serves as a starting point for integrating the upload functionality into a React application.

```tsx
import { UploadButton } from "novus";

export default function Demo() {
  return (
    <UploadButton />
  );
}
```

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

### Basic Menu Component Integration

Source: https://github.com/itssunnyscode/novus/blob/main/Menu.md

Provides a simple example of integrating the Menu component into a React application, applying a custom class name for styling purposes. This demonstrates the fundamental usage pattern.

```tsx
import { Menu } from "novus";

export default function Example() {
  return (
    <Menu className="example" />
  );
}
```

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

### Tabs Component Basic Usage

Source: https://github.com/itssunnyscode/novus/blob/main/Tabs.md

A fundamental example of integrating the Tabs component with essential props. It shows how to pass `value` and `onChange` to initialize and manage the tab state.

```tsx
import { Tabs } from "novus";

export default function Example() {
  return (
    <Tabs value="example" onChange="example" />
  );
}
```

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

### Basic FormStep Integration (React/TypeScript)

Source: https://github.com/itssunnyscode/novus/blob/main/FormStep.md

Illustrates a simple use case of the FormStep component with essential props like 'index' and 'label'. This example is suitable for static step indicators where interaction is not immediately required.

```tsx
import { FormStep } from "novus";

export default function Example() {
  return (
    <FormStep index={0} label="example" />
  );
}
```

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

### NotificationBanner Warning Variant Example

Source: https://github.com/itssunnyscode/novus/blob/main/NotificationBanner.md

Illustrates how to use the warning appearance for the NotificationBanner component. This example assumes the 'novus' package is installed.

```tsx
import { NotificationBanner } from "novus";

export default function Demo() {
  return (
    <NotificationBanner appearance={'warning'} title={'Warning Title'} />
  );
}
```

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

### ProgressBar with Label Example

Source: https://github.com/itssunnyscode/novus/blob/main/ProgressBar.md

Shows how to display a label alongside the ProgressBar. The 'label' prop accepts a string to provide context or descriptive text for the progress. This enhances user understanding.

```tsx
import { ProgressBar } from "novus";

export default function Demo() {
  return (
    <ProgressBar type={'linear'} progress={30} label={'Loading...'} />
  );
}
```

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

### Basic Usage of TextArea Component (TypeScript React)

Source: https://github.com/itssunnyscode/novus/blob/main/TextArea.md

Illustrates a basic integration example of the TextArea component in a React application with TypeScript. It shows how to import and render the component in a simple context.

```tsx
import { TextArea } from "novus";

export default function Example() {
  return (
    <TextArea  />
  );
}
```

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

### Basic Tab Component Integration (React)

Source: https://github.com/itssunnyscode/novus/blob/main/Tab.md

Shows how to use the Tab component with essential props like 'value' and 'label'. This is a fundamental example for integrating the 'novus' Tab component into React applications.

```tsx
import { Tab } from "novus";

export default function Example() {
  return (
    <Tab value="example" label="example" />
  );
}
```

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

### Importing Components from Novus

Source: https://github.com/itssunnyscode/novus/blob/main/README.md

Demonstrates how to import components from the 'novus' package. Supports individual component imports for optimized bundle sizes through tree-shaking.

```javascript
import { Button, Input } from "novus";
```

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

### Novus Tag Component: Interactive Usage with State

Source: https://github.com/itssunnyscode/novus/blob/main/Tag.md

Illustrates how to use the Novus Tag component in an interactive manner, managing its state using React's `useState` hook. This example shows a basic setup for handling changes, though the specific `value` and `onChange` props might vary based on the tag's intended functionality (e.g., selectable or editable).

```tsx
import { useState } from "react";
import { Tag } from "novus";

export default function InteractiveExample() {
  const [value, setValue] = useState(null);
  
  return (
    <Tag 
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  );
}
```

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

### Basic UploadButton Integration (React)

Source: https://github.com/itssunnyscode/novus/blob/main/UploadButton.md

Shows a simple integration of the UploadButton component, utilizing essential props like `htmlFor` and `required`. This example illustrates how to set up the button for basic file input binding.

```tsx
import { UploadButton } from "novus";

export default function Example() {
  return (
    <UploadButton htmlFor="example" required={true} />
  );
}
```

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

### MultiSelect Form Integration Example (React)

Source: https://github.com/itssunnyscode/novus/blob/main/MultiSelect.md

Illustrates how to integrate the MultiSelect component within an HTML form, including basic submission handling. This requires the 'novus' library.

```tsx
import { MultiSelect } from "novus";

export default function FormExample() {
  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <MultiSelect name="field" required />
      <button type="submit">Submit</button>
    </form>
  );
}
```

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

### FormStepper Default Usage (TSX)

Source: https://github.com/itssunnyscode/novus/blob/main/FormStepper.md

Demonstrates the default instantiation of the FormStepper component. It requires no props for basic rendering. This example is suitable for simple use cases where default configurations are sufficient.

```tsx
import { FormStepper } from "novus";

export default function Demo() {
  return (
    <FormStepper />
  );
}
```

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

### Basic Typography Usage (TSX)

Source: https://github.com/itssunnyscode/novus/blob/main/Typography.md

Provides a basic example of rendering the Typography component without specific variant or type props, demonstrating minimal usage. Note that 'variant' and 'type' are required props.

```tsx
import { Typography } from "novus";

export default function Example() {
  return (
    <Typography  />
  );
}
```

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

### Avatar With Status Example

Source: https://github.com/itssunnyscode/novus/blob/main/Avatar.md

Demonstrates how to display an Avatar with a status indicator, such as 'online'. This example uses 'type', 'avatarName', and 'status' props.

```tsx
import { Avatar } from "novus";

export default function Demo() {
  return (
    <Avatar type={'text'} avatarName={'Jane Doe'} status={'online'} />
  );
}
```

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

### SelectorTabs Default Variant Usage (React)

Source: https://github.com/itssunnyscode/novus/blob/main/SelectorTabs.md

Demonstrates the default usage of the SelectorTabs component. It imports the component from 'novus' and renders it with predefined options and a selected value. This example assumes 'options' is defined elsewhere.

```tsx
import { SelectorTabs } from "novus";

export default function Demo() {
  return (
    <SelectorTabs options={options} value={'option1'} onOptionClick={(event} />
  );
}
```

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

### Best Practices

Source: https://github.com/itssunnyscode/novus/blob/main/Button.md

Guidelines and recommendations for using the Button component effectively, focusing on content organization and UI consistency.

```APIDOC
## Best Practices

### Content Organization

- Use clear, concise labels and descriptions.
- Group related content logically.
- Maintain consistent spacing and alignment.
```

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

### Radio Component: Disabled Variant Example

Source: https://github.com/itssunnyscode/novus/blob/main/Radio.md

Shows the disabled state of the Radio component, making it non-interactive. The example imports 'Radio' from 'novus' and sets the 'disabled' prop to true.

```tsx
import { Radio } from "novus";

export default function Demo() {
  return (
    <Radio checked={false} label={'Radio Button'} disabled={true} />
  );
}
```

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

### Interactive CounterBadge Usage Example

Source: https://github.com/itssunnyscode/novus/blob/main/CounterBadge.md

Demonstrates how to use the CounterBadge with state management, likely for handling user input or updates. It utilizes React's `useState` hook and expects `value` and `onChange` props. Requires 'react' and 'novus'.

```tsx
import { useState } from "react";
import { CounterBadge } from "novus";

export default function InteractiveExample() {
  const [value, setValue] = useState(null);
  
  return (
    <CounterBadge 
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  );
}
```

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

### Checkbox Component: Basic Usage Example

Source: https://github.com/itssunnyscode/novus/blob/main/Checkbox.md

Provides a simple example of integrating the Novus Checkbox component with its essential props. This demonstrates a basic, functional checkbox in a React application.

```tsx
import { Checkbox } from "novus";

export default function Example() {
  return (
    <Checkbox checked={true} />
  );
}
```

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

### Using the Icon Component

Source: https://github.com/itssunnyscode/novus/blob/main/README.md

Shows how to render icons using the `Icon` component, referencing icon names from the Novus icon set. Ensure the `ThemeProvider` is used for proper token distribution.

```javascript
<Icon name="ic_add" />
```

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

### Input Component: Basic Usage (TSX)

Source: https://github.com/itssunnyscode/novus/blob/main/Input.md

Demonstrates the most basic usage of the Input component, requiring no specific props for a simple render.

```tsx
import { Input } from "novus";

export default function Example() {
  return (
    <Input  />
  );
}
```

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

### Checkbox Component: Form Integration Example

Source: https://github.com/itssunnyscode/novus/blob/main/Checkbox.md

Illustrates integrating the Novus Checkbox component within an HTML form. This example shows how to handle form submission and includes basic accessibility attributes like 'required'.

```tsx
import { Checkbox } from "novus";

export default function FormExample() {
  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <Checkbox name="field" required />
      <button type="submit">Submit</button>
    </form>
  );
}
```

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

### Shimmer Component - Circle Variant Example

Source: https://github.com/itssunnyscode/novus/blob/main/Shimmer.md

Illustrates the usage of the Shimmer component with the 'circle' variant in React. This example sets the width and height to create a circular loading indicator. The component is part of the 'novus' library.

```tsx
import { Shimmer } from "novus";

export default function Demo() {
  return (
    <Shimmer variant={'circle'} width={'100px'} height={'100px'} />
  );
}
```

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

### Checkbox Component: Interactive Usage Example

Source: https://github.com/itssunnyscode/novus/blob/main/Checkbox.md

Shows how to use the Novus Checkbox component with React's useState hook for interactive state management. This example illustrates handling user changes via the onChange prop.

```tsx
import { useState } from "react";
import { Checkbox } from "novus";

export default function InteractiveExample() {
  const [value, setValue] = useState(null);
  
  return (
    <Checkbox 
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  );
}
```

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

### Basic Modal Integration in React

Source: https://github.com/itssunnyscode/novus/blob/main/Modal.md

Demonstrates the fundamental usage of the Novus Modal component in a React application. It requires importing the Modal from 'novus' and setting the 'open' prop to control visibility. This example is suitable for simple modal presentations.

```tsx
import { Modal } from "novus";

export default function Example() {
  return (
    <Modal open={true} />
  );
}
```

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

### Shimmer Component - Text Variant Example

Source: https://github.com/itssunnyscode/novus/blob/main/Shimmer.md

Shows how to implement the Shimmer component with the 'text' variant in React, suitable for placeholder text. This example configures the width and height to mimic text lines. It requires importing 'Shimmer' from 'novus'.

```tsx
import { Shimmer } from "novus";

export default function Demo() {
  return (
    <Shimmer variant={'text'} width={'300px'} height={'20px'} />
  );
}
```

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

### Default Menu Component Usage

Source: https://github.com/itssunnyscode/novus/blob/main/Menu.md

Demonstrates the basic instantiation of the Menu component with essential properties like isOpen, size, and showSearch set to false. This serves as a starting point for integrating the Menu component into a React application.

```tsx
import { Menu } from "novus";

export default function Demo() {
  return (
    <Menu isOpen={true} size={'m'} showSearch={false} />
  );
}
```

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

### Default IconButton Usage

Source: https://github.com/itssunnyscode/novus/blob/main/IconButton.md

Demonstrates the basic instantiation of the IconButton component without any specific props, relying on default configurations.

```tsx
import { IconButton } from "novus";

export default function Demo() {
  return (
    <IconButton />
  );
}
```

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

### Default CounterBadge Variant

Source: https://github.com/itssunnyscode/novus/blob/main/CounterBadge.md

Demonstrates the default usage of the CounterBadge component. It displays a badge with content, typically a number or string. No specific dependencies beyond the 'novus' library are shown.

```tsx
import { CounterBadge } from "novus";

export default function Demo() {
  return (
    <CounterBadge content={'99+'} />
  );
}
```

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

### NotificationBanner Default Variant Example

Source: https://github.com/itssunnyscode/novus/blob/main/NotificationBanner.md

Demonstrates the default appearance and type for the NotificationBanner component. Requires the 'novus' package.

```tsx
import { NotificationBanner } from "novus";

export default function Demo() {
  return (
    <NotificationBanner appearance={'default'} type={'suggestion'} title={'Suggestion Title'} />
  );
}
```

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

### React ThemeProvider for Design Tokens

Source: https://context7.com/itssunnyscode/novus/llms.txt

This code demonstrates how to wrap a React application's root with a `ThemeProvider`. This is a common pattern for distributing design tokens (like colors, fonts, spacing) throughout the component tree, enabling runtime theme switching without requiring a full application rebuild. It's essential for implementing design systems.

```jsx
<ThemeProvider>
  {/* Application content */}
</ThemeProvider>
```