Getting Started


This documentation contains information about the Makerkit UI components Reference API. The Makerkit UI components Reference API is a collection of React components that can be used to build Makerkit UI components.

The large part of the Makerkit UI components Reference API is based on the [Shadcn UI](https://ui.shadcn.com/) library. This library is itself based on [Radix UI](https://www.radix-ui.com/).

The components listed here are available in all the Makerkit SaaS Kits, and the differences should be minimal. With that said, you may still encounter some differences in the components' behavior and appearance, or import paths, and default/non-default exports.

This Reference API is a work in progress. We will be adding more components and examples over time.

Currently, the components are separated into the following categories:
- Forms
- Information
- Navigation
- Utility

## Forms

Forms are used to collect user input. They are made up of form elements such as text inputs, checkboxes, radio buttons, and more.

### Information

Information components are used to display information to the user. They are made up of elements such as headings, tables, alerts, and more.

### Navigation

Navigation components are used to help users navigate through a website or application. They are made up of elements such as menus, breadcrumbs, tabs, and more.

### Utility

Utility components are used to perform specific tasks. They are made up of elements such structural components, spinners, and more.

The Makerkit UI components Reference API documentation. Learn how to use the Makerkit UI components Reference API and view usage examples and API reference documentation.

The Makerkit UI components Reference API

This section describes the form elements of the Makerkit UI.

Forms


The Label component is a simple styled wrapper around the native HTML label element.

## Usage

Use the Label component to wrap a form input element. The `htmlFor` prop is used to associate the label with the input element.

```tsx
import { Label } from '~/core/ui/Label';

const MyComponent = () => (
  <Label htmlFor="my-input">My Label</Label>
);
```

<DemoContainer>
  <div>
    <Label>My Label</Label>
  </div>
</DemoContainer>

The Label component is a simple styled wrapper around the native HTML label element.

Label


The `TextField` component is a wrapper around the native `input` element. It provides a consistent styling and layout for text-based inputs. It can be combined with the `Label` and `Hint` components to create a complete form field.

### Basic TextField

The simplest usage of the `TextField` component is to use it as a wrapper around the native `input` element.

```tsx
import { TextFieldInput } from '~/core/ui/TextField';

<TextFieldInput
  placeholder="Enter your name"
/>
```

<DemoContainer>
  <TextField.Input
    className='max-w-sm'
    placeholder="Enter your name"
  />
</DemoContainer>

### TextField with Label

You can wrap the `TextFieldInput` component with the `TextFieldLabel` component to create a form field with a label.

```tsx
import { TextFieldInput, TextFieldLabel } from '~/core/ui/TextField';

<TextFieldLabel>
  Name
  <TextFieldInput
    placeholder="Enter your name"
  />
</TextFieldLabel>
```

<DemoContainer>
  <TextField.Label className='max-w-sm'>
    Name
    <TextField.Input
      placeholder="Enter your name"
    />
  </TextField.Label>
</DemoContainer>

### TextField with Label and Hint

You can add a hint to the `TextFieldLabel` component to provide additional information to the user.

```tsx
import { 
  TextFieldInput, 
  TextFieldLabel, 
  TextFieldHint 
} from '~/core/ui/TextField';

<TextFieldLabel>
  Name
  <TextFieldInput
    placeholder="Enter your name"
  />

  <TextFieldHint> 
    This is a hint
  </TextFieldHint>
</TextFieldLabel>
```

<DemoContainer>
  <TextField.Label className='max-w-sm'>
    Name
    <TextField.Input
      placeholder="Enter your name"
    />

    <TextField.Hint>
      This is a hint
    </TextField.Hint>
  </TextField.Label>
</DemoContainer>

Text field input for forms. Collect text-based data from users

Input Fields


The `Textarea` component is a wrapper around the native `textarea` element. It provides a consistent styling and layout for text-based inputs. It can be combined with the `Label` and `Hint` components from the `TextField` component to create a complete form field.

### Basic Textarea

The simplest usage of the `Textarea` component is to use it as a wrapper around the native `textarea` element.

```tsx
import { Textarea } from '~/core/ui/Textarea';

<Textarea
  className='max-w-sm h-36'
  placeholder="Describe yourself in 100 words or less."
/>
```

<DemoContainer>
  <Textarea
    className='max-w-sm h-36'
    placeholder="Describe yourself in 100 words or less."
  />
</DemoContainer>

### Textarea with Label

You can wrap the `Textarea` component with the `Textarea` component to create a form field with a label.

```tsx
import { Textarea } from '~/core/ui/Textarea';
import { TextFieldLabel } from '~/core/ui/TextField';

<TextFieldLabel>
  Who are you?
  <Textarea
    placeholder="Describe yourself in 100 words or less."
  />
</TextFieldLabel>
```

<DemoContainer>
  <TextField.Label className='max-w-sm'>
    Who are you?
    <Textarea
      className='h-36'
      placeholder="Describe yourself in 100 words or less."
    />
  </TextField.Label>
</DemoContainer>

### TextField with Label and Hint

You can add a hint to the `TextFieldLabel` component to provide additional information to the user.

```tsx
import { 
  TextFieldLabel, 
  TextFieldHint 
} from '~/core/ui/TextField';

import { Textarea } from '~/core/ui/Textarea';

<TextFieldLabel>
  Who are you?
  <Textarea
    className='h-36'
    placeholder="Describe yourself in 100 words or less."
  />

  <TextFieldHint> 
    This is a hint
  </TextFieldHint>
</TextFieldLabel>
```

<DemoContainer>
  <TextField.Label className='max-w-sm'>
    Who are you?
    <Textarea
      className='h-36'
      placeholder="Describe yourself in 100 words or less."
    />

    <TextField.Hint>
      Please provide details about yourself.
    </TextField.Hint>
  </TextField.Label>
</DemoContainer>

Textarea fields are used to collect large amounts of text from users.

Textarea Fields


The `Select` field is used to create a drop-down list of options for the user to choose from. This component is built on top of the [Radix UI](https://radix-ui.com) library and styled using [Tailwind CSS](https://tailwindcss.com).

This component comes from the [Shadcn UI Library](https://ui.shadcn.com) - with minimal changes to the original component. I recommended to check out the original documentation for more information.

```tsx
import { 
  Select, 
  SelectTrigger, 
  SelectValue,
  SelectContent,
  SelectLabel,
  SelectGroup,
  SelectItem
} from '~/core/ui/Select';

<Select>
  <SelectTrigger>
    <SelectValue placeholder={'Pick a fruit...'} />
  </SelectTrigger>

  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>

      <SelectItem value={'Apple'}>Apple</SelectItem>
      <SelectItem value={'Banana'}>Banana</SelectItem>
      <SelectItem value={'Peach'}>Peach</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>
```

<DemoContainer>
  <div className='w-full max-w-xs'>
    <Select.Select>
      <Select.SelectTrigger>
        <Select.SelectValue placeholder={'Pick a fruit...'} />
      </Select.SelectTrigger>

      <Select.SelectContent>
        <Select.SelectGroup>
          <Select.SelectLabel>Fruits</Select.SelectLabel>

          <Select.SelectItem value={'Apple'}>Apple</Select.SelectItem>
          <Select.SelectItem value={'Banana'}>Banana</Select.SelectItem>
          <Select.SelectItem value={'Peach'}>Peach</Select.SelectItem>
        </Select.SelectGroup>
      </Select.SelectContent>
    </Select.Select>
  </div>
</DemoContainer>

### API

The complete API documentation for the `Select` component is available [on the Shadcn UI documentation](https://ui.shadcn.com/docs/components/select).

Select fields are used to create a drop-down list of options for the user to choose from.

Select Fields


The `Radio Group` field is used to create a drop-down list of options for the user to choose from. This component is built on top of the [Radix UI](https://radix-ui.com) library and styled using [Tailwind CSS](https://tailwindcss.com).

This component comes from the [Shadcn UI Library](https://ui.shadcn.com) - with minimal changes to the original component. I recommended to check out the original documentation for more information.

### Basic Radio Group

The below shows a basic Radio Group as provided by the Shadcn UI library.

```tsx
import { 
  RadioGroup,
  RadioGroupItem
} from '~/core/ui/RadioGroup';

import { Label } from '~/core/ui/Label';

<RadioGroup>
  <div className="flex items-center space-x-2">
    <RadioGroupItem id="r1" value={'Apple'} />
    <Label htmlFor="r1">Apple</Label>
  </div>

  <div className="flex items-center space-x-2">
    <RadioGroupItem id="r2" value={'Banana'} />
    <Label htmlFor="r2">Banana</Label>
  </div>

  <div className="flex items-center space-x-2">
    <RadioGroupItem id="r3" value={'Peach'} />
    <Label htmlFor="r3">Peach</Label>
  </div>
</RadioGroup>
```

<DemoContainer>
  <div className='p-4'>
    <RadioGroup.RadioGroup>
      <div className="flex items-center space-x-2">
        <RadioGroup.RadioGroupItem id="r1" value={'Apple'} />
        <Label htmlFor="r1">Apple</Label>
      </div>

      <div className="flex items-center space-x-2">
        <RadioGroup.RadioGroupItem id="r2" value={'Banana'} />
        <Label htmlFor="r2">Banana</Label>
      </div>

      <div className="flex items-center space-x-2">
        <RadioGroup.RadioGroupItem id="r3" value={'Peach'} />
        <Label htmlFor="r3">Peach</Label>
      </div>
    </RadioGroup.RadioGroup>
  </div>
</DemoContainer>

### Radio Group with labels

The below shows a Radio Group with a Label component for each option. This component is provided by Makerkit.

```tsx
import { 
  RadioGroup,
  RadioGroupItem,
  RadioGroupItemLabel
} from '~/core/ui/RadioGroup';

<RadioGroup className='max-w-xs w-full'>
  <RadioGroupItemLabel>
    <RadioGroupItem value={'Apple'} />
    Apple
  </RadioGroupItemLabel>

  <RadioGroupItemLabel>
    <RadioGroupItem value={'Banana'} />
    Banana
  </RadioGroupItemLabel>

  <RadioGroupItemLabel>
    <RadioGroupItem value={'Peach'} />
    Peach
  </RadioGroupItemLabel>
</RadioGroup>
```

<DemoContainer>
  <RadioGroup.RadioGroup className='max-w-xs w-full'>
    <RadioGroup.RadioGroupItemLabel>
      <RadioGroup.RadioGroupItem value={'Apple'} />
      Apple
    </RadioGroup.RadioGroupItemLabel>

    <RadioGroup.RadioGroupItemLabel>
      <RadioGroup.RadioGroupItem value={'Banana'} />
      Banana
    </RadioGroup.RadioGroupItemLabel>

    <RadioGroup.RadioGroupItemLabel>
      <RadioGroup.RadioGroupItem value={'Peach'} />
      Peach
    </RadioGroup.RadioGroupItemLabel>
  </RadioGroup.RadioGroup>
</DemoContainer>

### Radio Group with labels and descriptions

The below shows a Radio Group with a Label component for each option with a description. This component is provided by Makerkit.

```tsx
import { 
  RadioGroup,
  RadioGroupItem,
  RadioGroupItemLabel
} from '~/core/ui/RadioGroup';

<RadioGroup className='max-w-xs w-full'>
  <RadioGroupItemLabel>
    <RadioGroupItem value={'Free'} />

    <div>
      <h3 className='font-semibold'>Free Plan</h3>

      <p className='text-xs'>
        Free forever. No credit card needed.
      </p>
    </div>
  </RadioGroupItemLabel>

  <RadioGroupItemLabel>
    <RadioGroupItem value={'Basic'} />

    <div>
      <h3 className='font-semibold'>Basic Plan</h3>

      <p className='text-xs'>
        $10 per month. Up to 10 users. 100GB storage.
      </p>
    </div>
  </RadioGroupItemLabel>

  <RadioGroupItemLabel>
    <RadioGroupItem value={'Enterprise'} />
    
    <div>
      <h3 className='font-semibold'>Enterprise Plan</h3>

      <p className='text-xs'>
        $99 per month. Unlimited 10 users. 5TB storage.
      </p>
    </div>
  </RadioGroupItemLabel>
</RadioGroup>
```

<DemoContainer>
  <RadioGroup.RadioGroup className='max-w-xs w-full'>
    <RadioGroup.RadioGroupItemLabel>
      <RadioGroup.RadioGroupItem value={'Free Plan'} />

      <div>
        <h3 className='font-semibold'>Free Plan</h3>

        <p className='text-xs'>
          Free forever. No credit card needed.
        </p>
      </div>
    </RadioGroup.RadioGroupItemLabel>

    <RadioGroup.RadioGroupItemLabel>
      <RadioGroup.RadioGroupItem value={'Basic Plan'} />
      <div>
        <h3 className='font-semibold'>Basic Plan</h3>

        <p className='text-xs'>
          $10 per month. Up to 10 users. 100GB storage.
        </p>
      </div>
    </RadioGroup.RadioGroupItemLabel>

    <RadioGroup.RadioGroupItemLabel>
      <RadioGroup.RadioGroupItem value={'Enterprise Plan'} />
      <div>
        <h3 className='font-semibold'>Enterprise Plan</h3>

        <p className='text-xs'>
          $99 per month. Unlimited 10 users. 5TB storage.
        </p>
      </div>
    </RadioGroup.RadioGroupItemLabel>
  </RadioGroup.RadioGroup>
</DemoContainer>

### API

The complete API documentation for the `RadioGroup` component is available [on the Shadcn UI documentation](https://ui.shadcn.com/docs/components/radio-group).

Radio Group for selecting one of many options.

Radio Group


The Button component is a simple styled wrapper around the native HTML button element.

## Basic Usage

By default - the Button component will render a primary button with a solid background color. This is the same as setting the `variant` prop to `primary`.

```tsx
import { Button } from '~/core/ui/Button';

<Button>
  Click Me
</Button>
```

<DemoContainer>
  <Button>
    Click Me
  </Button>
</DemoContainer>

## Button Variants

The Button component has a number of variants that can be used to change the appearance of the button.

### Secondary

Use the `secondary` variant to render a button with a secondary background color.

```tsx
import { Button } from '~/core/ui/Button';

<Button variant="secondary">
  Click Me
</Button>
```

<DemoContainer>
  <Button variant="secondary">
    Click Me
  </Button>
</DemoContainer>

### Ghost

Use the `ghost` variant to render a button with a transparent background and a border.

```tsx
import { Button } from '~/core/ui/Button';

<Button variant="ghost">
  Click Me
</Button>
```

<DemoContainer>
  <Button variant="ghost">
    Click Me
  </Button>
</DemoContainer>

### Outline

Use the `outline` variant to render a button with a transparent background and a border.

```tsx
import { Button } from '~/core/ui/Button';

<Button variant="outline">
  Click Me
</Button>
```

<DemoContainer>
  <Button variant="outline">
    Click Me
  </Button>
</DemoContainer>

### Outline Primary

Use the `outlinePrimary` variant to render a button with a transparent background and a border with the primary color.

```tsx
import { Button } from '~/core/ui/Button';

<Button variant="outlinePrimary">
  Click Me
</Button>
```

<DemoContainer>
  <Button variant="outlinePrimary">
    Click Me
  </Button>
</DemoContainer>

### Link

Use the `link` variant to render a button that looks like a link.

```tsx
import { Button } from '~/core/ui/Button';

<Button variant="link">
  Click Me
</Button>
```

<DemoContainer>
  <Button variant="link">
    Click Me
  </Button>
</DemoContainer>

### Destructive

Use the `destructive` variant to render a button with a destructive color.

```tsx
import { Button } from '~/core/ui/Button';

<Button variant="destructive">
  Click Me
</Button>
```

<DemoContainer>
  <Button variant="destructive">
    Click Me
  </Button>
</DemoContainer>

The Button component is a simple styled wrapper around the native HTML button element.

Button Component


The Card Button component is a simple styled wrapper around the native HTML button element.

## Basic Usage

By default - the Button component will render a primary button with a solid background color. This is the same as setting the `variant` prop to `primary`.

```tsx
import { CardButton } from '~/core/ui/CardButton';

<CardButton>
  Click Me
</CardButton>
```

<DemoContainer>
  <CardButton>
    Click Me
  </CardButton>
</DemoContainer>

The Card Button component is a simple styled wrapper around the native HTML button element.

Card Button Component


The Icon Button component is a simple styled wrapper around the native HTML button element that is used to trigger an action.

```tsx
import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
import { IconButton } from '~/core/ui/IconButton';

<IconButton>
  <EllipsisVerticalIcon className='h-5' />
</IconButton>
```

<DemoContainer>
  <IconButton>
    <Icons.EllipsisVerticalIcon className='h-5' />
  </IconButton>
</DemoContainer>

The Icon Button component is a simple styled wrapper around the native HTML button element.

Icon Button Component


Use the `Checkbox` component to render a checkbox input:

```tsx
import { Checkbox } from '~/core/ui/Checkbox';
import { Label } from '~/core/ui/Label';

<div className="flex flex-col space-y-4">
  <Label className='flex space-x-2 items-center'>
    <Checkbox />

    Remember Me
  </Label>

  <Label className='flex space-x-2 items-center'>
    <Checkbox />

    I accept the terms and conditions
  </Label>
</div>
```

<DemoContainer>
  <div className="flex flex-col space-y-2">
    <Label className='flex space-x-2 items-center'>
      <Checkbox />

      Remember Me
    </Label>

    <Label className='flex space-x-2 items-center'>
      <Checkbox />

      I accept the terms and conditions
    </Label>
  </div>
</DemoContainer>

The Checkbox component is a simple wrapper around the HTML input[checkbox] element.

Checkbox Component


Use the `ImageUploadInput` component to render a checkbox input:

```tsx
import { ImageUploadInput } from '~/core/ui/ImageUploadInput';
import { Label } from '~/core/ui/Label';

<Label>
  Avatar
  <ImageUploadInput>
    Load an image from your computer
  </ImageUploadInput>
</Label>
```

<DemoContainer contentStyle={{ padding: '1em' }}>
  <Label>
    Avatar
    <ImageUploadInput>
      Load an image from your computer
    </ImageUploadInput>
  </Label>
</DemoContainer>

### Props

The component, in addition to all the properties of the HTML `input` element, accepts the following props:

1. `image` - an initial image to display in the component (the URL of the image)
2. `onClear` - a callback function to be called when the user clicks the clear button

The Image Upload component is an input field to to upload images

Image Upload Component

Information


The Alert component is used to display a message to the user - and can be used to display an info, success, warning or error messages.

The default type, if none is specified, is `info`.

## Basic Usage

```tsx
import { Alert } from '~/core/ui/Alert';

<Alert> 
  This is an info message. 
</Alert>
```

<DemoContainer>
  <div className="w-full max-w-sm">
    <Alert>
      This is an info message.
    </Alert>
  </div>
</DemoContainer>

You can also specify a title for the alert:

```tsx
import { Alert, AlertHeading } from '~/core/ui/Alert';

<Alert>
  <AlertHeading>Alert Title</AlertHeading>
  This is an info message.
</Alert>
```

<DemoContainer>
  <div className="w-full max-w-sm">
    <Alert>
      <Alert.Heading>Alert Title</Alert.Heading>
      This is an info message.
    </Alert>
  </div>
</DemoContainer>

## Success

The `success` type can be used to display a success message:

```tsx
import { Alert, AlertHeading } from '~/core/ui/Alert';

<Alert type="success"> 
  <AlertHeading>Congrats!</AlertHeading>
  You have successfully completed this task.
</Alert>
```

<DemoContainer>
  <div className="w-full max-w-sm">
    <Alert type="success">
      <Alert.Heading>Congrats!</Alert.Heading>
      You have successfully completed this task.
    </Alert>
  </div>
</DemoContainer>

## Warning

The `warn` type can be used to display a warning message:

```tsx
import { Alert, AlertHeading } from '~/core/ui/Alert';

<Alert type="warn"> 
  <AlertHeading>Careful!</AlertHeading>
  You may want to double-check this before proceeding.
</Alert>
```

<DemoContainer>
  <div className="w-full max-w-sm">
    <Alert type="warn">
      <Alert.Heading>Careful!</Alert.Heading>
      You may want to double-check this before proceeding.
    </Alert>
  </div>
</DemoContainer>

## Error

The `error` type can be used to display an error message:

```tsx
import { Alert, AlertHeading } from '~/core/ui/Alert';

<Alert type="error"> 
  <AlertHeading>We hit an error</AlertHeading>
  
  <p>
    We are sorry, but we hit an error while processing your request. 
    Please try again later.
  </p>
</Alert>
```

<DemoContainer>
  <div className="w-full max-w-sm">
    <Alert type="error">
      <Alert.Heading>We hit an error</Alert.Heading>

      <p>
        We are sorry, but we hit an error while processing your request.
        Please try again later.
      </p>
    </Alert>
  </div>
</DemoContainer>

The Alert component is used to display a message to the user.

Alert Component - Display a message to the user


The `Badge` component is used to display a small amount of information to the user. It can be used to display a count of items or a status. The default type is `default` but it can also be `success`, `warning` or `error`.

```tsx
import { Badge } from '~/core/ui/Badge';

<Badge>
  User
</Badge>
```

<DemoContainer>
  <Badge>
    User
  </Badge>
</DemoContainer>

You can also set a smaller size by using the `size` prop.

```tsx
import { Badge } from '~/core/ui/Badge';

<Badge size='sm'>
  User
</Badge>
```

<DemoContainer>
  <Badge size='small'>
    User
  </Badge>
</DemoContainer>

Alternatively, provide a fully custom `Badge` using the `size`, `color` and `className` props.

```tsx
import { Badge } from '~/core/ui/Badge';

<Badge 
  size='custom' 
  color='custom' 
  className='py-2 px-4 rounded-sm  border'
>
  User
</Badge>
```

<DemoContainer>
  <Badge
    size='custom'
    color='custom'
    className='py-2 px-4 rounded-sm  border'
  >
    User
  </Badge>
</DemoContainer>

## Success

Create a success badge by using the `color` prop.

```tsx
import { Badge } from '~/core/ui/Badge';

<Badge color='success'>
  Success
</Badge>
```

<DemoContainer>
  <Badge color='success'>
    Success
  </Badge>
</DemoContainer>

Use an Icon next to the text:

```tsx
import { CheckIcon } from '@heroicons/react/24/outline';
import { Badge } from '~/core/ui/Badge';

<Badge size='small' color='success'>
  <CheckIcon className='h-3'>
  Success
</Badge>
```

<DemoContainer>
  <Badge size='small' color='success'>
    <Icons.CheckIcon className='h-3 mr-0' />
    Success
  </Badge>
</DemoContainer>

## Error

Create an errror badge by using the `color` prop.

```tsx
import { Badge } from '~/core/ui/Badge';

<Badge color='error'>
  Error
</Badge>
```

<DemoContainer>
  <Badge color='error'>
    Error
  </Badge>
</DemoContainer>

Use an Icon next to the text:

```tsx
import { CheckIcon } from '@heroicons/react/24/outline';
import { Badge } from '~/core/ui/Badge';

<Badge size='small' color='error'>
  <CheckIcon className='h-3'>
  Error
</Badge>
```

<DemoContainer>
  <Badge size='small' color='error'>
    <Icons.XMarkIcon className='h-3 mr-0' />
    Error
  </Badge>
</DemoContainer>


The Badge component is used to display a small amount of information to the user.

Badge Component - Display a small amount of information to the user


The `Modal` component is a wrapper around the `Dialog` component - as in it uses some common defaults and provides a few extra props to make it easier to use. For maximum flexibility, you can use the `Dialog` component directly.

## Basic Usage

You can pass any content to the `Modal` component. The `Modal` component will take care of the rest. To trigger the modal you have two options:

1. Pass a `Trigger` prop to the `Modal` component. This will render the trigger component and handle the click event to open the modal.
2. Use the `open/setOpen` props to control the modal state yourself.

### Trigger

Below, we pass the `Trigger` prop to the `Modal` component. This will render the trigger component and handle the click event to open the modal.

```tsx
import { Modal } from '~/core/ui/Modal';
import { Button } from '~/core/ui/Button';

<Modal
  heading='Modal'
  Trigger={<Button variant='outline'>Click me</Button>}
>
  <div className='flex flex-col space-y-4'>
    <p>Are you sure you want to continue?</p>

    <div className='flex justify-end'>
      <Button variant='destructive'>
        Yup, I'm sure
      </Button>
    </div>
  </div>
</Modal>
```

<DemoContainer>
  <Modal heading='Modal' Trigger={<Button variant='outline'>Click me</Button>}>
    <div className='flex flex-col space-y-4'>
      <p>Are you sure you want to continue?</p>

      <div className='flex justify-end'>
        <Button variant='destructive'>
          Yup, I'm sure
        </Button>
      </div>
    </div>
  </Modal>
</DemoContainer>

### Open / setOpen using state

Alternatively, you can use the `open` and `setOpen` props to control the modal state yourself.

```tsx
import { useState } from 'react';
import { Modal } from '~/core/ui/Modal';
import { Button } from '~/core/ui/Button';

function Component() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant='outline' onClick={() => setOpen(true)}>
        Click me
      </Button>

      <Modal
        heading='Modal'
        open={open}
        setOpen={setOpen}
      >
        <div className='flex flex-col space-y-4'>
          <p>Are you sure you want to continue?</p>

          <div className='flex justify-end'>
            <Button variant='destructive'>
              Yup, I'm sure
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
}
```

The Modal component is used to display content in a layer above the rest of the page. It is used to display content that requires user interaction, interruption of the current process, or a simple modal window.

Modal Component - A high level wrapper around the Dialog component


The `Dialog` component is used to display content in a layer above the rest of the page. This component is built on top of the [Radix UI](https://radix-ui.com) library and styled using [Tailwind CSS](https://tailwindcss.com).

This component comes from the [Shadcn UI Library](https://ui.shadcn.com) - with minimal changes to the original component. I recommended to check out the original documentation for more information.

## Usage

Use the `Dialog` component to display content that requires user interaction, interruption of the current process, or a simple modal window.

```tsx
import { Dialog, DialogContent, DialogTrigger, DialogTitle } from '~/core/ui/Dialog';
import { Button } from '~/core/ui/Button';

function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant={'outline'}>Open Dialog</Button>
      </DialogTrigger>

      <DialogContent>
        <DialogTitle>
          Deleting Item
        </DialogTitle>

        <div className='flex flex-col space-y-4'>
          <p>
            You are about to delete this item. This action cannot be undone.
          </p>

          <p>Are you sure you want to continue?</p>

          <div className='flex justify-end'>
            <Button variant='destructive'>
              Yup, I'm sure
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}
```

<DemoContainer>
  <Dialog.Dialog>
    <Dialog.DialogTrigger asChild>
      <Button variant={'outline'}>Open Dialog</Button>
    </Dialog.DialogTrigger>

    <Dialog.DialogContent>
      <Dialog.DialogTitle>
        Deleting Item
      </Dialog.DialogTitle>

      <div className='flex flex-col space-y-4'>
        <p>
          You are about to delete this item. This action cannot be undone.
        </p>

        <p>Are you sure you want to continue?</p>

        <div className='flex justify-end'>
          <Button variant='destructive'>
            Yup, I'm sure
          </Button>
        </div>
      </div>
    </Dialog.DialogContent>
  </Dialog.Dialog>
</DemoContainer>

The Dialog component is used to display content in a layer above the rest of the page. It is used to display content that requires user interaction, interruption of the current process, or a simple modal window.

Dialog Component - Display content in a layer above the rest of the page


The table component is used to display tabular data in a simple way. It simply wraps the HTML `<table>` element and provides some styling and responsive behavior.

```tsx
function CustomersTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Customer</TableHead>
          <TableHead>Plan</TableHead>
          <TableHead>MRR</TableHead>
          <TableHead>Logins</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>

      <TableBody>
        <TableRow>
          <TableCell>Pippin Oddo</TableCell>
          <TableCell>Pro</TableCell>
          <TableCell>$100.2</TableCell>
          <TableCell>920</TableCell>
          <TableCell>
            <Tile.Badge trend={'up'}>Healthy</Tile.Badge>
          </TableCell>
        </TableRow>

        <TableRow>
          <TableCell>Väinö Pánfilo</TableCell>
          <TableCell>Basic</TableCell>
          <TableCell>$40.6</TableCell>
          <TableCell>300</TableCell>
          <TableCell>
            <Tile.Badge trend={'stale'}>Possible Churn</Tile.Badge>
          </TableCell>
        </TableRow>

        <TableRow>
          <TableCell>Giorgos Quinten</TableCell>
          <TableCell>Pro</TableCell>
          <TableCell>$2004.3</TableCell>
          <TableCell>1000</TableCell>
          <TableCell>
            <Tile.Badge trend={'up'}>Healthy</Tile.Badge>
          </TableCell>
        </TableRow>

        <TableRow>
          <TableCell>Adhelm Otis</TableCell>
          <TableCell>Basic</TableCell>
          <TableCell>$0</TableCell>
          <TableCell>10</TableCell>
          <TableCell>
            <Tile.Badge trend={'down'}>Churned</Tile.Badge>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}
```

<DemoContainer contentStyle={{padding: '1em'}}>
  <Table.Table>
    <Table.TableHeader>
      <Table.TableRow>
        <Table.TableHead>Customer</Table.TableHead>
        <Table.TableHead>Plan</Table.TableHead>
        <Table.TableHead>MRR</Table.TableHead>
        <Table.TableHead>Logins</Table.TableHead>
        <Table.TableHead>Status</Table.TableHead>
      </Table.TableRow>
    </Table.TableHeader>

    <Table.TableBody>
      <Table.TableRow>
        <Table.TableCell>Pippin Oddo</Table.TableCell>
        <Table.TableCell>Pro</Table.TableCell>
        <Table.TableCell>$100.2</Table.TableCell>
        <Table.TableCell>920</Table.TableCell>
        <Table.TableCell>
          <Tile.Badge trend={'up'}>Healthy</Tile.Badge>
        </Table.TableCell>
      </Table.TableRow>

      <Table.TableRow>
        <Table.TableCell>Väinö Pánfilo</Table.TableCell>
        <Table.TableCell>Basic</Table.TableCell>
        <Table.TableCell>$40.6</Table.TableCell>
        <Table.TableCell>300</Table.TableCell>
        <Table.TableCell>
          <Tile.Badge trend={'stale'}>Possible Churn</Tile.Badge>
        </Table.TableCell>
      </Table.TableRow>

      <Table.TableRow>
        <Table.TableCell>Giorgos Quinten</Table.TableCell>
        <Table.TableCell>Pro</Table.TableCell>
        <Table.TableCell>$2004.3</Table.TableCell>
        <Table.TableCell>1000</Table.TableCell>
        <Table.TableCell>
          <Tile.Badge trend={'up'}>Healthy</Tile.Badge>
        </Table.TableCell>
      </Table.TableRow>

      <Table.TableRow>
        <Table.TableCell>Adhelm Otis</Table.TableCell>
        <Table.TableCell>Basic</Table.TableCell>
        <Table.TableCell>$0</Table.TableCell>
        <Table.TableCell>10</Table.TableCell>
        <Table.TableCell>
          <Tile.Badge trend={'down'}>Churned</Tile.Badge>
        </Table.TableCell>
      </Table.TableRow>
    </Table.TableBody>
  </Table.Table>
</DemoContainer>

The table component is used to display tabular data in a simple way.

Table Component - Display tabular data in a simple way


The `DataTable` component is a simple wrapper around the amazing Tanstack Table component.

This abstraction is used to provide a more consistent API for the data table component. If you need more control over the table, you can use the `@tanstack/table` module directly.

```tsx
import { DataTable } from '~/core/ui/DataTable';

function DataTableExample() {
  const columns = [
    {
      header: 'ID',
      accessorKey: 'id',
    },
    {
      header: 'First Name',
      accessorKey: 'firstName',
    },
    {
      header: 'Last Name',
      accessorKey: 'lastName',
    },
    {
      header: 'Email',
      accessorKey: 'email',
    },
    {
      header: 'Phone',
      accessorKey: 'phone',
    },
  ];

  const data = [
    {
      id: 1,
      firstName: 'John',
      lastName: 'Doe',
      email: 'johndoe@example.com',
      phone: '123-456-7890',
    },
    {
      id: 2,
      firstName: 'Jane',
      lastName: 'Doe',
      email: 'janedoe@example.com',
      phone: '098-765-4321',
    },
    {
      id: 3,
      firstName: 'Alice',
      lastName: 'Johnson',
      email: 'alicejohnson@example.com',
      phone: '111-222-3333',
    },
    {
      id: 4,
      firstName: 'Bob',
      lastName: 'Smith',
      email: 'bobsmith@example.com',
      phone: '444-555-6666',
    },
    {
      id: 5,
      firstName: 'Charlie',
      lastName: 'Brown',
      phone: '777-888-9999',
      email: 'charliebrown@exmaple.com',
    },
  ];

  return <DataTable data={data} columns={columns} />;
}
```

<DemoContainer contentStyle={{ padding: '1em' }}>
  <Examples.DataTableExample />
</DemoContainer>

## Props

You can pass the following props to the `DataTable` component:

- `data` - The data to display in the table
- `columns` - The columns to display in the table
- `renderSubComponent` - A function that returns a React element to render as a sub component for each row
- `pageIndex` - The current page index
- `pageSize` - The current page size
- `pageCount` - The current page count
- `onPaginationChange` - A function that is called when the pagination changes
- `tableProps` - Additional props to pass to the table component

## More Examples

### Checkbox Selection

An example of how to use the `DataTable` component with checkbox selection.

```tsx
import { ColumnDef } from '@tanstack/react-table';
import { useState } from 'react';

import DataTable from '~/core/ui/DataTable';
import { Checkbox } from '~/core/ui/Checkbox';

function DataTableExampleWithCheckboxes() {
  const [store, setStore] = useState<number[]>([]);

  const columns: ColumnDef<(typeof data)[number]>[] = [
    {
      id: 'checkbox',
      header: () => {
        return (
          <Checkbox
            checked={store.length === data.length}
            onCheckedChange={(checked) => {
              if (checked) {
                setStore(data.map((row) => row.id));
              } else {
                setStore([]);
              }
            }}
          />
        );
      },
      cell: ({ row }) => {
        const original = row.original;
        const id = original.id;

        return (
          <div>
            <Checkbox
              checked={store.includes(id)}
              onCheckedChange={(checked) => {
                if (checked) {
                  setStore((ids) => [...ids, original.id]);
                } else {
                  setStore(store.filter((id) => id !== original.id));
                }
              }}
            />
          </div>
        );
      },
    },
    {
      header: 'First Name',
      accessorKey: 'firstName',
    },
    {
      header: 'Last Name',
      accessorKey: 'lastName',
    },
    {
      header: 'Email',
      accessorKey: 'email',
    },
    {
      header: 'Phone',
      accessorKey: 'phone',
    },
  ];

  const data = [
    {
      id: 1,
      firstName: 'John',
      lastName: 'Doe',
      email: 'johndoe@example.com',
      phone: '123-456-7890',
    },
    {
      id: 2,
      firstName: 'Jane',
      lastName: 'Doe',
      email: 'janedoe@example.com',
      phone: '098-765-4321',
    },
    {
      id: 3,
      firstName: 'Alice',
      lastName: 'Johnson',
      email: 'alicejohnson@example.com',
      phone: '111-222-3333',
    },
    {
      id: 4,
      firstName: 'Bob',
      lastName: 'Smith',
      email: 'bobsmith@example.com',
      phone: '444-555-6666',
    },
    {
      id: 5,
      firstName: 'Charlie',
      lastName: 'Brown',
      phone: '777-888-9999',
      email: 'charliebrown@exmaple.com',
    },
  ];

  return <DataTable data={data} columns={columns} />;
}

export default DataTableExampleWithCheckboxes;
```

<DemoContainer contentStyle={{ padding: '1em' }}>
  <Examples.DataTableExampleWithCheckboxes />
</DemoContainer>





The data table component is used to display tabular data in more complex scenarios

DataTable Component - Display tabular data in more complex scenarios


The `Tooltip` component can be used to display additional information when hovering an element. This component is built on top of the [Radix UI](https://radix-ui.com) library and styled using [Tailwind CSS](https://tailwindcss.com).

This component comes from the [Shadcn UI Library](https://ui.shadcn.com) - with minimal changes to the original component. I recommended to check out the original documentation for more information.

## Usage

```tsx
import { Tooltip, TooltipTrigger, TooltipContent } from '~/core/ui/Tooltip';
import { Button } from '~/core/ui/Button';

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant='ghost'>Hover me</Button>
  </TooltipTrigger>

  <TooltipContent>
    Hello world
  </TooltipContent>
</Tooltip>
```

<DemoContainer>
  <Tooltip.Tooltip>
    <Tooltip.TooltipTrigger asChild>
      <Button variant='ghost'>Hover me</Button>
    </Tooltip.TooltipTrigger>

    <Tooltip.TooltipContent>
      Hello world
    </Tooltip.TooltipContent>
  </Tooltip.Tooltip>
</DemoContainer>

The Tooltip component is used to display a tooltip.

Tooltip Component


Use the `Heading` component to display titles and subtitles.

```tsx
import { Heading } from '~/core/ui/Heading';

<Heading type={1}>Heading 1</Heading>
<Heading type={2}>Heading 2</Heading>
<Heading type={3}>Heading 3</Heading>
<Heading type={4}>Heading 4</Heading>
<Heading type={5}>Heading 5</Heading>
<Heading type={6}>Heading 6</Heading>
```

<DemoContainer>
  <div className={'flex flex-col space-y-2'}>
    <Heading type={1}>Heading 1</Heading>
    <Heading type={2}>Heading 2</Heading>
    <Heading type={3}>Heading 3</Heading>
    <Heading type={4}>Heading 4</Heading>
    <Heading type={5}>Heading 5</Heading>
    <Heading type={6}>Heading 6</Heading>
  </div>
</DemoContainer>

Heading component for titles and subtitles.

Heading Component


The `Video` component is used to display videos in your webpage using the HTML5 video tag.

```tsx
import { Video } from '~/core/ui/Video';

<Video src='/videos/video.mp4' />
```

The `Video` component is automatically lazy loaded, meaning that the video will only be loaded when it is visible in the viewport.

While loading, the `Video` component will display a loading indicator. Once the video is loaded, the loading indicator will be replaced by the video.

### Props

1. `src` - The source of the video.
2. `className` - The class name to apply to the video element.
3. `poster` - The poster image to display before the video is loaded.
4. `width` - The width of the video.
5. `type` - The type of the video. Defaults to `video/mp4`.

The Video component is used to display videos in your webpage using the HTML5 video tag.

Video Component - Display a video

Navigation


The Navigation Menu component is used to display a list of links to pages within the site. This component is used in a variety of places throughout the Kits, including the main navigation menu, the settings menu, etc.

## Usage

Let's explore the different ways the Navigation Menu component can be used.

### Basic Usage

The most basic usage of the Navigation Menu component is to display a list of links to pages within the site. This is the default usage of the component.

```tsx
<NavigationMenu>
  <NavigationMenuItem link={{ path: '#', label: 'Home' }} />
  <NavigationMenuItem link={{ path: '/about', label: 'About' }} />
  <NavigationMenuItem link={{ path: '/contact', label: 'Contact' }} />
</NavigationMenu>
```

<DemoContainer iframeStyle={{ width: '1400px' }} contentStyle={{ 'justifyContent': 'start' }}>
  <div className={'w-[12rem] flex'}>
    <NavigationMenu>
      <NavigationMenuItem link={{ path: '', label: 'Home' }} />
      <NavigationMenuItem link={{ path: '#/about', label: 'About' }} />
      <NavigationMenuItem link={{ path: '#/contact', label: 'Contact' }} />
    </NavigationMenu>
  </div>
</DemoContainer>

### Bordered

To display a tabbed-style navigation menu, use the `bordered` prop.

```tsx
<NavigationMenu bordered>
  <NavigationMenuItem link={{ path: '/', label: 'Home' }} />
  <NavigationMenuItem link={{ path: '/about', label: 'About' }} />
  <NavigationMenuItem link={{ path: '/contact', label: 'Contact' }} />
</NavigationMenu>
```

<DemoContainer iframeStyle={{ width: '1400px' }} contentStyle={{ 'justifyContent': 'start' }}>
  <div className={'w-[12rem] flex'}>
    <NavigationMenu bordered>
      <NavigationMenuItem link={{ path: '', label: 'Home' }} />
      <NavigationMenuItem link={{ path: '#/about', label: 'About' }} />
      <NavigationMenuItem link={{ path: '#/Contact', label: 'Contact' }} />
    </NavigationMenu>
  </div>
</DemoContainer>

### Pill Vertical

To display secondary navigation menus, the pill vertical style can be ideal. This style is used in the settings menu for the sub-navigation menus.

```tsx
<NavigationMenu pill vertical>
  <NavigationMenuItem link={{ path: '/', label: 'Home' }} />
  <NavigationMenuItem link={{ path: '/about', label: 'About' }} />
  <NavigationMenuItem link={{ path: '/contact', label: 'Contact' }} />
</NavigationMenu>
```

<DemoContainer iframeStyle={{ width: '1400px' }} contentStyle={{ 'justifyContent': 'start' }}>
  <div className={'w-[12rem] flex'}>
    <NavigationMenu pill vertical>
      <NavigationMenuItem link={{ path: '', label: 'Home' }} />
      <NavigationMenuItem link={{ path: '#/about', label: 'About' }} />
      <NavigationMenuItem link={{ path: '#/contact', label: 'Contact' }} />
    </NavigationMenu>
  </div>
</DemoContainer>

The navigation menu component is used to display a list of links to pages within the site.


The Sidebar component is used to create a full-page Sidebar navigation menu. It is used in both the Kits Dashboard and the Admin pages.

## Usage

Let's explore the different ways the Sidebar component can be used.

### Basic Usage

Below is a basic example of how to use the Sidebar component.

```tsx
import { 
  Cog8ToothIcon, 
  CreditCardIcon, 
  Square3Stack3DIcon, 
  Squares2X2Icon 
} from "@heroicons/react/24/outline";

import { Sidebar, SidebarItem, SidebarContent } from "~/core/ui/Sidebar";

function AppSidebar() {
  return (
    <Sidebar>
      <SidebarContent className={'py-4'}>
        <SidebarItem
          path={'#dashboard'}
          Icon={() => <Square3Stack3DIcon className={'w-4'} />}
        >
          Dashboard
        </SidebarItem>

        <SidebarItem
          path={'#workspace'}
          Icon={() => <Squares2X2Icon className={'w-4'} />}
        >
          Workspace
        </SidebarItem>

        <SidebarItem
          path={'#subscription'}
          Icon={() => <CreditCardIcon className={'w-4'} />}
        >
          Subscription
        </SidebarItem>

        <SidebarItem
          path={'#settings'}
          Icon={() => <Cog8ToothIcon className={'w-4'} />}
        >
          Settings
        </SidebarItem>
      </SidebarContent>
    </Sidebar>
  );
}
```

<DemoContainer iframeStyle={{ width: '1400px' }} contentStyle={{ 'justifyContent': 'start' }}>
  <Sidebar.Sidebar>
    <Sidebar.SidebarContent className='py-4'>
      <Sidebar.SidebarItem
        path={'/docs/components/sidebar'}
        Icon={() => <Icons.Square3Stack3DIcon className={'w-4'} />}
      >
        Dashboard
      </Sidebar.SidebarItem>

      <Sidebar.SidebarItem
        path={'#workspace'}
        Icon={() => <Icons.Squares2X2Icon className={'w-4'} />}
      >
        Workspace
      </Sidebar.SidebarItem>

      <Sidebar.SidebarItem
        path={'#subscription'}
        Icon={() => <Icons.CreditCardIcon className={'w-4'} />}
      >
        Subscription
      </Sidebar.SidebarItem>

      <Sidebar.SidebarItem
        path={'#settings'}
        Icon={() => <Icons.Cog8ToothIcon className={'w-4'} />}
      >
        Settings
      </Sidebar.SidebarItem>
    </Sidebar.SidebarContent>
  </Sidebar.Sidebar>
</DemoContainer>

### Sidebar with Groups

You can create groups of Sidebar items by using the `SidebarGroup` component.

```tsx
import { 
  Cog8ToothIcon, 
  CreditCardIcon, 
  Square3Stack3DIcon, 
  Squares2X2Icon 
} from "@heroicons/react/24/outline";

import { Sidebar, SidebarItem, SidebarContent } from "~/core/ui/Sidebar";

function AppSidebar() {
  return (
    <Sidebar>
      <SidebarContent className={'py-4'}>
        <SidebarGroup label='App' collapsible={false}>
          <SidebarItem
            path={'#dashboard'}
            Icon={() => <Square3Stack3DIcon className={'w-4'} />}
          >
            Dashboard
          </SidebarItem>

          <SidebarItem
            path={'#workspace'}
            Icon={() => <Squares2X2Icon className={'w-4'} />}
          >
            Workspace
          </SidebarItem>
        </SidebarGroup>

        <SidebarGroup label='Settings' collapsible>
          <SidebarItem
            path={'#subscription'}
            Icon={() => <CreditCardIcon className={'w-4'} />}
          >
            Subscription
          </SidebarItem>

          <SidebarItem
            path={'#profile'}
            Icon={() => <Cog8ToothIcon className={'w-4'} />}
          >
            Profile
          </SidebarItem>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}
```

<DemoContainer iframeStyle={{ width: '1400px' }} contentStyle={{ 'justifyContent': 'start' }}>
  <Sidebar.Sidebar>
    <Sidebar.SidebarContent className='py-4'>
      <Sidebar.SidebarGroup label='App' collapsible={false}>
        <Sidebar.SidebarItem
          path={'#dashboard'}
          Icon={() => <Icons.Square3Stack3DIcon className={'w-4'} />}
        >
          Dashboard
        </Sidebar.SidebarItem>

        <Sidebar.SidebarItem
          path={'/docs/components/sidebar'}
          Icon={() => <Icons.Squares2X2Icon className={'w-4'} />}
        >
          Workspace
        </Sidebar.SidebarItem>
      </Sidebar.SidebarGroup>

      <Sidebar.SidebarGroup label='Settings'>
        <Sidebar.SidebarItem
          path={'#subscription'}
          Icon={() => <Icons.CreditCardIcon className={'w-4'} />}
        >
          Subscription
        </Sidebar.SidebarItem>

        <Sidebar.SidebarItem
          path={'#settings'}
          Icon={() => <Icons.Cog8ToothIcon className={'w-4'} />}
        >
          Profile
        </Sidebar.SidebarItem>
      </Sidebar.SidebarGroup>
    </Sidebar.SidebarContent>
  </Sidebar.Sidebar>
</DemoContainer>

---

### API

The following props are available for the `Sidebar` components.

#### &lt;Sidebar&gt;

The Sidebar component accepts the following props:

1. `collapsed` - Whether the sidebar is initially collapsed or not. Defaults to `false`.

```tsx
<Sidebar collapsed={false}>
...
</Sidebar>
```

#### &lt;SidebarItem&gt;

The SidebarItem component accepts the following props:

1. `path` - The path to navigate to when the item is clicked.
2. `Icon` - The icon to display next to the item.
3. `end` - Whether the item should look as "active" when the path matches the current path. Defaults to `false`. By default, the path will match sub-paths up to 3 levels deep. For example, if the current path is `/dashboard`, then the item will look as "active" if the path is `/dashboard`, `/dashboard/overview`, `/dashboard/overview/1`, etc. If you want to match the path exactly, then set `end` to `true`. In this way, the item will only look as "active" if the path is `/dashboard`.

```tsx
<SidebarItem
  path={'/dashboard'}
  Icon={() => <Square3Stack3DIcon className={'w-4'} />}
  end={true}
>...</SidebarItem>
```

#### &lt;SidebarContent&gt;

The SidebarContent component accepts the following props:

1. `className` - The class name to apply to the content container.

```tsx
<SidebarContent className={'py-4'}>...<SidebarContent>
```

#### &lt;SidebarGroup&gt;

The SidebarGroup component accepts the following props:

1. `label` - The label of the group.
2. `collapsible` - Whether the group is collapsible or not. Defaults to `true`.
3. `collapsed` - Whether the group is initially collapsed or not. Defaults to `false`.

```tsx
<SidebarGroup 
  label='App' 
  collapsible={true} 
  collapsed={false}>
  ...
</SidebarGroup>
```

The Sidebar component is used to create a full-page Sidebar navigation menu.

Sidebar


## Basic Usage - Default

The basic usage of the Stepper component is to display a progress bar with a set of steps. It is used to indicate the current position in a process. By default, we display the `default` style.

```tsx
<Stepper 
  steps={['Details', 'Organization', "Complete"]} 
  currentStep={0} 
/> 
```

<DemoContainer>
  <div className="max-w-md w-full">
    <Stepper steps={['Details', 'Organization', "Complete"]} currentStep={0} />
  </div>
</DemoContainer>

### Numbers variant

The `numbers` variant displays the step number instead of the default dot.

```tsx
<Stepper 
  steps={['Details', 'Organization', "Complete"]} 
  currentStep={0} 
  variant="numbers"
/>
```

<DemoContainer>
  <div className="max-w-md w-full">
    <Stepper steps={['Details', 'Organization', "Complete"]} currentStep={0} variant="numbers" />
  </div>
</DemoContainer>

### Props

The following props may be passed to configure the Stepper component.

1. `steps` - An array of strings that represent the steps in the stepper. You can also pass translation keys to localize the stepper, such as `common.step1`.
2. `currentStep` - The current step in the stepper. This is a zero-based index.
3. `variant` - The variant of the stepper. The default is `default`. The other option is `numbers`.


The Stepper component is used to display a progress bar with a set of steps. It is used to indicate the current position in a process.

Stepper


The mobile navigation menu is a menu that is only visible on mobile devices. It is used to navigate the site on mobile devices. It uses the `Dropdown` component to display the menu items with a full-width panel.

It can be used with the `NavigationMenu` component to display the same menu on desktop and mobile devices - while keeping the correct visibility on each device using Tailwind's responsive classes.

```tsx
import { MobileNavigationMenu } from '~/core/ui/MobileNavigationMenu';

<div className={'block w-full lg:hidden'}>
  <MobileNavigationMenu 
    links={[{
      label: 'Home',
      path: '/',
    }, {
      label: 'About',
      path: '/about',
    }]}
  />
</div>
```

<DemoContainer>
  <MobileNavigationMenu
    links={[{
      label: 'Home',
      path: '/docs/components/mobile-navigation-menu'
    }, {
      label: 'About',
      path: '/about',
    }]}
  />
</DemoContainer>

The mobile navigation menu is a menu that is only visible on mobile devices. It is used to navigate the site on mobile devices.

Mobile Navigation Menu

Layouts are used to define the structure of a page. They are used to define the header, footer, and main content areas of a page.

Layout


The Container component is a simple component that wraps content in a centered container.

```tsx
const Container: React.FCC = ({ children }) => {
  return <div className="container mx-auto px-5">{children}</div>;
};
```

Use it anywhere you want to center content on the page:

```tsx
import { Container } from "~/core/ui/Container";

function App() {
  return (
    <Container>
      <p>Content</p>
    </Container>
  );
}
```

A container component to wrap content in a centered container.

Container Component


The Section component is used to organize content into sections. It is composed of a SectionHeader and SectionBody component.

In the kits, it used across the Settings pages to organize content into sections.

```tsx
import { Section, SectionHeader, SectionBody } from '~/core/ui/Section';
import { TextFieldInput, TextFieldLabel } from '~/core/ui/TextField';
import { Button } from '~/core/ui/Button';

<Section>
  <SectionHeader
    title={'Your Details'}
    description={`Please enter your details below.`}
  />

  <SectionBody className={'space-y-4'}>
    <TextFieldLabel>
      Name
      <TextFieldInput />
    </TextFieldLabel>

    <TextFieldLabel>
      Surname
      <TextFieldInput />
    </TextFieldLabel>

    <Button>
      Save
    </Button>
  </SectionBody>
</Section>
```

<DemoContainer contentStyle={{ padding: '1em' }}>
  <Section.Section>
    <Section.SectionHeader
      title={'Your Details'}
      description={`Please enter your details below.`}
    />

    <Section.SectionBody className={'space-y-4'}>
      <TextField.Label>
        Name
        <TextField.Input />
      </TextField.Label>

      <TextField.Label>
        Surname
        <TextField.Input />
      </TextField.Label>

      <Button>
        Save
      </Button>
    </Section.SectionBody>
  </Section.Section>
</DemoContainer>

Section component. Organizes content into sections.

Section Component


The Tile component is usually used in dashboards to display a tile with an icon and text.

```tsx
import { Tile } from '~/core/ui/Tile';

<div className={'grid grid-cols-2 gap-4'}>
  <Tile>
    <Tile.Heading>MRR</Tile.Heading>

    <Tile.Body>
      <div className={'flex justify-between space-x-8'}>
        <Tile.Figure>
          $13,322
        </Tile.Figure>

        <Tile.Trend trend={'up'}>+30%</Tile.Trend>
      </div>
    </Tile.Body>
  </Tile>

  <Tile>
    <Tile.Heading>Support Tickets</Tile.Heading>

    <Tile.Body>
      <div className={'flex justify-between space-x-8'}>
        <Tile.Figure>
          +133
        </Tile.Figure>

        <Tile.Trend trend={'down'}>+12%</Tile.Trend>
      </div>
    </Tile.Body>
  </Tile>
</div>
```

<DemoContainer>
  <div className={'grid grid-cols-2 gap-4'}>
    <Tile>
      <Tile.Heading>MRR</Tile.Heading>

      <Tile.Body>
        <div className={'flex justify-between space-x-8'}>
          <Tile.Figure>
            $13,322
          </Tile.Figure>

          <Tile.Trend trend={'up'}>+30%</Tile.Trend>
        </div>
      </Tile.Body>
    </Tile>

    <Tile>
      <Tile.Heading>Support Tickets</Tile.Heading>

      <Tile.Body>
        <div className={'flex justify-between space-x-8'}>
          <Tile.Figure>
            +133
          </Tile.Figure>

          <Tile.Trend trend={'down'}>+12%</Tile.Trend>
        </div>
      </Tile.Body>
    </Tile>
  </div>
</DemoContainer>

Tile component - used to display a tile with an icon and text.

Tile Component

Utility


The `If` component allows to use conditions to execute a block of code if a condition is true as a JSX component.

This component is useful to avoid the use of ternary operators in JSX code.

```tsx
import { If } from '~/core/ui/If';

<If condition={true}>
  <p>
    This content will be displayed
  </p>
</If>

<If condition={false} fallback={'I get displayed instead'}>
  <p>
    This content will not be displayed
  </p>
</If>
```

<DemoContainer>
  <div className={'flex flex-col'}>
    <If condition={true}>
      <p>This content will be displayed</p>
    </If>

    <If condition={false} fallback={'I get displayed instead'}>
      <p>This content will not be displayed</p>
    </If>
  </div>
</DemoContainer>

The If component allows to use conditions to execute a block of code if a condition is true as a JSX component.

Conditional Statements


The `ClientOnly` component allows to render content only on the client/browser. This is useful when you want to render content that is not supported by the server (e.g. `window` or `document`).

```tsx
import { ClientOnly } from '~/core/ui/If';

<ClientOnly>
  <div>Only rendered on the client</div>
</ClientOnly>
```

An alternative to this component can be using the `dynamic` function from `next/dynamic`:

```tsx
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('./DynamicComponent'), {
  ssr: false,
});
```

If you're using Next.js, consider using the `dynamic` function instead of `ClientOnly`.

The ClientOnly component allows to display content only on the client in JSX.

Client Only - Display content only on the client in JSX


Use the `Spinner` component to display an animated SVG spinner while loading data. For a more complete component, check out the `LoadingOverlay` component instead, which wraps the `Spinner` component and displays a message.

```tsx
import { Spinner } from `~/core/ui/Spinner`;

<Spinner />;
```

<DemoContainer>
  <Spinner />
</DemoContainer>

Spinner is a component to display a spinner while loading data.

Spinner Component - Display a spinner while loading data


Use the `LoadingOverlay` component to display an animated SVG spinner while loading data, while also displaying a message. This is useful for full-page loading states.

### Basic Usage

The most basic usage of the `LoadingOverlay` component is to display a spinner.

```tsx
import { LoadingOverlay } from `~/core/ui/LoadingOverlay`;

<LoadingOverlay />;
```

<DemoContainer>
  <LoadingOverlay />
</DemoContainer>

### With Message

The `LoadingOverlay` component can also display a message.

```tsx
import { LoadingOverlay } from `~/core/ui/LoadingOverlay`;

<LoadingOverlay>
  Loading Tasks. Please wait...
</LoadingOverlay>;
```

<DemoContainer>
  <LoadingOverlay>
    Loading Tasks. Please wait...
  </LoadingOverlay>
</DemoContainer>

### Full Page

The `LoadingOverlay` component can also be used as a full-page loading overlay.

```tsx
import { LoadingOverlay } from `~/core/ui/LoadingOverlay`;

<LoadingOverlay fullPage>
  Loading Tasks. Please wait...
</LoadingOverlay>;
```

<DemoContainer>
  <LoadingOverlay fullPage>
    Loading Tasks. Please wait...
  </LoadingOverlay>
</DemoContainer>

### With Logo

The `LoadingOverlay` component can also display a logo. The component will use the `Logo` component from the `~/core/ui/Logo` module.

```tsx
import { LoadingOverlay } from `~/core/ui/LoadingOverlay`;

<LoadingOverlay displayLogo fullPage>
  Loading Page. Please wait...
</LoadingOverlay>;
```

<DemoContainer>
  <LoadingOverlay displayLogo fullPage>
    Loading Page. Please wait...
  </LoadingOverlay>
</DemoContainer>

The Loading Overlay is a component to display a spinner while loading data.

Loading Overlay Component - Display a Loading overlay while loading data


The `LazyRender` component is used to lazy render a component when it is visible in the viewport. This is useful for rendering components that are not visible on the initial page load, but are visible after scrolling down the page.

This is extremely useful in situations where you want to delay loading a heavy component until it is visible in the viewport. For example, with videos.

## Usage

```tsx
import { LazyRender } from '~/core/ui/LazyRender';

<LazyRender>
  <Video />
</LazyRender>
```

## Props

The `LazyRender` component accepts the following props:

1. **threshold** - The percentage of the component that must be visible in the viewport before it is rendered. Defaults to `0`.
2. **rootMargin** - The margin around the viewport that must be visible before the component is rendered. Defaults to `0px`.
3. **onVisible** - A callback that is called when the component is visible in the viewport.


Lazy render component when it is visible in the viewport.

Lazy Render

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    h2: "h2",
    a: "a",
    span: "span",
    p: "p",
    code: "code",
    div: "div",
    pre: "pre",
    h3: "h3",
    ol: "ol",
    li: "li"
  }, props.components), {DemoContainer, Stepper} = _components;
  if (!DemoContainer) _missingMdxReference("DemoContainer", true);
  if (!Stepper) _missingMdxReference("Stepper", true);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.h2, {
      id: "basic-usage---default",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#basic-usage---default",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Basic Usage - Default"]
    }), "\n", _jsxs(_components.p, {
      children: ["The basic usage of the Stepper component is to display a progress bar with a set of steps. It is used to indicate the current position in a process. By default, we display the ", _jsx(_components.code, {
        children: "default"
      }), " style."]
    }), "\n", _jsx(_components.div, {
      "data-rehype-pretty-code-fragment": "",
      children: _jsx(_components.pre, {
        className: "github-dark",
        style: {
          backgroundColor: "#24292e"
        },
        tabIndex: "0",
        "data-language": "tsx",
        "data-theme": "default",
        children: _jsxs(_components.code, {
          "data-language": "tsx",
          "data-theme": "default",
          style: {
            display: "grid"
          },
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "Stepper"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "  "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "steps"
            }), _jsx(_components.span, {
              style: {
                color: "#F97583"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "{["
            }), _jsx(_components.span, {
              style: {
                color: "#9ECBFF"
              },
              children: "'Details'"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ", "
            }), _jsx(_components.span, {
              style: {
                color: "#9ECBFF"
              },
              children: "'Organization'"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ", "
            }), _jsx(_components.span, {
              style: {
                color: "#9ECBFF"
              },
              children: "\"Complete\""
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "]} "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "  "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "currentStep"
            }), _jsx(_components.span, {
              style: {
                color: "#F97583"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "{"
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "0"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "} "
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "/> "
            })
          })]
        })
      })
    }), "\n", _jsx(DemoContainer, {
      children: _jsx("div", {
        className: "max-w-md w-full",
        children: _jsx(Stepper, {
          steps: ['Details', 'Organization', "Complete"],
          currentStep: 0
        })
      })
    }), "\n", _jsxs(_components.h3, {
      id: "numbers-variant",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#numbers-variant",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Numbers variant"]
    }), "\n", _jsxs(_components.p, {
      children: ["The ", _jsx(_components.code, {
        children: "numbers"
      }), " variant displays the step number instead of the default dot."]
    }), "\n", _jsx(_components.div, {
      "data-rehype-pretty-code-fragment": "",
      children: _jsx(_components.pre, {
        className: "github-dark",
        style: {
          backgroundColor: "#24292e"
        },
        tabIndex: "0",
        "data-language": "tsx",
        "data-theme": "default",
        children: _jsxs(_components.code, {
          "data-language": "tsx",
          "data-theme": "default",
          style: {
            display: "grid"
          },
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "Stepper"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "  "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "steps"
            }), _jsx(_components.span, {
              style: {
                color: "#F97583"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "{["
            }), _jsx(_components.span, {
              style: {
                color: "#9ECBFF"
              },
              children: "'Details'"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ", "
            }), _jsx(_components.span, {
              style: {
                color: "#9ECBFF"
              },
              children: "'Organization'"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ", "
            }), _jsx(_components.span, {
              style: {
                color: "#9ECBFF"
              },
              children: "\"Complete\""
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "]} "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "  "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "currentStep"
            }), _jsx(_components.span, {
              style: {
                color: "#F97583"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "{"
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "0"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "} "
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "  "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "variant"
            }), _jsx(_components.span, {
              style: {
                color: "#F97583"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                color: "#9ECBFF"
              },
              children: "\"numbers\""
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "/>"
            })
          })]
        })
      })
    }), "\n", _jsx(DemoContainer, {
      children: _jsx("div", {
        className: "max-w-md w-full",
        children: _jsx(Stepper, {
          steps: ['Details', 'Organization', "Complete"],
          currentStep: 0,
          variant: "numbers"
        })
      })
    }), "\n", _jsxs(_components.h3, {
      id: "props",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#props",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Props"]
    }), "\n", _jsx(_components.p, {
      children: "The following props may be passed to configure the Stepper component."
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "steps"
        }), " - An array of strings that represent the steps in the stepper. You can also pass translation keys to localize the stepper, such as ", _jsx(_components.code, {
          children: "common.step1"
        }), "."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "currentStep"
        }), " - The current step in the stepper. This is a zero-based index."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "variant"
        }), " - The variant of the stepper. The default is ", _jsx(_components.code, {
          children: "default"
        }), ". The other option is ", _jsx(_components.code, {
          children: "numbers"
        }), "."]
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Getting Started

Forms

Information

Navigation

Layout

Utility

Stepper

The Stepper component is used to display a progress bar with a set of steps. It is used to indicate the current position in a process.

Basic Usage - Default

Numbers variant

Props

Subscribe to our Newsletter