# shadwire 0.2.0 shadcn/ui components for Ruby on Rails, delivered as source your app owns. Components are copied into the app by the CLI; there is no runtime dependency on Shadwire. ## Install gem install shadwire # or: bundle add shadwire --group development shadwire init # writes shadwire.json and the shared base files shadwire add # installs a component and its dependencies Run `shadwire status --json` in an app for its context: stack, installed components, and the ui_* helpers that actually exist. Run `shadwire info --json` for a component's full API before using it. Full API reference for every component: llms-full.txt ## Components (58) - button — Any clickable action. Use tag: :a for a link that looks like a button, size: :icon for icon-only. For a set of related actions use button-group; for a menu of actions use dropdown-menu. - badge — Non-interactive status or metadata next to content. For a clickable pill use button with size: :sm; for a keyboard key use kbd. - card — Grouping related content into a bordered surface. For a compact list row use item; for a placeholder state use empty. - alert — Persistent inline messages inside the page. For a message that interrupts the user use alert-dialog; for transient feedback use sonner. - separator — Dividing sections or menu groups. Inside a menu prefer that menu's own separator (ui_dropdown_menu_separator, ui_context_menu_separator). - avatar — Representing a person or account. Always supply fallback for when the image fails to load. - accordion — Several collapsible sections, typically FAQs. For a single collapsible region use collapsible; for switching between peer views use tabs. - scroll-area — Constraining a long list or panel to a fixed height with consistent scrollbars across browsers. - icon — Any icon. Names are Lucide kebab-case. Decorative by default (aria-hidden); pass label: when the icon carries meaning on its own. - input — Free-text entry. For multi-line use textarea; with an addon or button attached use input-group; wrap in field for a label and error. - label — Labelling a standalone control. Inside a field block prefer ui_field_label, which wires the description and error for you. - textarea — Free-text entry spanning several lines. For one line use input. - checkbox — Independent on/off choices, or multi-select in a list. For a single setting that applies immediately use switch; for one-of-many use radio-group. - radio-group — Picking exactly one of a few visible options. For many options use select; for a compact toolbar-style choice use toggle-group. - switch — On/off settings, especially ones that apply instantly. For a value submitted with a form use checkbox. - skeleton — Preserving layout during loading. For an indeterminate inline busy indicator use spinner; for measurable progress use progress. - progress — Progress you can measure. When the duration is unknown use spinner; when you are waiting on content use skeleton. - table — Presenting rows of data you render yourself. For built-in sorting, filtering, pagination and row selection use data-table. - breadcrumb — Showing where the user is in a nested structure. For moving between top-level sections use navigation-menu. - pagination — Paging through server-rendered result sets. The data-table component brings its own pagination. - tabs — Alternate views of comparable content. Triggers must live inside ui_tabs_list. For expanding sections that can be open at once use accordion. - dialog — Focused tasks that interrupt the current flow. For a destructive confirmation use alert-dialog; for a side panel use sheet; for a bottom sheet use drawer. Always include ui_dialog_title, visually hidden if needed. - alert-dialog — Confirming destructive or irreversible actions — it cannot be dismissed by clicking outside. For ordinary modal content use dialog. - sheet — Secondary content or forms alongside the page, anchored to an edge. For a centred modal use dialog; for app navigation use sidebar. - tooltip — Naming an icon-only control or adding a brief hint. Never put interactive content inside — use popover or hover-card for that. - popover — Rich or interactive content anchored to a control, opened by click. For a plain hint use tooltip; for a list of actions use dropdown-menu. - dropdown-menu — Row actions, overflow menus, and account menus. For right-click use context-menu; for an application menu bar use menubar; for choosing a form value use select. - select — Choosing a single form value from many options. For a searchable list use combobox; for the plain browser control use native-select; for a few visible options use radio-group. - sidebar — Primary application navigation. Wrap the app in ui_sidebar_provider and put page content in ui_sidebar_inset. For a temporary edge panel use sheet. - sidebar-01 — Scaffolding a full dashboard page rather than assembling the sidebar yourself. Install the sidebar component instead when you want to compose your own layout. - aspect-ratio — Keeping images, video, or embeds at a consistent shape while they scale. - spinner — Waits of unknown length, including inside a button. For measurable progress use progress; for content placeholders use skeleton. - kbd — Documenting keyboard shortcuts. Inside a menu row prefer that menu's shortcut helper, such as ui_dropdown_menu_shortcut. - empty — Empty lists, no search results, or first-run states. For loading use skeleton. - item — List rows such as settings, files, or people. For a larger bordered surface use card. - input-group — Prefixes, suffixes, or buttons attached to a field. Use ui_input_group_input or ui_input_group_textarea inside, never a bare input. - button-group — Segmenting related actions such as previous/next. For selecting among options use toggle-group. - field — The standard wrapper for every form control — never lay out form rows with bare divs. Group related fields with ui_field_group, and related checkboxes or radios with ui_field_set plus ui_field_legend. - native-select — When you want native mobile pickers and no JavaScript. For a styled listbox use select; for search use combobox. - collapsible — One show/hide region. For several coordinated sections use accordion. - toggle — A single on/off control in a toolbar, such as bold. For several related toggles use toggle-group; for a settings switch use switch. - toggle-group — Choosing between two to seven options in a compact toolbar. For form semantics use radio-group; for actions use button-group. - slider — Imprecise numeric input such as volume or price. For an exact number use input with type: :number. - hover-card — Previewing linked content, such as a user profile. For a short hint use tooltip; for click-triggered content use popover. - input-otp — Verification codes split into boxes. For ordinary text use input. - drawer — Mobile-friendly overlays anchored to the bottom edge. For a side panel use sheet; for a centred modal use dialog. - context-menu — Right-click actions on an element. For a button-triggered menu use dropdown-menu. - menubar — Desktop-style application menus such as File and Edit. For a single button menu use dropdown-menu; for site navigation use navigation-menu. - navigation-menu — Primary site navigation in a header. For application menus use menubar; for showing location use breadcrumb. - command — Command palettes and searchable pickers. Put it inside dialog for a ⌘K palette; combine with popover for a combobox. - calendar — Showing an inline month view, for a single date or a range. For a date field that opens the grid in a popover use date-picker. - resizable — Split layouts with user-adjustable panes, such as a list and detail view. - carousel — Browsing images or cards one at a time. For a scrollable region without slide semantics use scroll-area. - combobox — Choosing one option from a long list where typing to filter matters. For short lists use select; for the native control use native-select. This item installs its parts rather than a Ui::ComboboxComponent — compose them yourself. - date-picker — Picking a date in a form: as a button, as a typed text field, as a range, or as a date of birth. For an always-visible month grid use calendar. There is no Ui::DatePickerComponent — this item installs the parts plus the ui-date-picker controller that keeps the field and the calendar in step, and you compose them. - sonner — Brief confirmations that do not need acknowledgement. For messages that stay on the page use alert; for ones requiring a decision use alert-dialog. - chart — Visualising series data. Pins chart.js via importmap and needs Stimulus. For plain tabular numbers use table. - data-table — Tabular data that needs interaction out of the box. When you only need markup and styling use table.