pakt-ui v0.2.0

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

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

Input

Renders an input element.

Usage

import { Input } from "pakt-ui";

<Input placeholder="Input" />;

Props

Textarea

Renders a textarea element.

Usage

import { Textarea } from "pakt-ui";

<Textarea placeholder="Textarea" />;

Props

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

Checkbox

Renders a checkbox element.

Usage

import { Checkbox } from "pakt-ui";

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

Props

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

Slider

Renders a slider element.

Usage

import { Slider } from "pakt-ui";

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

Props

Progress

Renders a progress bar element.

Usage

import { Progress } from "pakt-ui";

<Progress value={50} />;

Props