### Manual Installation via Git Clone
Source: https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/installation.html.md
Clone the shadcn-rails repository and run bundle install and ./bin/dev for manual setup and local testing.
```sh
git clone https://github.com/aviflombaum/shadcn-rails.git
cd shadcn-rails
bundle install
./bin/dev
```
--------------------------------
### Install Tailwind CSS
Source: https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/installation.html.md
Run the Tailwind CSS installation generator to set up the necessary configuration files and directories.
```ruby
./bin/rails tailwindcss:install
```
--------------------------------
### Install shadcn-ui Gem and Tailwind Animate
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Add the shadcn-ui gem to your Gemfile, install it, and then install tailwindcss-animate using npm.
```sh
bundle add shadcn-ui
bundle install
npm install -d tailwindcss-animate
```
--------------------------------
### Add shadcn-ui Gem
Source: https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/installation.html.md
Add the shadcn-ui gem to your Gemfile and install it.
```sh
bundle add shadcn-ui
bundle install
```
--------------------------------
### Install Tailwind CSS Animate NPM Package
Source: https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/installation.html.md
Install the tailwindcss-animate npm package, which is required for component styling. This can be done via npm or by ensuring a package.json exists.
```sh
npm install -D tailwindcss-animate
```
--------------------------------
### Render Table Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
The `render_table` helper constructs accessible data tables. Use `table_head`, `table_header`, `table_body`, `table_row`, and `table_column` to structure the table content. This example shows rendering a list of users with edit links.
```erb
<%= render_table do %>
<%= table_head do %>
<%= table_header "Name" %>
<%= table_header "Email" %>
<%= table_header "Role" %>
<%= table_header "Actions" %>
<% end %>
<%= table_body do %>
<% @users.each do |user|
<%= table_row do %>
<%= table_column user.name %>
<%= table_column user.email %>
<%= table_column user.role.humanize %>
<%= table_column do %>
<%= render_button "Edit", variant: :ghost, as: :a, href: edit_user_path(user) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
```
--------------------------------
### Configure tailwind.config.js
Source: https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/installation.html.md
Customize your Tailwind CSS configuration by defining content paths, theme settings, and extending default styles. This example includes color palettes, typography, and animation configurations.
```javascript
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
darkMode: ["class"],
content: [
"./public/*.html",
"./app/helpers/**/*.rb",
"./app/javascript/**/*.js",
"./app/views/**/*.{erb,haml,html,slim}",
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
fontFamily: {
sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/typography"),
require("@tailwindcss/container-queries"),
require("tailwindcss-animate"),
],
};
```
--------------------------------
### List Available shadcn-ui Components
Source: https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/generators.html.md
Run this command to see a list of all available shadcn-ui components that can be generated.
```ruby
rails g shadcn-ui
```
--------------------------------
### List All Available shadcn-ui Components
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Run the generator without arguments to list all available shadcn-ui components that can be generated.
```sh
rails generate shadcn-ui
```
--------------------------------
### Tailwind CSS Configuration with shadcn/ui
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Configure your tailwind.config.js to include shadcn.tailwind.js and necessary plugins like tailwindcss-animate.
```js
const defaultTheme = require("tailwindcss/defaultTheme");
const shadcnConfig = require("./shadcn.tailwind.js");
module.exports = {
content: [
"./public/*.html",
"./app/helpers/**/*.rb",
"./app/javascript/**/*.js",
"./app/views/**/*.{erb,haml,html,slim}",
],
theme: {
extend: {
fontFamily: {
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/typography"),
require("@tailwindcss/container-queries"),
require("tailwindcss-animate"),
],
...shadcnConfig,
};
```
--------------------------------
### Render Tabs Interface
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Use `render_tabs` to create a tabbed interface. Define tabs with `tab_list` and `tab`, and their content with `tab_panels` and `tab_panel`. Ensure `active` attributes are correctly set for initial display.
```erb
<%= render_tabs do %>
<% tab_list do %>
<%= tab "Account", active: true, id: "tab_account" %>
<%= tab "Password", id: "tab_password" %>
<% end %>
<% tab_panels do %>
<%= tab_panel active: true, id: "tab_account" do %>
Manage your account details here.
<% end %>
<%= tab_panel id: "tab_password" do %>
<%= render_input name: "current_password", label: "Current Password", type: :password %>
<%= render_input name: "new_password", label: "New Password", type: :password %>
<%= render_button "Update Password" %>
<% end %>
<% end %>
<% end %>
```
--------------------------------
### Alternative shadcn.tailwind.js Integration
Source: https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/installation.html.md
Use shadcnConfig directly as your Tailwind configuration if you only need the default settings provided by shadcn-rails.
```js
const shadcnConfig = require("./shadcn.tailwind.js");
module.exports = {
...shadcnConfig,
};
```
--------------------------------
### Generate a Specific shadcn-ui Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Use the rails generate command to copy the source files for a specific component, like 'button', into your Rails application.
```sh
rails generate shadcn-ui button
```
--------------------------------
### Integrate shadcn.tailwind.js into tailwind.config.js
Source: https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/installation.html.md
Require and expand the shadcn.tailwind.js configuration within your project's tailwind.config.js file to apply necessary settings.
```js
const defaultTheme = require("tailwindcss/defaultTheme");
const shadcnConfig = require("./shadcn.tailwind.js");
module.exports = {
content: [
"./public/*.html",
"./app/helpers/**/*.rb",
"./app/javascript/**/*.js",
"./app/views/**/*.{erb,haml,html,slim}",
],
theme: {
extend: {
fontFamily: {
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/typography"),
require("@tailwindcss/container-queries"),
],
...shadcnConfig,
};
```
--------------------------------
### Render Input Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
The `render_input` helper creates styled text inputs. It supports labels, placeholders, types, and standard HTML attributes like `required` and `autofocus`. Use the `variant` option for different styles, such as `:borderless`.
```erb
<%# Basic labeled text input %>
<%= render_input name: "email", label: "Email Address", type: :email, placeholder: "you@example.com" %>
<%# Required input with autofocus %>
<%= render_input name: "username", label: "Username", required: true, autofocus: true %>
<%# Borderless variant (e.g. for inline editing) %>
<%= render_input name: "search", placeholder: "Search...", variant: :borderless %>
<%# Disabled input with pre-filled value %>
<%= render_input name: "plan", label: "Current Plan", value: "Pro", disabled: true %>
```
--------------------------------
### Dialog Component Helper
Source: https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/helpers.html.md
Defines the render_dialog, dialog_trigger, and dialog_content methods for the dialog component. The render_dialog method captures block content and passes it to the dialog partial. dialog_trigger and dialog_content use content_for to manage inner content.
```ruby
module Components::DialogHelper
def render_dialog(**options, &block)
content = capture(&block) if block
render "components/ui/dialog", content: content, **options
end
def dialog_trigger(&block)
content_for :dialog_trigger, capture(&block), flush: true
end
def dialog_content(&block)
content_for :dialog_content, capture(&block), flush: true
end
end
```
--------------------------------
### `render_tooltip` — Tooltip Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a hover-triggered tooltip with a trigger and floating content.
```APIDOC
## `render_tooltip` — Tooltip Component
Renders a hover-triggered tooltip with a trigger and floating content.
### Usage Example:
```erb
<%= render_tooltip do %>
<% tooltip_trigger do %>
<%= render_button "?", variant: :ghost %>
<% end %>
<% tooltip_content class: "max-w-xs" do %>
Your password must be at least 8 characters.
<% end %>
<% end %>
```
```
--------------------------------
### Render Accordion Component
Source: https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/installation.html.md
Use this helper to render an accordion component within your views after copying the necessary files. It accepts a title and description for the accordion content.
```erb
<%%= render_accordion title: "Did you know?",
description: "You can wrap shadcn helpers in any
component library you want!" %>
```
--------------------------------
### Render Tooltip Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a hover-triggered tooltip. Requires a trigger and floating content.
```erb
<%= render_tooltip do %>
<% tooltip_trigger do %>
<%= render_button "?", variant: :ghost %>
<% end %>
<% tooltip_content class: "max-w-xs" do %>
Your password must be at least 8 characters.
<% end %>
<% end %>
```
--------------------------------
### Render a Default Button
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Render a default primary button with the text 'Save Changes' using the `render_button` helper.
```erb
<%# Default primary button %>
<%= render_button "Save Changes" %>
```
--------------------------------
### Shadcn Form Builder with render_form_with and render_form_for
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Wraps Rails' form builders to automatically render styled shadcn components with error states. Use for new records or editing existing ones.
```erb
<%# New record form %>
<%= render_form_with model: @user, url: users_path do |f| %>
<% end %>
```
```erb
<%# Editing an existing record (errors shown automatically via error_class) %>
<%= render_form_for @post do |f| %>
<%= f.label :title %>
<%= f.text_field :title %> <%# Adds "error" CSS class when @post.errors[:title].any? %>
<%= f.submit "Update Post", variant: :secondary %>
<% end %>
```
--------------------------------
### Render Progress Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
The `render_progress` helper creates a progress bar. The `value` parameter indicates the completion percentage (0-100). This component can be used standalone or within other components like `render_card` to show status.
```erb
<%# 65% complete %>
<%= render_progress value: 65 %>
<%# Inside a card to show upload status %>
<%= render_card title: "Uploading..." do %>
<%= render_progress value: @upload.percent_complete %>
<% end %>
```
--------------------------------
### Render Alert Component in Rails
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders an informational alert box with a title, optional description, icon, and semantic variants. Can use a string description or a block for richer content.
```erb
<%# Default alert with description string %>
<%= render_alert title: "Heads up!", description: "You can add components to your app using the cli." %>
```
```erb
<%# Destructive alert with block body %>
<%= render_alert title: "Error", variant: :destructive do %>
<% end %>
<%# Editing an existing record (errors shown automatically via error_class) %>
<%= render_form_for @post do |f| %>
<%= f.label :title %>
<%= f.text_field :title %> <%# Adds "error" CSS class when @post.errors[:title].any? %>
<%= f.submit "Update Post", variant: :secondary %>
<% end %>
```
```
--------------------------------
### Generate shadcn-ui Component
Source: https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/generators.html.md
Use this command to generate a specific shadcn-ui component in your Rails application. Re-running this generator will overwrite any manual changes made to the component files.
```ruby
rails generate shadcn-ui
```
--------------------------------
### Render Dropdown Menu Component in Rails
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a trigger-based dropdown menu with a label and a list of menu items. Supports labels, separators, and custom content within items.
```erb
<%= render_dropdown_menu do %>
<% dropdown_menu_trigger do %>
<%= render_button "Options", variant: :outline %>
<% end %>
<% dropdown_menu_label "My Account" %>
<% dropdown_menu_content do %>
<%= dropdown_menu_item "Profile" %>
<%= dropdown_menu_item "Billing" %>
<%= render_separator %>
<%= dropdown_menu_item do %>
<%= link_to "Sign out", destroy_user_session_path, method: :delete %>
<% end %>
<% end %>
<% end %>
```
--------------------------------
### Render Switch Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
The `render_switch` helper generates a toggle switch. It requires a label and accepts `id`, `name`, and `state` attributes. The `state` can be set to `"checked"` to pre-check the switch.
```erb
<%# Unchecked (default) %>
<%= render_switch "Enable notifications", id: "notifications", name: "user[notifications]" %>
<%# Pre-checked switch %>
<%= render_switch "Dark mode", id: "dark_mode", name: "user[dark_mode]", state: "checked" %>
```
--------------------------------
### Render Select Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
The `render_select` helper generates a styled native select element. Use a block DSL with `s.option` to define options, specifying `value` and `label`. You can set a default selection with the `selected` attribute and apply custom classes.
```erb
<%= render_select name: "country", selected: "us" do |s|
<%= s.option value: "us", label: "United States" %>
<%= s.option value: "ca", label: "Canada" %>
<%= s.option value: "gb", label: "United Kingdom" %>
<% end %>
<%# With custom class %>
<%= render_select name: "role", class: "w-full", selected: @user.role do |s|
<% User::ROLES.each do |role|
<%= s.option value: role, label: role.humanize %>
<% end %>
<% end %>
```
--------------------------------
### `render_toast` — Toast Notification Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a toast notification banner with an optional header, description, action, and destructive variant.
```APIDOC
## `render_toast` — Toast Notification Component
Renders a toast notification banner with an optional header, description, action, and destructive variant.
### Usage Examples:
```erb
<%# Default informational toast %>
<%= render_toast header: "Success", description: "Your profile has been updated." %>
<%# Destructive error toast %>
<%= render_toast header: "Error", description: "Could not save changes.", variant: :destructive %>
<%# Toast with action link %>
<%= render_toast header: "Undo?", action: link_to("Undo", undo_path, method: :post) %>
```
```
--------------------------------
### Render an Outline Button with Block Content
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Render an outline variant button that accepts block content, such as an SVG icon and text.
```erb
<%# Outline variant with block content %>
<%= render_button variant: :outline do %>
Upload File
<% end %>
```
--------------------------------
### Render a Ghost Button with Stimulus Data Attributes
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Render a ghost variant button and attach Stimulus.js data attributes for interactivity.
```erb
<%# Ghost button with data attributes for Stimulus %>
<%= render_button "Toggle", variant: :ghost, data: { controller: "toggle", action: "click->toggle#toggle" } %>
```
--------------------------------
### Render Alert Dialog Component in Rails
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a confirmation dialog with dedicated slots for trigger, content, cancel, and continue actions. Ideal for destructive operations requiring user confirmation.
```erb
<%= render_alert_dialog do %>
<% alert_dialog_trigger do %>
<%= render_button "Delete Record", variant: :destructive %>
<% end %>
<% alert_dialog_content do %>
Are you absolutely sure?
This action cannot be undone.
<% end %>
<% alert_dialog_cancel do %>
<%= render_button "Cancel", variant: :outline %>
<% end %>
<% alert_dialog_continue do %>
<%= link_to "Yes, delete", record_path(@record), method: :delete, class: "..." %>
<% end %>
<% end %>
```
--------------------------------
### Render Card Component in Rails
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a card container with optional title, subtitle, body, and footer sections. The body can accept a string or a block for complex content.
```erb
<%# Simple card with all sections as arguments %>
<%= render_card title: "Team Plan",
subtitle: "$29/month",
body: "Up to 10 members, advanced analytics, and priority support.",
footer: "Billed annually" %>
```
```erb
<%# Card with block body for rich content %>
<%= render_card title: "Recent Activity" do %>
<% @events.each do |event| %>
<%= event.description %>
<% end %>
<% end %>
```
--------------------------------
### `render_collapsible` — Collapsible Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a toggle-to-reveal section with a visible preview and a hidden body that expands on click.
```APIDOC
## `render_collapsible` — Collapsible Component
Renders a toggle-to-reveal section with a visible preview and a hidden body that expands on click.
### Usage Example:
```erb
<%= render_collapsible do %>
<% collapsible_preview do %>
Starred repositories (3)
<% end %>
<% collapsible_body do %>
shadcn/ui
tailwindlabs/tailwindcss
hotwired/stimulus
<% end %>
<% end %>
```
```
--------------------------------
### Render Badge Component in Rails
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a small inline label pill for status indicators, tags, or counts. Supports different variants like destructive, outline, and secondary.
```erb
<%# Default badge %>
<%= render_badge "New" %>
```
```erb
<%# Destructive badge for error states %>
<%= render_badge "Failed", variant: :destructive %>
```
```erb
<%# Outline badge with custom class %>
<%= render_badge "Beta", variant: :outline, class: "ml-2" %>
```
```erb
<%# Secondary badge %>
<%= render_badge "Pending", variant: :secondary %>
```
--------------------------------
### Render Accordion Component in Rails
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a collapsible accordion with a trigger title and expandable description content. Supports simple title/description pairs or block-based content for customization.
```erb
<%# Simple title + description %>
<%= render_accordion title: "Is it accessible?",
description: "Yes. It adheres to the WAI-ARIA design pattern." %>
```
```erb
<%# Block-based with custom content in description area %>
<%= render_accordion title: "Can I customize it?" do %>
Yes — copy the files into your project and edit them freely.
<% end %>
```
```erb
<%# Using named content helpers for full control %>
<%= render_accordion do %>
<% accordion_title do %>Custom Title<% end %>
<% accordion_description do %>Rich description content here.<% end %>
<% end %>
```
--------------------------------
### Render Combobox Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a searchable select/combobox widget. Items are passed as an array, and the trigger button appearance can be customized.
```erb
<% frameworks = [
{ value: "rails", label: "Ruby on Rails" },
{ value: "django", label: "Django" },
{ value: "laravel", label: "Laravel" }
] %>
<%= render_combobox frameworks do %>
<% combobox_trigger do %>
<%= render_button "Select framework...", variant: :outline %>
<% end %>
<% end %>
```
--------------------------------
### Render Sheet (Slide-over Panel) Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a slide-over panel from the left or right edge. Requires a trigger and content slot.
```erb
<%# Left-sliding sheet (default) %>
<%= render_sheet direction: "left", width: "w-1/2" do %>
<% sheet_trigger do %>
<%= render_button "Open Menu", variant: :outline %>
<% end %>
<% sheet_content do %>
<% end %>
<% end %>
```
```erb
<%# Right-sliding sheet %>
<%= render_sheet direction: "right", width: "w-96" do %>
<% sheet_trigger do %>
<%= render_button "Cart (3)", variant: :ghost %>
<% end %>
<% sheet_content do %>
<%# cart items %>
<% end %>
<% end %>
```
--------------------------------
### Render Textarea Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Use `render_textarea` for multi-line text inputs. It accepts a `label`, `placeholder`, `rows` attribute, and standard HTML textarea attributes. It can also be pre-filled with a `value` and set to `readonly`.
```erb
<%# Simple textarea with label %>
<%= render_textarea name: "bio", label: "About You", placeholder: "Tell us about yourself..." %>
<%# Larger textarea, required %>
<%= render_textarea name: "message", label: "Message", rows: 6, required: true %>
<%# Pre-filled read-only textarea %>
<%= render_textarea name: "notes", value: @record.notes, readonly: true %>
```
--------------------------------
### `render_popover` — Popover Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a floating content panel anchored to a trigger element.
```APIDOC
## `render_popover` — Popover Component
Renders a floating content panel anchored to a trigger element.
### Usage Example:
```erb
<%= render_popover do %>
<% popover_trigger do %>
<%= render_button "More info", variant: :outline %>
<% end %>
<% popover_content class: "w-64" do %>
This action will permanently delete the record.
<% end %>
<% end %>
```
```
--------------------------------
### Render Label Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Use `render_label` to create styled HTML labels associated with form inputs. It takes a `name` attribute corresponding to the input's ID and a `label` text. Custom classes can be applied.
```erb
<%= render_label name: "user[email]", label: "Email Address" %>
<%= render_label name: "post[title]", label: "Post Title", class: "text-destructive" %>
```
--------------------------------
### Safely Merge Tailwind CSS Classes with `tw()`
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Use the `tw()` helper function to merge multiple Tailwind CSS class strings, resolving conflicts. It's available via ComponentsHelper.
```ruby
# In any helper or component
tw("px-4 py-2", "px-6") # => "py-2 px-6" (conflict resolved)
tw("bg-primary text-sm", nil, "text-lg") # => "bg-primary text-lg"
tw(ComponentsHelper::PRIMARY_CLASSES, "opacity-50")
# => "bg-primary text-primary-foreground hover:bg-primary/80 opacity-50"
```
--------------------------------
### Render Popover Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a floating content panel anchored to a trigger element. Use for contextual information or actions.
```erb
<%= render_popover do %>
<% popover_trigger do %>
<%= render_button "More info", variant: :outline %>
<% end %>
<% popover_content class: "w-64" do %>
This action will permanently delete the record.
<% end %>
<% end %>
```
--------------------------------
### Render Dialog (Modal) Component in Rails
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a modal dialog with a trigger element and a content area using `content_for`-style slots. Requires a trigger and content block.
```erb
<%= render_dialog do %>
<% dialog_trigger do %>
<%= render_button "Open Settings" %>
<% end %>
<% dialog_content do %>
Settings
Update your account preferences below.
<%= render_input name: "username", label: "Username", value: current_user.username %>
<%= render_button "Save", variant: :default %>
<% end %>
<% end %>
```
--------------------------------
### `render_sheet` — Sheet (Slide-over Panel) Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a slide-over panel from the left or right edge with a trigger and content slot.
```APIDOC
## `render_sheet` — Sheet (Slide-over Panel) Component
Renders a slide-over panel from the left or right edge with a trigger and content slot.
### Usage Examples:
```erb
<%# Left-sliding sheet (default) %>
<%= render_sheet direction: "left", width: "w-1/2" do %>
<% sheet_trigger do %>
<%= render_button "Open Menu", variant: :outline %>
<% end %>
<% sheet_content do %>
<% end %>
<% end %>
<%# Right-sliding sheet %>
<%= render_sheet direction: "right", width: "w-96" do %>
<% sheet_trigger do %>
<%= render_button "Cart (3)", variant: :ghost %>
<% end %>
<% sheet_content do %>
<%# cart items %>
<% end %>
<% end %>
```
```
--------------------------------
### Render Collapsible Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a toggle-to-reveal section. Provides a visible preview and an expandable hidden body.
```erb
<%= render_collapsible do %>
<% collapsible_preview do %>
Starred repositories (3)
<% end %>
<% collapsible_body do %>
shadcn/ui
tailwindlabs/tailwindcss
hotwired/stimulus
<% end %>
<% end %>
```
--------------------------------
### `render_combobox` — Combobox Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a searchable select/combobox widget. Items are passed as an array; a trigger block customizes the button appearance.
```APIDOC
## `render_combobox` — Combobox Component
Renders a searchable select/combobox widget. Items are passed as an array; a trigger block customizes the button appearance.
### Usage Example:
```erb
<% frameworks = [
{ value: "rails", label: "Ruby on Rails" },
{ value: "django", label: "Django" },
{ value: "laravel", label: "Laravel" }
] %>
<%= render_combobox frameworks do %>
<% combobox_trigger do %>
<%= render_button "Select framework...", variant: :outline %>
<% end %>
<% end %>
```
```
--------------------------------
### Render Checkbox Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Use `render_checkbox` to create styled checkboxes with associated labels. You can set the initial state using the `checked: true` attribute.
```erb
<%# Simple checkbox %>
<%= render_checkbox name: "terms", label: "I accept the terms and conditions" %>
<%# Pre-checked checkbox %>
<%= render_checkbox name: "newsletter", label: "Subscribe to newsletter", checked: true %>
```
--------------------------------
### Render Hover Card Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a rich floating card on hover. Useful for displaying user profiles or detailed information.
```erb
<%= render_hover_card do %>
<% hover_card_trigger do %>
<%= link_to "@aviflombaum", "https://twitter.com/aviflombaum", class: "underline" %>
<% end %>
<% hover_card_content class: "w-72" do %>
<% end %>
<% end %>
```
--------------------------------
### Render a Destructive Button as a Link
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Render a destructive variant button as an anchor tag with a specified href.
```erb
<%# Destructive variant as a link %>
<%= render_button "Delete Account", variant: :destructive, as: :a, href: "/account/delete" %>
```
--------------------------------
### Render Toast Notification Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a toast notification banner. Supports informational, destructive, and action-linked toasts.
```erb
<%# Default informational toast %>
<%= render_toast header: "Success", description: "Your profile has been updated." %>
```
```erb
<%# Destructive error toast %>
<%= render_toast header: "Error", description: "Could not save changes.", variant: :destructive %>
```
```erb
<%# Toast with action link %>
<%= render_toast header: "Undo?", action: link_to("Undo", undo_path, method: :post) %>
```
--------------------------------
### Include shadcn CSS in Tailwind Configuration
Source: https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/installation.html.md
Ensure shadcn.css is imported into your application's main Tailwind CSS file. This step is usually automated but should be verified.
```css
@import "shadcn.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
```
--------------------------------
### `render_hover_card` — Hover Card Component
Source: https://context7.com/aviflombaum/shadcn-rails/llms.txt
Renders a rich floating card that appears when hovering over a trigger element.
```APIDOC
## `render_hover_card` — Hover Card Component
Renders a rich floating card that appears when hovering over a trigger element.
### Usage Example:
```erb
<%= render_hover_card do %>
<% hover_card_trigger do %>
<%= link_to "@aviflombaum", "https://twitter.com/aviflombaum", class: "underline" %>
<% end %>
<% hover_card_content class: "w-72" do %>