UI Kit

Мы добавили больше компонентов, чтобы помочь вам быстрее собрать следующий проект. Все компоненты доступны на этой странице.

В качестве основы для компонентов мы используем shadcn/ui. Исходный код компонентов вы можете найти вshadcn/ui репозитории или 21st.dev.

Typography

Typography используется для оформления текста на странице: 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 и 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 используется для запуска действий. Доступны варианты: default, loading, disabled, outline, secondary, ghost, link, destructive, default sm, default sm-md, default lg, icon и input icon.

Alert

Alert используется для отображения сообщений. Доступны варианты: secondary, primary, destructive, success, info, warning и mono.

Alert Secondary

Alert Primary

Alert Destructive

Alert Success

Alert Info

Alert Warning

Alert Mono

Skeleton

Skeleton используется для отображения состояния загрузки: default skeleton, pagination skeleton, table default skeleton, spinner screen и другие.

Default Skeleton

Pagination Skeleton

Table Default Skeleton

Spinner Screen

Navigation

Navigation используется для переходов между страницами: bottom navigation, header navigation и settings navigation.

Bottom Navigation

Header Navigation

Settings Navigation

Containers

Containers используются как обертки для контента страницы: copied content, tooltip content, pretty container, number format и другое.

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

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

Гибкая настройка колонок, строк и пагинации. Выбирайте, какие колонки отображать, через props компонента.

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