Scroll to load 15 JGuang UI previews
60 componentsViewing Base UI
Actions
Buttons, menus, and direct user actions.
7 components
Scroll to load 12 JGuang UI previews
命令面板 / Command
Command menu for search and quick actions.
Scroll to load 6 JGuang UI previews
Scroll to load 11 JGuang UI previews
Scroll to load 13 JGuang UI previews
切换按钮 / Toggle
A two-state button that can be either on or off.
Scroll to load 6 JGuang UI previews
切换按钮组 / Toggle Group
A set of two-state buttons that can be toggled on or off.
Scroll to load 8 JGuang UI previews
Feedback
Status, progress, loading, and notification patterns.
8 components
提示 / Alert
Displays a callout for user attention.
Scroll to load 6 JGuang UI previews
徽标 / Badge
Displays a badge or a component that looks like a badge.
Scroll to load 7 JGuang UI previews
空状态 / Empty
Use the Empty component to display an empty state.
Scroll to load 7 JGuang UI previews
标记 / Marker
Displays an inline status, system note, bordered row, or labeled separator in a conversation.
Scroll to load 8 JGuang UI previews
进度条 / Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Scroll to load 4 JGuang UI previews
骨架屏 / Skeleton
Use to show a placeholder while content is loading.
Scroll to load 7 JGuang UI previews
轻提示 / Sonner
An opinionated toast component for React.
Scroll to load 4 JGuang UI previews
加载指示器 / Spinner
An indicator that can be used to show a loading state.
Scroll to load 8 JGuang UI previews
Forms
Inputs, selection controls, and field composition.
13 components
复选框 / Checkbox
A control that allows the user to toggle between checked and not checked.
Scroll to load 8 JGuang UI previews
组合框 / Combobox
Autocomplete input with a list of suggestions.
Scroll to load 12 JGuang UI previews
字段 / Field
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Scroll to load 13 JGuang UI previews
输入框 / Input
A text input component for forms and user data entry with built-in styling and accessibility features.
Scroll to load 15 JGuang UI previews
输入框组 / Input Group
Add addons, buttons, and helper content to inputs.
Scroll to load 14 JGuang UI previews
验证码输入 / Input OTP
Accessible one-time password component with copy-paste functionality.
Scroll to load 10 JGuang UI previews
标签 / Label
Renders an accessible label associated with controls.
Scroll to load 3 JGuang UI previews
原生选择器 / Native Select
A styled native HTML select element with consistent design system integration.
Scroll to load 5 JGuang UI previews
单选框组 / Radio Group
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Scroll to load 7 JGuang UI previews
选择器 / Select
Displays a list of options for the user to pick from—triggered by a button.
Scroll to load 7 JGuang UI previews
滑块 / Slider
An input where the user selects a value from within a given range.
Scroll to load 7 JGuang UI previews
开关 / Switch
A control that allows the user to toggle between checked and not checked.
Scroll to load 7 JGuang UI previews
多行输入框 / Textarea
Displays a form textarea or a component that looks like a textarea.
Scroll to load 6 JGuang UI previews
Data display
Structured content, media, messages, and data views.
10 components
头像 / Avatar
An image element with a fallback for representing the user.
Scroll to load 10 JGuang UI previews
气泡 / Bubble
Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.
Scroll to load 9 JGuang UI previews
日历 / Calendar
A calendar component that allows users to select a date or a range of dates.
Scroll to load 11 JGuang UI previews
卡片 / Card
Displays a card with header, content, and footer.
Scroll to load 6 JGuang UI previews
轮播 / Carousel
A carousel with motion and swipe built using Embla.
Scroll to load 7 JGuang UI previews
图表 / Chart
Beautiful charts. Built using Recharts. Copy and paste into your apps.
Scroll to load 8 JGuang UI previews
项目 / Item
A versatile component for displaying content with media, title, description, and actions.
Scroll to load 11 JGuang UI previews
键盘按键 / Kbd
Used to display textual user input from keyboard.
Scroll to load 6 JGuang UI previews
消息 / Message
Displays a message in a conversation, with optional avatar, header, footer, and alignment.
Scroll to load 6 JGuang UI previews
表格 / Table
A responsive table component.
Scroll to load 4 JGuang UI previews
Overlays
Dialogs, popovers, sheets, and contextual surfaces.
7 components
警告对话框 / Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Scroll to load 7 JGuang UI previews
对话框 / Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Scroll to load 6 JGuang UI previews
抽屉 / Drawer
A drawer component for React.
Scroll to load 7 JGuang UI previews
悬停卡片 / Hover Card
For sighted users to preview content available behind a link.
Scroll to load 4 JGuang UI previews
弹出框 / Popover
Displays rich content in a portal, triggered by a button.
Scroll to load 5 JGuang UI previews
侧边面板 / Sheet
Extends the Dialog component to display content that complements the main content of the screen.
Scroll to load 4 JGuang UI previews
工具提示 / Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Scroll to load 5 JGuang UI previews
Layout & utilities
Layout primitives and supporting interaction utilities.
7 components
宽高比 / Aspect Ratio
Displays content within a desired ratio.
Scroll to load 4 JGuang UI previews
附件 / Attachment
Displays a file or image attachment with media, metadata, upload state, and actions.
Scroll to load 6 JGuang UI previews
文字方向 / Direction
A provider component that sets the text direction for your application.
Scroll to load 1 JGuang UI previews
消息滚动区 / Message Scroller
A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.
Scroll to load 11 JGuang UI previews
可调整面板 / Resizable
Accessible resizable panel groups and layouts with keyboard support.
Scroll to load 4 JGuang UI previews
滚动区域 / Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
Scroll to load 3 JGuang UI previews
分隔线 / Separator
Visually or semantically separates content.
Scroll to load 5 JGuang UI previews