UI Kit

We attached much more components to help you build your next project. You can find all the components in this page.

We are using shadcn/ui as a base for the components. You can find the source code of the components in theshadcn/ui repository or 21st.dev.

Typography

Typography is used to style the text of the page. It is used to add heading 1, heading 2, heading 3, body large regular, body large semibold, body medium regular, body medium semibold, body small regular, body small semibold, body extra small regular and body extra small semibold.

Heading 1

Heading 2

Heading 3

Body/L/Regular

Body/L/Semibold

Body/M/Regular

Body/M/Semibold

Body/S/Regular

Body/S/Semibold

Body/XS/Regular

Body/XS/Semibold

Button

Button is used to trigger an action. It is used to add default, loading, disabled, outline, secondary, ghost, link, destructive, default sm, default sm-md, default lg, icon and input icon button.

Alert

Alert is used to show a notification message. It is used to add secondary, primary, destructive, success, info, warning and mono alert.

Alert Secondary

Alert Primary

Alert Destructive

Alert Success

Alert Info

Alert Warning

Alert Mono

Skeleton

Skeleton is used to show a loading state. It is used to add default skeleton, pagination skeleton, table default skeleton, spinner screen and more.

Default Skeleton

Pagination Skeleton

Table Default Skeleton

Spinner Screen

Navigation

Navigation is used to navigate between pages. It is used to add bottom navigation, header navigation and settings navigation.

Bottom Navigation

Header Navigation

Settings Navigation

Containers

Containers are used to wrap the content of the page. They are used to add copied content, tooltip content, pretty container, number format, etc.

Block

Block children

Image Lazy with empty image

Image Lazy with image

Horizontal Container

children 1

children 2

children 3

children 4

children 5

children 6

children 7

children 8

children 9

children 10

Ref Sticky Container

Sticky Top

Content

Sticky Bottom

Copy Container

Copy Container children

Tooltip Container

Tooltip children

Pretty Container

Pretty Container Title

{
  "name": "John Doe",
  "age": 30
}

Number Format

1 000 000.22

Inputs

Select Field

Select field is a select input field with a label, placeholder, error message, hint text, required flag, read only flag, disabled flag, options and value.

Empty

Choose value

Custom Empty

Choose value

With options

Choose value

Loading

Choose value

Disabled

Choose value

Update by selected

Choose value

Max selected 2

Choose value

With Error

Choose value

Select error

Input Field

Input field is a text input field with a label, placeholder, error message, hint text, required flag, read only flag, disabled flag, email type, password type, number type and value.

Input Field

Input Field Error

Input Field Hint

Input Field Required *

Input Field Read Only

Input Field Disabled

Input Field Email

Input Field Password

Input Field Number

Input Field Value

Input Field Value With Content

Text Area Field

Text area field is a text area input field with a label, placeholder, error message, hint text, required flag, read only flag, disabled flag, max length and value.

Text Area Field

Text Area Field Max Length

250

Text Area Field Error

Text Area Field Hint

Text Area Field Required *

Text Area Field Read Only

Text Area Field Disabled

Table

Customization for columns, rows and pagination. Choose what columns you need to display by using component props.

Name	Age	Is Active
John Doe	20	true
Jane Doe	21	false
John Smith	22	true