NextKity

UI Components Showcase

展示所有 shared/ui 基础组件及其变体

Buttons

Button Variants
所有按钮变体和尺寸

Cards

Card Title
Card Description

Card Content goes here

Another Card

Content with no footer

Card with only content

Form Elements

Input Fields

Badges & Alerts

Badges
Default
Secondary
Destructive
Outline
Alerts

Dialogs

Progress & Slider

Progress Bar
Slider

Value: 50

Avatar & Skeleton

Avatars
CNJDAB
Skeleton

Table

A list of sample data
NameStatusRoleActions
John Doe
Active
Admin
Jane Smith
Active
User
Bob Johnson
Inactive
User

Dropdown Menu

Popover & Tooltip

Sheet

Separators & Dividers

Radix Primitives

An open-source UI component library.

Blog
Docs
Source

Scroll Area

Scrollable Content
Item 1 - This is a scrollable content area
Item 2 - This is a scrollable content area
Item 3 - This is a scrollable content area
Item 4 - This is a scrollable content area
Item 5 - This is a scrollable content area
Item 6 - This is a scrollable content area
Item 7 - This is a scrollable content area
Item 8 - This is a scrollable content area
Item 9 - This is a scrollable content area
Item 10 - This is a scrollable content area
Item 11 - This is a scrollable content area
Item 12 - This is a scrollable content area
Item 13 - This is a scrollable content area
Item 14 - This is a scrollable content area
Item 15 - This is a scrollable content area
Item 16 - This is a scrollable content area
Item 17 - This is a scrollable content area
Item 18 - This is a scrollable content area
Item 19 - This is a scrollable content area
Item 20 - This is a scrollable content area

Tabs

Account

Make changes to your account here.

Calendar

Single Date Selection
选择一个日期
June 2026

已选择: 6/15/2026

Date Range Selection
选择日期范围
June 2026
Calendar with Popover
在弹出框中显示日历

Toast

Toast Notifications
各种类型的 Toast 通知