基础组件
按钮、输入、选择器、模态框等高保真基础原语总览。
日常搭建界面用的基础积木:表单、反馈、导航与浮层。安装示例:
npx @joyui/cli add button input select modal --yesFAQs and settings that open in place.
Dismissible banner for product news.
User photo with initials fallback.
Path trail with collapsing levels.
Primary, secondary, and danger actions.
Fused row of selectable buttons.
Slide through cards with snap, arrows and dots.
Animated tick, card variant, two sizes.
Compact removable filter tokens.
The little ×, done properly.
Every page and action behind ⌘K.
Right-click actions, with submenus.
Pick by eye, by hex, or from presets.
Type to filter a list, then pick.
A month on the page for dates and ranges.
Popover calendar for single dates.
Single, double, and filled content separators.
Side panels and bottom sheets from any edge.
Composable menus - teams, models, actions.
Drag, validate, and track upload progress.
Square action button, icon only.
Text field with addons and validation.
One-time-code boxes with paste and autofill.
Inline text action styled like a link.
Usage against a limit, toned as it fills.
Dialogs and alert dialogs over a dimmed page.
Status messages with icons, avatars, and actions.
Numbers with steppers, units, and limits.
Page numbers with truncation.
Rich content anchored to a trigger, arrow optional.
Bars and rings, determinate or sweeping.
Gradient dot, card variant, two sizes.
Sliding pill option switcher.
Type to filter, Escape to clear.
Single-choice listbox with search.
Placeholders that blur into real content.
Single-value and min/max range selection.
Sign-in buttons for 24 providers, logos included.
Layered orbiting light for work in progress.
On/off toggle with spring motion.
Sortable columns, sticky header.
Underline and pill tab lists.
Tags to filter by, pick from, or remove.
Multiline field with auto-grow and character count.
Times typed segment by segment.
toast() from anywhere, stacked and timed.
Nested folders with selection and keyboard navigation.
Positioned hints on hover and focus.