shadcn-rails

Component Showcase

A comprehensive gallery of all shadcn-rails components.

Buttons & Actions

Interactive button and action components.

Button

Shadcn::ButtonComponent

Displays a button with various styles and sizes.

Toggle

Shadcn::ToggleComponent

A two-state button that can be either on or off.

Toggle Group

Shadcn::ToggleGroupComponent

A group of toggle buttons.

Form Inputs

Form control components.

Input

Shadcn::InputComponent

Displays a form input field.

Textarea

Shadcn::TextareaComponent

Displays a multi-line text input.

Label

Shadcn::LabelComponent

Renders an accessible label for form controls.

Checkbox

Shadcn::CheckboxComponent

A control that toggles a boolean state.

Switch

Shadcn::SwitchComponent

A control for toggling between two states.

Slider

Shadcn::SliderComponent

An input for selecting a value from a range.

Select

Shadcn::SelectComponent

Displays a list of options for the user to pick from.

Data Display

Components for displaying content and data.

Badge

Shadcn::BadgeComponent

Displays a badge with various styles.

Default Secondary Destructive Outline

Avatar

Shadcn::AvatarComponent

An image element with fallback for representing a user.

shadcn JD JS

Card

Shadcn::CardComponent

Displays a card with header, content, and footer.

Card Title

Card description goes here

This is the main content of the card.

Table

Shadcn::TableComponent

A responsive table component.

NameStatusAmount
John DoeActive$250.00
Jane SmithPending$150.00

Progress

Shadcn::ProgressComponent

Displays a progress bar.

Skeleton

Shadcn::SkeletonComponent

Used to show a placeholder while content is loading.

Aspect Ratio

Shadcn::AspectRatioComponent

Displays content within a fixed aspect ratio.

16:9

Feedback

Components for user feedback.

Alert

Shadcn::AlertComponent

Displays an important message to the user.

Tooltip

Shadcn::TooltipComponent

A popup that displays information on hover.

Overlays

Modal and popup components.

Dialog

Shadcn::DialogComponent

A modal dialog that appears in front of the page.

Alert Dialog

Shadcn::AlertDialogComponent

A modal dialog for important confirmation actions.

Sheet

Shadcn::SheetComponent

A slide-out panel from the edge of the screen.

Drawer

Shadcn::DrawerComponent

A mobile-optimized modal panel.

Popover

Shadcn::PopoverComponent

Displays rich content in a portal.

Hover Card

Shadcn::HoverCardComponent

Displays a card when hovering over an element.

Dropdown Menu

Shadcn::DropdownMenuComponent

Displays a menu when triggered.