UI Component Preview

A comprehensive preview of all UI components following Apple Human Interface guidelines.

Buttons

Button components and variations

Button Variants
Button Sizes
Button with Icon
Button Disabled
ButtonGroup
ButtonGroup with Separator
ButtonGroup Vertical
Toggle
Toggle Sizes

Inputs

Form input components

Input
Textarea
Select
Checkbox
Switch
RadioGroup
Label

Display

Data display components

Card
Card Title
Card description goes here

Card content area with some example text.

AppleCard

Default AppleCard

Hover AppleCard

Badge
DefaultSecondaryDestructiveOutline
Avatar
CNXLSM
Skeleton
Empty
No results found
Try adjusting your search or filters.
Separator
Item 1
Item 2
Left
Right
Table
NameStatusAmount
John DoeActive$250.00
Jane SmithPending$150.00

Dialogs

Modal and overlay components

Dialog
AlertDialog
Sheet
Drawer
Popover
Tooltip

Typography

Text and heading components

Title Levels

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Text Types
Primary textSecondary textSuccess textWarning textDanger text
Text Sizes
Small textBase textLarge text
Text Weights
Normal weightMedium weightSemibold weightBold weight
Paragraph

This is a primary paragraph. It provides a way to display longer blocks of text with proper line height and spacing.

This is a secondary small paragraph. It's useful for supporting text or less prominent content.

Form

Form components with validation

Complete Form

This is your public display name.

Layout & Utilities

Layout and utility components

ScrollArea

Tags

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Pagination
BackToTop

Scroll down on the page to see the BackToTop button appear in the bottom right corner.

Data Table

Advanced data table with sorting, filtering, and pagination

Basic Data Table
金额
状态
ken99@example.com
¥316.00
success
abe45@example.com
¥242.00
success
monserrat44@example.com
¥837.00
processing
silas22@example.com
¥874.00
success
carmella@example.com
¥721.00
failed
8

每页行数

1 / 2
Data Table with Toolbar
成功
ken99@example.com
¥316.00
成功
abe45@example.com
¥242.00
处理中
monserrat44@example.com
¥837.00
成功
silas22@example.com
¥874.00
失败
carmella@example.com
¥721.00
待处理
john@example.com
¥150.00
处理中
jane@example.com
¥500.00
成功
mike@example.com
¥280.00
8

每页行数

1 / 1
Data Table without Pagination
金额
状态
ken99@example.com
¥316.00
success
abe45@example.com
¥242.00
success
monserrat44@example.com
¥837.00
processing