Skip to Content
JoyUI

基础组件

按钮、输入、选择器、模态框等高保真基础原语总览。

日常搭建界面用的基础积木:表单、反馈、导航与浮层。安装示例:

npx @joyui/cli add button input select modal --yes
Accordion

FAQs and settings that open in place.

Announcement

Dismissible banner for product news.

Avatar

User photo with initials fallback.

Breadcrumb

Path trail with collapsing levels.

Button

Primary, secondary, and danger actions.

Button Group

Fused row of selectable buttons.

Carousel

Slide through cards with snap, arrows and dots.

Checkbox

Animated tick, card variant, two sizes.

Chip

Compact removable filter tokens.

Close Button

The little ×, done properly.

Command Palette

Every page and action behind ⌘K.

Context Menu

Right-click actions, with submenus.

Color Picker

Pick by eye, by hex, or from presets.

Combobox

Type to filter a list, then pick.

Date Calendar

A month on the page for dates and ranges.

Date Picker

Popover calendar for single dates.

Divider

Single, double, and filled content separators.

Drawer

Side panels and bottom sheets from any edge.

Dropdown

Composable menus - teams, models, actions.

File Upload

Drag, validate, and track upload progress.

Icon Button

Square action button, icon only.

Input

Text field with addons and validation.

Input OTP

One-time-code boxes with paste and autofill.

Link Button

Inline text action styled like a link.

Meter

Usage against a limit, toned as it fills.

Modal

Dialogs and alert dialogs over a dimmed page.

Notification

Status messages with icons, avatars, and actions.

Number Field

Numbers with steppers, units, and limits.

Pagination

Page numbers with truncation.

Popover

Rich content anchored to a trigger, arrow optional.

Progress

Bars and rings, determinate or sweeping.

Radio

Gradient dot, card variant, two sizes.

Segmented Control

Sliding pill option switcher.

Search Field

Type to filter, Escape to clear.

Select

Single-choice listbox with search.

Skeleton

Placeholders that blur into real content.

Slider

Single-value and min/max range selection.

Social Button

Sign-in buttons for 24 providers, logos included.

Spinner

Layered orbiting light for work in progress.

Switch

On/off toggle with spring motion.

Table

Sortable columns, sticky header.

Tabs

Underline and pill tab lists.

Tag Group

Tags to filter by, pick from, or remove.

Textarea

Multiline field with auto-grow and character count.

Time Field

Times typed segment by segment.

Toast

toast() from anywhere, stacked and timed.

Tree View

Nested folders with selection and keyboard navigation.

Tooltip

Positioned hints on hover and focus.