Components
The components shipped by @murasakijs/ui.
@murasakijs/ui is the
component library the scaffold installs by default — built on React Aria
Components, styled with Tailwind CSS and class-variance-authority, using
the same cn() conventions shadcn/ui users already know. These pages document
the real exported APIs; previews shown in a page render the published component.
See the Styling guide for how the library is wired into a scaffolded app (stylesheet import, Tailwind preset, dark mode).
Forms and controls
Button
Displays a button or a component that looks like a button.
Button Group
Groups related buttons into one visual unit.
Input
Displays a form input field or a component that looks like an input field.
Input Group
Combines an input with text, icons, or actions.
Label
Renders an accessible label for a form control.
Field
Composes a label, control, help text, and validation error.
Textarea
Displays a multi-line text input.
Checkbox
Lets the user toggle a checked state.
Radio Group
Lets the user select one option from a set.
Switch
Lets the user turn a setting on or off.
Slider
Selects one or more numeric values within a range.
Toggle
Switches a two-state button between pressed and unpressed.
Toggle Group
Groups toggles into a single- or multiple-selection control.
Select
Displays a list of options for the user to pick from—triggered by a button.
Native Select
Uses the operating system's native select control.
Data display
Badge
Displays a compact status or category label.
Card
Displays a card with header, content, and footer.
Avatar
Displays a user or entity image with a fallback.
Separator
Visually or semantically separates content.
Skeleton
Shows a placeholder while content is loading.
Table
Displays structured rows and columns of data.
Item
Composes a reusable row with media, content, and actions.
Empty
Explains an empty state and offers a useful next action.
Kbd
Displays a keyboard key or shortcut.
Scroll Area
Adds consistently styled scrollbars while preserving native scrolling.
Feedback
Alert
Calls attention to important information.
Progress
Shows completion progress for a task.
Spinner
Indicates that an operation is in progress.
Toast
Displays a brief, non-blocking status message.
Overlays and menus
Dialog
A window overlaid on either the primary window or another dialog window.
Alert Dialog
Requires an explicit decision before the user can continue.
Sheet
Displays complementary content in a panel anchored to the edge of the screen.
Popover
Displays rich content in a portal triggered by a control.
Hover Card
Previews supplemental content when a link is hovered or focused.
Tooltip
Displays contextual information when a control is hovered or focused.
Dropdown Menu
Displays a menu to the user, triggered by a button.
Context Menu
Displays actions for the right-clicked or keyboard-selected target.
Menubar
Presents a persistent, keyboard-navigable set of application menus.
Disclosure and navigation
Tabs
A set of layered sections of content, displayed one at a time.
Accordion
A vertically stacked set of interactive headings, each revealing a section of content.
Collapsible
Expands or collapses a single section of content.
Breadcrumb
Shows the current page's location in a hierarchy.
Command
A searchable command menu for keyboard-first actions.
Navigation Menu
Provides top-level navigation with optional flyout content.
Pagination
Navigates among pages in a long collection.