PrimeReact

https://v11.primereact.org
Admin
PrimeReact is a comprehensive UI component suite for React applications that provides customizable,...
Tokens:162,326
Snippets:708
Trust Score:7.5
Update:1 year ago
Show doc for...
Tokens:
Raw
### Clone PrimeReact Repository

Source: https://v11.primereact.org/docs/discover/contribution

Instructions to clone the PrimeReact repository from GitHub to start the development setup. This is the initial step for any contributor wanting to work on the project locally.

```bash
git clone https://github.com/primefaces/primereact.git
```

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

### Install PrimeIcons

Source: https://v11.primereact.org/docs/icons/primeicons

Installs the PrimeIcons library using npm. This is the first step to use PrimeIcons in your project.

```bash
npm install primereact --save
```

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

### Install PrimeReact and Theme Packages

Source: https://v11.primereact.org/docs/installation/nextjs

Installs the PrimeReact library and a chosen theme package using a package manager. This is the foundational step for using PrimeReact components.

```bash
npm install primereact primeicons
npm install primereact-themes
```

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

### Install PrimeReact using npm or yarn

Source: https://v11.primereact.org/installation

Install PrimeReact globally using either npm or yarn package managers. This command downloads and installs the library into your project's node_modules directory.

```bash
npm install primereact
```

```bash
yarn add primereact
```

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

### Install PrimeReact with Unstyled Mode Enabled

Source: https://v11.primereact.org/docs/theming/unstyled

Enables unstyled mode for all PrimeReact components during installation, allowing for custom styling solutions.

```bash
npm install primereact --save
npm install --save primereact@v11-alpha
```

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

### PrimeReactProvider Setup

Source: https://v11.primereact.org/docs/configuration

Wrap your entire application with PrimeReactProvider to enable features across all components. This is typically done in your main application file.

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { PrimeReactProvider } from 'primereact/api';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <PrimeReactProvider>
            <App />
        </PrimeReactProvider>
    </React.StrictMode>
);
```

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

### PrimeReact SSR Provider Setup

Source: https://v11.primereact.org/docs/installation/nextjs

Creates a dedicated file for the PrimeReact Server-Side Rendering (SSR) provider. This setup is crucial for integrating PrimeReact with Next.js's SSR capabilities.

```typescript
import { PrimeSSRProvider } from 'primereact/api';

export default function RootLayout({ children }: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <PrimeSSRProvider>
          {children}
        </PrimeSSRProvider>
      </body>
    </html>
  );
}
```

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

### Terminal Template Example (React)

Source: https://v11.primereact.org/docs/components/terminal

Provides an example of using a template for the PrimeReact Terminal component, showcasing how to predefine welcome messages and commands. This configuration allows for a structured command-line interface experience.

```jsx
import React from 'react';
import { Terminal } from 'primereact/terminal';

export default function TemplateDemo() {
    const command = React.useCallback((event) => {
        let args = event.value.split(' ');
        let command = args.shift() || args;

        if (command === 'date') {
            return new Date().toDateString();
        } else if (command === 'greet') {
            return 'Welcome to PrimeReact ' + args[0];
        } else if (command === 'random') {
            return Math.floor(Math.random() * 1000);
        } else {
            return 'Unknown command: ' + command;
        }
    }, []);

    return (
        <div>
            <Terminal.Welcome>
                Welcome to PrimeReact
            </Terminal.Welcome>
            <Terminal.CommandList commands={command} />
        </div>
    );
}
```

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

### Basic ToggleButton Example

Source: https://v11.primereact.org/docs/components/togglebutton

A simple example of how to use the ToggleButton component. It allows toggling between two states.

```jsx
import React, { useState } from 'react';
import { ToggleButton } from 'primereact/togglebutton';

export default function App() {
    const [checked, setChecked] = useState(false);

    return (
        <div className="card flex justify-content-center">
            <ToggleButton checked={checked} onChange={(e) => setChecked(e.value)} onLabel="Pressed" offLabel="Not Pressed" />
        </div>
    );
}
```

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

### Stepper API

Source: https://v11.primereact.org/llms

API documentation for the Stepper component. The Stepper component displays a wizard-like workflow by guiding users through a multi-step progression.

```APIDOC
## GET /websites/v11_primereact/components/stepper/api.md

### Description
API documentation for the Stepper component. The Stepper component displays a wizard-like workflow by guiding users through a multi-step progression.

### Method
GET

### Endpoint
/websites/v11_primereact/components/stepper/api.md

### Parameters
#### Path Parameters
- **component** (string) - Required - The name of the component for which to retrieve API documentation.

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **api_documentation** (string) - The API documentation content for the Stepper component.

#### Response Example
```json
{
  "api_documentation": "... Stepper API details ..."
}
```
```

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

### ToolbarStart Component API

Source: https://v11.primereact.org/docs/components/toolbar/api

This section details the properties (props) and exposed methods for the ToolbarStart component, used for defining the start section of the Toolbar.

```APIDOC
## ToolbarStart API

### Description
Defines valid properties in ToolbarStart component.

### Props

| name | type | default | description |
|---|---|---|---|
| ref | Ref <unknown> | null | The reference to the component instance. |
| pIf | boolean | true | Whether the component should be rendered. |
| style | CSSProperties | ((instance?: ToolbarStartInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: ToolbarStartInstance) => string) | null | The class name to apply to the component. |
| as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
| asChild | boolean | false | Whether the component should be rendered as a child component. |
| pt | SafeRecord <ToolbarStartPassThrough> | null | The pass-through props to pass to the component |
| ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
| unstyled | boolean | null | Whether the component should be rendered without classes. |
| dt | unknown | null | The design token to use for the component. |
| styles | StylesOptions <ComponentInstance> | null | The styles to use for the component. |
| children | ReactNode | ((instance: ToolbarStartInstance) => ReactNode) | null | The children to render. |
| [key: string] | any | null |
| pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |

### Exposes
Defines the methods and properties exposed by ToolbarStart component.

| name | type | default | description |
|---|---|---|---|
| toolbar | ToolbarInstance | null | The Toolbar component instance. |

### Interfaces
#### PassThroughOptions
Defines passthrough(pt) options of ToolbarStart component.

| name | type | default | description |
|---|---|---|---|
| root | ToolbarStartPassThroughType <HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the root's DOM element. |

### Types
#### Instance
Instance of ToolbarStart component.

Values:
---
ComponentInstance<ToolbarStartProps, ToolbarStartState, ToolbarStartExposes>
```

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

### Import individual PrimeReact components

Source: https://v11.primereact.org/installation

Import specific components like the Button component directly from their respective PrimeReact modules. This allows for optimized bundling by including only the necessary components.

```javascript
import { Button } from 'primereact/button';
```

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

### PrimeReact Stepper Component

Source: https://v11.primereact.org/llms

Documentation for the PrimeReact Stepper component, which guides users through a multi-step or wizard-like workflow.

```javascript
import React, { useState } from 'react';
import { Stepper, StepperPanel } from 'primereact/stepper';
import { Button } from 'primereact/button';

export default function BasicDemo() {
    const [activeIndex, setActiveIndex] = useState(0);

    return (
        <div className="card">
            <Stepper activeIndex={activeIndex} linear={false} onSelect={({ index }) => setActiveIndex(index)}>
                <StepperPanel header="Player 1">
                    <div className="flex flex-column h-full">
                        <div className="p-3 border-round surface-100 flex-auto">Content 1</div>
                    </div>
                </StepperPanel>
                <StepperPanel header="Player 2">
                    <div className="flex flex-column h-full">
                        <div className="p-3 border-round surface-100 flex-auto">Content 2</div>
                    </div>
                </StepperPanel>
                <StepperPanel header="Content">
                    <div className="flex flex-column h-full">
                        <div className="p-3 border-round surface-100 flex-auto">Content 3</div>
                    </div>
                </StepperPanel>
            </Stepper>
            <div className="flex pt-4 justify-content-between">
                <Button label="Back" onClick={() => setActiveIndex(prev => prev - 1)} disabled={activeIndex === 0} />
                <Button label="Next" onClick={() => setActiveIndex(prev => prev + 1)} disabled={activeIndex === 2} />
            </div>
        </div>
    )
}
```

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

### Basic Terminal Usage (React)

Source: https://v11.primereact.org/docs/components/terminal

Demonstrates the basic setup of the PrimeReact Terminal component, including welcome and command list elements. It shows how to define sample commands like 'date', 'greet', and 'random'.

```jsx
import React from 'react';
import { Terminal } from 'primereact/terminal';

export default function BasicDemo() {
    const command = React.useCallback((event) => {
        let args = event.value.split(' ');
        let command = args.shift() || args;

        if (command === 'date') {
            return new Date().toDateString();
        } else if (command === 'greet') {
            return 'Welcome to PrimeReact ' + args[0];
        } else if (command === 'random') {
            return Math.floor(Math.random() * 1000);
        } else {
            return 'Unknown command: ' + command;
        }
    }, []);

    return (
        <div>
            <Terminal.Welcome />
            <Terminal.CommandList commands={command} />
        </div>
    );
}
```

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

### Configure PrimeReact Context API

Source: https://v11.primereact.org/installation

Import and utilize PrimeReactContext and PrimeReactProvider from 'primereact/api' to manage global configuration options for your React application. The PrimeReactProvider should wrap your application's root component.

```javascript
import { PrimeReactProvider, PrimeReactContext } from 'primereact/api';
```

```javascript
// _app.js
import { PrimeReactProvider } from 'primereact/api';

export default function MyApp({ Component, pageProps }) {
    return (
        <PrimeReactProvider>
            <Component {...pageProps} />
        </PrimeReactProvider>
    );
}
```

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

### Import and Use PrimeReact Button Component

Source: https://v11.primereact.org/docs/installation/nextjs

Demonstrates how to import and render a PrimeReact Button component within a Next.js application for verification. This confirms successful installation and basic functionality.

```typescript
import { Button } from 'primereact/button';

function App() {
    return (
        <div>
            <Button label="PrimeReact Button" />
        </div>
    );
}

export default App;
```

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

### Avatar Image Example (React)

Source: https://v11.primereact.org/docs/components/avatar

Illustrates the usage of the Avatar.Image component for displaying an image as an avatar. This is the primary way to represent users with profile pictures.

```jsx
import React from 'react';
import { Avatar } from 'primereact/avatar';

export default function AvatarImageDemo() {
    return (
        <div className="card flex flex-wrap justify-content-center gap-3">
            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/avatar.png" alt="User" shape="square" size="xlarge" />
            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" alt="User" shape="circle" size="xlarge" />
        </div>
    )
}
```

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

### PrimeReact Paginator Basic Usage

Source: https://v11.primereact.org/docs/components/paginator

Demonstrates the basic setup of the PrimeReact Paginator component. It requires the `total` prop for the total number of items and `itemsPerPage` for the items displayed on each page.

```jsx
import React, { useState } from 'react';
import { Paginator } from 'primereact/paginator';

export default function BasicDemo() {
    const [first, setFirst] = useState(0);
    const [rows, setRows] = useState(10);

    const onPageChange = (event) => {
        setFirst(event.first);
        setRows(event.rows);
    };

    return (
        <div className="card clearfix">
            <Paginator first={first} rows={rows} totalRecords={120} onPageChange={onPageChange}></Paginator>
        </div>
    );
}
```

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

### PrimeReact Toolbar Customization Example

Source: https://v11.primereact.org/docs/components/toolbar

Illustrates a customized Toolbar component, showcasing navigation bar functionality with various content elements.

```jsx
import React from 'react';
import { Toolbar } from 'primereact/toolbar';
import { Button } from 'primereact/button';

const ToolbarCustomDemo = () => {
    const renderToolbar = () => {
        return (
            <div className="flex flex-wrap gap-2">
                <Button label="Files" icon="pi pi-file" />
                <Button label="Edit" icon="pi pi-pencil" severity="secondary" />
                <Button label="View" icon="pi pi-eye" severity="success" />
                <Button label="Share" icon="pi pi-share-alt" severity="warning" />
            </div>
        );
    };

    return (
        <div>
            <Toolbar center={renderToolbar()}></Toolbar>
        </div>
    );
};
export default ToolbarCustomDemo;
```

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

### PrimeReact useKeyFilter Presets Example

Source: https://v11.primereact.org/docs/hooks/usekeyfilter

Demonstrates the usage of the useKeyFilter hook with various predefined patterns like Integer, Number, Money, Hex, Alphabetic, and Alphanumeric.

```javascript
import { useKeyFilter } from 'primereact/keyfilter';

function MyComponent() {
    const integerFilter = useKeyFilter('integer');
    const numberFilter = useKeyFilter('number');
    const moneyFilter = useKeyFilter('money');
    const hexFilter = useKeyFilter('hex');
    const alphaFilter = useKeyFilter('alphabetic');
    const alphanumericFilter = useKeyFilter('alphanumeric');

    return (
        <div>
            <input type="text" {...integerFilter} placeholder="Integer" />
            <input type="text" {...numberFilter} placeholder="Number" />
            <input type="text" {...moneyFilter} placeholder="Money" />
            <input type="text" {...hexFilter} placeholder="Hex" />
            <input type="text" {...alphaFilter} placeholder="Alphabetic" />
            <input type="text" {...alphanumericFilter} placeholder="Alphanumeric" />
        </div>
    );
}
```

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

### Apply PrimeReact Styled Mode Theme

Source: https://v11.primereact.org/installation

To use PrimeReact's styled mode, import a theme's CSS file. Themes like 'lara-light-cyan' provide pre-defined styles for components. Visit the PrimeReact documentation for a full list of available themes.

```javascript
import "primereact/resources/themes/lara-light-cyan/theme.css";
```

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

### ARIA Example: Accessible Checkbox Alternative

Source: https://v11.primereact.org/docs/guides/accessibility

Demonstrates using ARIA attributes like `aria-labelledby` as a replacement for the `label` tag's `htmlFor` attribute to improve screen reader support for custom UI elements.

```html
<div class="p-hidden-accessible">
    <input type="checkbox" checked="checked"/>
</div>
<label>Remember Me</label>
```

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

### Define Focus Ring with Thicker Outline (JavaScript)

Source: https://v11.primereact.org/docs/theming/styled

Example of defining a custom focus ring in PrimeReact, setting a thicker outline width and using the primary color for the outline. This enhances focus visibility for interactive elements.

```javascript
import { definePreset } from 'primereact/api';

const presetOptions = {
    // ... other options
    focus: {
        ring: {
            width: '4px', // Thicker focus ring width
            style: 'solid',
            color: 'var(--primary-color)', // Use primary color for outline
            offset: '2px'
        }
    }
};

definePreset(presetOptions);

```

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

### PrimeReact Toolbar Basic Usage

Source: https://v11.primereact.org/docs/components/toolbar

Demonstrates the basic usage of the Toolbar component, utilizing Toolbar.Start, Toolbar.Center, and Toolbar.End for content placement.

```jsx
import React from 'react';
import { Toolbar } from 'primereact/toolbar';

const ToolbarDemo = () => {
    const leftContents = (
        <React.Fragment>
            <Button label="New" icon="pi pi-plus" style={{ marginRight: '.5em' }} />
            <Button label="Print" icon="pi pi-print" severity="secondary" style={{ marginRight: '.5em' }} />
        </React.Fragment>
    );

    const rightContents = (
        <React.Fragment>
            <Button icon="pi pi-search" style={{ marginRight: '.5em' }} />
            <Button icon="pi pi-filter" severity="secondary" style={{ marginRight: '.5em' }} />
            <Button icon="pi pi-cog" severity="info" />
        </React.Fragment>
    );

    return (
        <div>
            <Toolbar left={leftContents} right={rightContents} />
        </div>
    );
}
export default ToolbarDemo;
```

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

### MeterGroup Templating Example (React)

Source: https://v11.primereact.org/docs/components/metergroup

Provides an example of MeterGroup's templating capabilities, allowing custom content for labels, meter items, and the area around the meters.

```jsx
import React from 'react';
import { MeterGroup } from 'primereact/metergroup';

export default function MeterGroupTemplateDemo() {
    const templateData = [
        { label: 'Storage', value: 70, icon: 'pi pi-database' },
    ];

    const valueTemplate = (value) => {
        return value + '%';
    };

    const itemTemplate = (item) => {
        return (
            <>
                {item.icon && <i className={item.icon}></i>}
                <span className="text-primary font-bold ml-2">{item.label}</span>
            </>
        );
    };

    const labelTemplate = (item) => {
        return (
            <span className="font-bold">{item.label}: {item.value}%</span>
        );
    };

    return (
        <div className="card">
            <MeterGroup 
                values={templateData} 
                valueTemplate={valueTemplate} 
                itemTemplate={itemTemplate} 
                labelTemplate={labelTemplate}
            />
        </div>
    );
}
```

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

### InputGroupAddon API

Source: https://v11.primereact.org/docs/components/inputgroup/api

API documentation for the InputGroupAddon component, including its properties, exposes, and types.

```APIDOC
## InputGroupAddon

### Description
API documentation for InputGroupAddon component.

### Props
Defines valid properties in InputGroupAddon component.

| name | type | default | description |
|---|---|---|---|
| ref | Ref <unknown> | null | The reference to the component instance. |
| pIf | boolean | true | Whether the component should be rendered. |
| style | CSSProperties | ((instance?: InputGroupAddonInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: InputGroupAddonInstance) => string) | null | The class name to apply to the component. |
| as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
| asChild | boolean | false | Whether the component should be rendered as a child component. |
| pt | SafeRecord <InputGroupAddonPassThrough> | null | The pass-through props to pass to the component |
| ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
| unstyled | boolean | null | Whether the component should be rendered without classes. |
| dt | unknown | null | The design token to use for the component. |
| styles | StylesOptions <ComponentInstance> | null | The styles to use for the component. |
| children | ReactNode | ((instance: InputGroupAddonInstance) => ReactNode) | null | The children to render. |
| [key: string] | any | null | |
| pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |

### Exposes
Defines the methods and properties exposed by InputGroupAddon component.

| name | type | default | description |
|---|---|---|---|
| inputgroup | InputGroupInstance | null | Instance of the InputGroup component. |

### Interfaces
#### PassThroughOptions
Defines passthrough(pt) options of InputGroupAddon component.

| name | type | default | description |
|---|---|---|---|
| root | InputGroupAddonPassThroughType <HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the root's DOM element. |

### Types
#### Instance
Instance of InputGroupAddon component.

| values |
|---|---|
| ComponentInstance<InputGroupAddonProps, InputGroupAddonState, InputGroupAddonExposes> |
```

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

### PrimeReact Card with Advanced Header Example

Source: https://v11.primereact.org/docs/components/card

Illustrates an advanced usage of the PrimeReact Card component, specifically utilizing `Card.Header` to incorporate custom content such as an image, avatar, or other elements at the top of the card. This example shows how to create a more visually rich card structure.

```jsx
import React from 'react';
import {
    Card,
    Button
} from 'primereact';

const AdvancedCard = () => {
    return (
        <Card header={<img src="placeholder.png" alt="Card header" style={{ width: '100%' }} />} title="Advanced Card Title" subTitle="Card Subtitle">
            <p className="line-height-3 m-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <div className="flex justify-content-end mt-4">
                <Button label="Learn More" />
            </div>
        </Card>
    );
};

export default AdvancedCard;
```

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

### Dynamically Update Primary Color Palette (JavaScript)

Source: https://v11.primereact.org/docs/theming/styled

No description

```javascript
import { updatePreset } from 'primereact/api';

// Change the primary color palette dynamically
updatePreset({
    primary: {
        50: '#f0f9ff',
        100: '#d6ebff',
        200: '#a8d5ff',
        300: '#7bc0ff',
        400: '#4daeff',
        500: '#2298ff',
        600: '#1b7fcc',
        700: '#146699',
        800: '#0d4d66',
        900: '#063333',
        950: '#001a00'
    }
});

```

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

### InputOtp Basic Usage

Source: https://v11.primereact.org/docs/components/inputotp

Demonstrates the fundamental usage of the InputOtp component, which requires an InputOtp.Text component for displaying input fields.

```jsx
import React from 'react';
import { InputOtp } from 'primereact/inputotp';

export default function InputOtpDemo() {
    
    return (
        <div className="card">
            <InputOtp />
        </div>
    )
}
```

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

### PrimeReact Dialog Basic Usage

Source: https://v11.primereact.org/docs/components/dialog

Demonstrates the fundamental structure of a PrimeReact Dialog using its core components: Dialog, Dialog.Trigger, Dialog.Portal, Dialog.Header, Dialog.Content, and Dialog.Footer.

```jsx
import React from 'react';
import {
    Dialog,
    DialogTrigger,
    DialogPortal,
    DialogHeader,
    DialogContent,
    DialogFooter
} from 'primereact/dialog';

function DialogDemo() {
    return (
        <Dialog>
            <DialogTrigger asChild>
                <button>Show</button>
            </DialogTrigger>
            <DialogPortal>
                <DialogHeader>Dialog Header</DialogHeader>
                <DialogContent>
                    Dialog Content
                </DialogContent>
                <DialogFooter>
                    <button>Cancel</button>
                    <button>Save</button>
                </DialogFooter>
            </DialogPortal>
        </Dialog>
    );
}
```

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

### Disabled ToggleButton Example

Source: https://v11.primereact.org/docs/components/togglebutton

Shows how to disable the ToggleButton using the 'disabled' prop, preventing user interaction and focus.

```jsx
import React, { useState } from 'react';
import { ToggleButton } from 'primereact/togglebutton';

export default function App() {
    const [checked, setChecked] = useState(false);

    return (
        <div className="card flex justify-content-center">
            <ToggleButton disabled checked={checked} onChange={(e) => setChecked(e.value)} />
        </div>
    );
}
```

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

### Stepper Component API

Source: https://v11.primereact.org/docs/components/stepper/api

Documentation for the Stepper component, including its props, state, and exposed methods.

```APIDOC
## Stepper API

API documentation for Stepper component

### Props

Defines valid properties in Stepper component.

| name | type | default | description |
|---|---|---|---|
| ref | Ref<unknown> | null | The reference to the component instance. |
| pIf | boolean | true | Whether the component should be rendered. |
| style | CSSProperties | ((instance?: StepperInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: StepperInstance) => string) | null | The class name to apply to the component. |
| as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
| asChild | boolean | false | Whether the component should be rendered as a child component. |
| pt | SafeRecord<StepperPassThrough> | null | The pass-through props to pass to the component |
| ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
| unstyled | boolean | null | Whether the component should be rendered without classes. |
| dt | unknown | null | The design token to use for the component. |
| styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
| children | ReactNode | ((instance: StepperInstance) => ReactNode) | null | The children to render. |
| defaultValue | string | number | null | Default value of the active step. |
| value | string | number | null | Value of the active step. |
| linear | boolean | false | Whether the steps are clickable or not. |
| onValueChange | (event: useStepperChangeEvent) => void | null | Callback fired when the stepper's value changes. |
| [key: string] | any | null |  |
| pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |

### State

Defines valid state in Stepper component.

| name | type | default | description |
|---|---|---|---|
| value | string | number | null | Value of the active step. |

### Exposes

Defines the methods and properties exposed by Stepper component.

| name | type | default | description |
|---|---|---|---|
| state | useStepperState | null | The state of the useStepper. |
| setActiveStep | (value: string | number) => void | null | The method to update the value of the active step. |
| isStepActive | (value: string | number) => boolean | null | The method to check if the step is active. |
| isStepDisabled | () => boolean | null | The method to check if the step is disabled. |

### Interfaces

#### PassThroughOptions

Defines passthrough(pt) options of Stepper component.

| name | type | default | description |
|---|---|---|---|
| root | StepperPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the root's DOM element. |
| list | StepperPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the list's DOM element. |
| step | StepperPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the step's DOM element. |
| header | StepperPassThroughType<HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the header's DOM element. |
| number | StepperPassThroughType<HTMLAttributes<HTMLSpanElement>> | null | Used to pass attributes to the number's DOM element. |
| title | StepperPassThroughType<HTMLAttributes<HTMLSpanElement>> | null | Used to pass attributes to the title's DOM element. |
| separator | StepperPassThroughType<HTMLAttributes<HTMLSpanElement>> | null | Used to pass attributes to the separator's DOM element. |
| panels | StepperPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the panels's DOM element. |
| panel | StepperPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the panel's DOM element. |
| item | StepperPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the item's DOM element. |
| content | StepperPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the content's DOM element. |

### Types

#### Instance

Instance of Stepper component.

**values**

ComponentInstance<StepperProps, StepperState, StepperExposes>
```

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

### Knob Component API

Source: https://v11.primereact.org/docs/components/knob/api

Detailed API documentation for the Knob component, including props, state, and exposed methods.

```APIDOC
## Knob Component API

### Description
API documentation for the Knob component, detailing its configurable properties, internal state, and exposed methods.

### Props
Defines valid properties that can be passed to the Knob component.

| Name            | Type                                                                                                                                                                                                      | Default     | Description                                                                                                                                                                |
|-----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| ref             | Ref <unknown>                                                                                                                                                                                             | null        | The reference to the component instance.                                                                                                                                   |
| pIf             | boolean                                                                                                                                                                                                   | true        | Whether the component should be rendered.                                                                                                                                  |
| style           | CSSProperties | ((instance?: KnobInstance) => CSSProperties)                                                                                                                                           | null        | The style to apply to the component.                                                                                                                                       |
| className       | string | ((instance?: KnobInstance) => string)                                                                                                                                                         | null        | The class name to apply to the component.                                                                                                                                  |
| as              | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null        | The component type to render.                                                                                                                                              |
| asChild         | boolean                                                                                                                                                                                                   | false       | Whether the component should be rendered as a child component.                                                                                                             |
| pt              | SafeRecord <KnobPassThrough>                                                                                                                                                                              | null        | The pass-through props to pass to the component.                                                                                                                           |
| ptOptions       | PassThroughOptions                                                                                                                                                                                        | null        | The pass-through options to pass to the component.                                                                                                                       |
| unstyled        | boolean                                                                                                                                                                                                   | null        | Whether the component should be rendered without classes.                                                                                                                  |
| dt              | unknown                                                                                                                                                                                                   | null        | The design token to use for the component.                                                                                                                                 |
| styles          | StylesOptions <ComponentInstance>                                                                                                                                                                       | null        | The styles to use for the component.                                                                                                                                     |
| children        | ReactNode | ((instance: KnobInstance) => ReactNode)                                                                                                                                                    | null        | The children to render.                                                                                                                                                    |
| tabindex        | number                                                                                                                                                                                                    | 0           | Index of the element in tabbing order.                                                                                                                                     |
| invalid         | boolean                                                                                                                                                                                                   | false       | When present, it specifies that the component should have invalid state style.                                                                                            |
| ariaLabelledby  | string                                                                                                                                                                                                    | null        | Establishes relationships between the component and label(s) where its value should be one or more element IDs.                                                          |
| ariaLabel       | string                                                                                                                                                                                                    | null        | Used to define a string that labels the element.                                                                                                                           |
| onValueChange   | (event: KnobChangeEvent) => void                                                                                                                                                                          | null        | Callback fired when the knob's value changes.                                                                                                                             |
| defaultValue    | number                                                                                                                                                                                                    | undefined   | Value of the knob.                                                                                                                                                         |
| value           | number                                                                                                                                                                                                    | undefined   | The default value of the knob.                                                                                                                                             |
| size            | number                                                                                                                                                                                                    | 100         | Size of the component in pixels.                                                                                                                                           |
| step            | number                                                                                                                                                                                                    | 1           | Step factor to increment/decrement the value.                                                                                                                              |
| min             | number                                                                                                                                                                                                    | 0           | Minimum boundary value.                                                                                                                                                    |
| max             | number                                                                                                                                                                                                    | 100         | Maximum boundary value.                                                                                                                                                    |
| readOnly        | boolean                                                                                                                                                                                                   | false       | When present, it specifies that the component value cannot be edited.                                                                                                      |
| disabled        | boolean                                                                                                                                                                                                   | false       | When present, it specifies that the component should be disabled.                                                                                                          |
| [key: string]   | any                                                                                                                                                                                                       | null        |                                                                                                                                                                            |
| pt-{optionName}-* | -                                                                                                                                                                                                         | null        | Pass through attributes for customizing component. For more info, see Pass Through tab.                                                                                    |

### State
Defines the valid states managed by the Knob component.

| Name  | Type   | Default | Description         |
|-------|--------|---------|---------------------|
| value | number | null    | The value of the knob. |

### Exposes
Defines the methods and properties exposed by the Knob component.

| Name         | Type                 | Default | Description                                                                                                                                                                  |
|--------------|----------------------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| state        | useKnobState         | null    | The state of the useKnob.                                                                                                                                                    |
| rangePath    | string               | null    | The path string for the range arc of the knob.                                                                                                                               |
| valuePath    | string               | null    | The path string for the value arc of the knob.                                                                                                                               |
| onClick      | (event: MouseEvent) => void | null    | Callback fired when the knob is clicked.                                                                                                                                   |
| onMouseDown  | (event: MouseEvent) => void | null    | Callback fired when mouse down occurs on the knob.                                                                                                                           |
| onMouseUp    | () => void           | null    | Callback fired when mouse up occurs.                                                                                                                                         |
| onTouchStart | () => void           | null    | Callback fired when touch starts on the knob.                                                                                                                                |
| onTouchEnd   | () => void           | null    | Callback fired when touch ends.                                                                                                                                              |
| onMouseMove  | (event: MouseEvent) => void | null    | Callback fired when mouse moves while dragging the knob.                                                                                                                     |
| onTouchMove  | (event: TouchEvent) => void | null    | Callback fired when touch moves while dragging the knob.                                                                                                                     |
| onKeyDown    | (event: KeyboardEvent) => void | null    | Callback fired when a key is pressed while the knob is focused.                                                                                                              |

### Events
#### KnobChangeEvent
Event fired when the knob's value changes.

| Name  | Type   | Description         |
|-------|--------|---------------------|
| value | number | The value of the knob. |

### Interfaces
(No specific interfaces detailed in the provided text for the Knob component.)
```

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

### PrimeReact Stepper Vertical Usage

Source: https://v11.primereact.org/docs/components/stepper

Illustrates the setup for a vertical Stepper, utilizing Stepper.Item, Stepper.Step, and Stepper.Panel components.

```jsx
import {{ Stepper }} from 'primereact/stepper';
import {{ StepperPanel }} from 'primereact/stepperpanel';

function VerticalStepper() {
    return (
        <Stepper orientation="vertical" linear={false}>
            <Stepper.List>
                <Stepper.Item header="Header I"></Stepper.Item>
                <Stepper.Item header="Header II"></Stepper.Item>
                <Stepper.Item header="Header III"></Stepper.Item>
            </Stepper.List>
            <Stepper.Panels>
                <StepperPanel header="Content I">
                    <div className="flex flex-column h-full">
                        Content I
                    </div>
                </StepperPanel>
                <StepperPanel header="Content II">
                    <div className="flex flex-column h-full">
                        Content II
                    </div>
                </StepperPanel>
                <StepperPanel header="Content III">
                    <div className="flex flex-column h-full">
                        Content III
                    </div>
                </StepperPanel>
            </Stepper.Panels>
        </Stepper>
    );
}
```

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

### PrimeReact Button: Basic Usage

Source: https://v11.primereact.org/button

Demonstrates the fundamental usage of the PrimeReact Button component.

```jsx
import React from 'react';
import { Button } from 'primereact/button';

function BasicDemo() {
    return (
        <div className="card flex justify-content-center">
            <Button label="Submit" />
        </div>
    )
}
```

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

### PrimeReact useKeyFilter Regex Example (Block Space)

Source: https://v11.primereact.org/docs/hooks/usekeyfilter

Shows how to use the useKeyFilter hook with a custom regular expression to block the space character.

```javascript
import { useKeyFilter } from 'primereact/keyfilter';

function MyComponent() {
    const blockSpaceFilter = useKeyFilter({ pattern: '/[^s]/' });

    return (
        <input type="text" {...blockSpaceFilter} placeholder="No spaces allowed" />
    );
}
```

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

### PrimeReact Terminal Component

Source: https://v11.primereact.org/llms

Documentation for the PrimeReact Terminal component, providing a command-line interface experience within a web application.

```javascript
import React from 'react';
import { Terminal } from 'primereact/terminal';
import { useGet } from './useGet';

export default function BasicDemo() {
    const commands = useGet();

    return (
        <div className="card">
            <Terminal commands={commands} />
        </div>
    )
}

// Mock useGet hook for demonstration
function useGet() {
    return {
        show: {
            label: 'Open Weather Map',
            icon: 'pi pi-external-link',
            command: () => window.open('https://openweathermap.org/')
        },
        hello: {
            label: 'Hello World',
            icon: 'pi pi-info-circle',
            command: () => console.log('Hello World!')
        }
    };
}
```

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

### useBadge Hook API

Source: https://v11.primereact.org/docs/components/badge/api

Documentation for the useBadge hook, detailing its instance type for headless UI usage.

```APIDOC
## useBadge Hook

### Description
API for the useBadge headless hook.

### Types
#### Instance
Instance of useBadge headless.

| values |
|---|---|
| HeadlessInstance<useBadgeProps, useBadgeState, useBadgeExposes> |
```

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

### Controlled ToggleButton Example

Source: https://v11.primereact.org/docs/components/togglebutton

Shows how to manage the state of the ToggleButton externally using the 'pressed' and 'onPressedChange' props. This is useful for integrating with form management.

```jsx
import React, { useState } from 'react';
import { ToggleButton } from 'primereact/togglebutton';

export default function App() {
    const [pressed, setPressed] = useState(true);

    return (
        <div className="card flex justify-content-center">
            <ToggleButton pressed={pressed} onChange={(e) => setPressed(e.value)} />
        </div>
    );
}
```

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

### Vertical Divider Configuration

Source: https://v11.primereact.org/docs/components/divider

Configure a divider to be displayed vertically by setting the `orientation` property to 'vertical'. This is a basic setup for a vertical separator.

```jsx
import React from 'react';
import { Divider } from 'primereact/divider';

const DividerVerticalDemo = () => {
    return (
        <div>
            <div className="text-center">
                <div className="mb-3 font-bold">Content</div>
                <Divider type="dashed" />
                <p className="m-0">Content</p>
                <Divider layout="vertical" />
            </div>
        </div>
    );
}
```
Tokens:
Raw