Pakt UI

Pakt UI is a React component library built using Radix UI and Tailwind CSS. It's a collection of repetitive components that are used across the Pakt ecosystem.

Installation

npm install pakt-ui

Components

• Button
• Text
• Input
• Textarea
• Select
• Checkbox
• Switch
• Slider
• Progress

Button

Renders a button element. You can use the variant prop to change the appearance of the button. The default variant is primary.

Usage

import { Button } from 'pakt-ui';

<Button>Button</Button>

// primary
<Button variant="primary">Button</Button>

Props

| Prop | Type | Default | Description | | -------- | ------- | ------- | ----------------------------------------------------------------------------------------------- | | variant | string | primary | The variant of the button. Can be primary, secondary, danger, outline or transparent. | | disabled | boolean | false | Whether the button is disabled. | | size | string | md | The size of the button. Can be xs, sm, md, lg, xl. |

Text

Contains sub-components for rendering text elements. The sub-components are <Text.p>, <Text.span>, <Text.label>, <Text.h1>, <Text.h2>, <Text.h3>, and <Text.h4> which render <p>, <span>, <label>, <h1>, <h2>, <h3>, and <h4> elements respectively. You can use the variant prop to change the appearance of the text. The default variant is base.

Usage

import { Text } from 'pakt-ui';

# H1 Element
<Text.h1>Heading 1</Text.h1>

# Paragraph Element
<Text.p>Paragraph</Text.p>

# Span Element
<Text.span>Span</Text.span>

# Label Element
<Text.label>Label</Text.label>

Props

| Prop | Type | Default | Description | | ------------- | ------- | ------- | ----------------------------------------------------------------------------------------------- | | variant | string | base | The variant of the text. Can be base, small, large, bold, italic, underline, code | | bold | boolean | false | Whether the text is bold. | | italic | boolean | false | Whether the text is italic. | | underline | boolean | false | Whether the text is underlined. | | strikethrough | boolean | false | Whether the text is strikethrough. |

Input

Renders an input element.

Usage

import { Input } from "pakt-ui";

<Input placeholder="Input" />;

Props

| Prop | Type | Default | Description | | ----------- | ------- | ------- | ---------------------------------- | | placeholder | string | | The placeholder text of the input. | | disabled | boolean | false | Whether the input is disabled. | | label | string | | The label of the input. | | caption | string | | The caption of the input. |

Textarea

Renders a textarea element.

Usage

import { Textarea } from "pakt-ui";

<Textarea placeholder="Textarea" />;

Props

| Prop | Type | Default | Description | | ----------- | ------- | ------- | ------------------------------------- | | placeholder | string | | The placeholder text of the textarea. | | disabled | boolean | false | Whether the textarea is disabled. | | label | string | | The label of the textarea. | | caption | string | | The caption of the textarea. |

Select

Displays a dropdown list of options that the user can select from.

Usage

import { Select } from "pakt-ui";

const OPTIONS = [
  { value: "1", label: "Option 1" },
  { value: "2", label: "Option 2" },
  { value: "3", label: "Option 3" },
];

<Select options={OPTIONS} label="Label" placeholder="Placeholder" onChange={(value) => {}} />;

Props

| Prop | Type | Default | Description | | ----------- | ---------------------------------- | ------- | --------------------------------------- | | options | {value: string; label: string}[] | | The options to display in the dropdown. | | placeholder | string | | The placeholder text of the select. | | disabled | boolean | false | Whether the select is disabled. | | label | string | | The label of the select. | | onChange | (value: string) => void | | The callback function for onChange. |

Checkbox

Renders a checkbox element.

Usage

import { Checkbox } from "pakt-ui";

<Checkbox checked={true} onCheckedChange={(checked) => {}} />;

Props

| Prop | Type | Default | Description | | --------------- | -------------------------- | ------- | ------------------------------------------ | | checked | boolean | false | Whether the checkbox is checked. | | disabled | boolean | false | Whether the checkbox is disabled. | | onCheckedChange | (checked: boolean) => void | | The callback function for onCheckedChange. |

Switch

Switches are used as an alternative to checkboxes when there is only one option to select.

Usage

import { Switch } from "pakt-ui";

<Switch checked={true} onCheckedChange={(checked) => {}} />;

Props

| Prop | Type | Default | Description | | --------------- | -------------------------- | ------- | ------------------------------------------ | | checked | boolean | false | Whether the switch is checked. | | disabled | boolean | false | Whether the switch is disabled. | | onCheckedChange | (checked: boolean) => void | | The callback function for onCheckedChange. |

Slider

Renders a slider element.

Usage

import { Slider } from "pakt-ui";

<Slider value={50} onChange={(value) => {}} />;

Props

| Prop | Type | Default | Description | | ------------- | ----------------------- | ------- | ---------------------------------------- | | value | number | | The value of the slider. | | disabled | boolean | false | Whether the slider is disabled. | | onChange | (value: number) => void | | The callback function for onChange. | | onValueCommit | (value: number) => void | | The callback function for onValueCommit. |

Progress

Renders a progress bar element.

Usage

import { Progress } from "pakt-ui";

<Progress value={50} />;

Props

| Prop | Type | Default | Description | | ------ | ------ | ------- | ------------------------------ | | value | number | | The value of the progress | | height | number | 4 | The height of the progress bar |