# Senren UI - Full Snapshot

Generated by senren-ui. Do not edit by hand. Run
`bin/rails senren:llms:generate` to regenerate.

## Hard Rules

- Use Senren components before writing custom HTML.
- Server-rendered HTML first; ViewComponent for reusable UI.
- Hotwire (Turbo + Stimulus) is the only client runtime.
- TailwindCSS with semantic tokens (`bg-background`, `text-foreground`, ...).
- Do not introduce React, Vue, Alpine, or external state frameworks.
- Components copied into `app/components/senren/` are owned by this app; edit them directly.

## Installed Component Inventory

### Actions

Buttons, links, and clickable affordances.

#### button

Category: actions.  Client: no.  Variants: default, primary, secondary, destructive, ghost, link.

Use for: primary action; secondary action; form submit; destructive action.
Avoid: using destructive variant for non-destructive actions.

Rails usage:

```erb
<%= render Senren::ButtonComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### link

Category: actions.  Client: no.  Variants: default, muted, destructive.

Use for: in-app navigation; external links.
Avoid: triggering destructive actions via a link.

Rails usage:

```erb
<%= render Senren::LinkComponent.new(variant: :default) do %>
  ...
<% end %>
```

### Forms

Form structure, labels, inputs, selects, validation surfaces.

#### calendar

Category: forms.  Client: yes (senren--calendar).  Variants: default.

Use for: date display and selection.
Avoid: time-only selection.

Rails usage:

```erb
<%= render Senren::CalendarComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### checkbox

Category: forms.  Client: no.  Variants: default.

Use for: boolean preferences; multi-select via checkbox_group.
Avoid: single-choice scenarios - use radio_button.

Rails usage:

```erb
<%= render Senren::CheckboxComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### checkbox_group

Category: forms.  Client: no.  Variants: default.

Use for: multi-select boolean groups.
Avoid: single-choice groups.

Rails usage:

```erb
<%= render Senren::CheckboxGroupComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### combobox

Category: forms.  Client: yes (senren--combobox).  Variants: default, error.

Use for: searchable selects; large option lists.
Avoid: short; fixed lists - use native_select.

Rails usage:

```erb
<%= render Senren::ComboboxComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### date_picker

Category: forms.  Client: yes (senren--date-picker).  Variants: default, error.

Use for: date input fields.
Avoid: date ranges - use a range component once added.

Rails usage:

```erb
<%= render Senren::DatePickerComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### form

Category: forms.  Client: no.  Variants: default.

Use for: Rails form_with wrappers.
Avoid: bypassing CSRF or Rails form helpers.

Rails usage:

```erb
<%= render Senren::FormComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### input

Category: forms.  Client: no.  Variants: default, error.

Use for: text; email; password; number; search; url.
Avoid: storing structured data in a single text input.

Rails usage:

```erb
<%= render Senren::InputComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### label

Category: forms.  Client: no.  Variants: default, required.

Use for: labeling form controls.
Avoid: using placeholder as the only label.

Rails usage:

```erb
<%= render Senren::LabelComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### masked_input

Category: forms.  Client: yes (senren--masked-input).  Variants: default, error.

Use for: phone; postal code; credit card; custom formats.
Avoid: free text fields - use input.

Rails usage:

```erb
<%= render Senren::MaskedInputComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### native_select

Category: forms.  Client: no.  Variants: default, error.

Use for: short option lists; mobile-friendly selects.
Avoid: long lists - prefer combobox.

Rails usage:

```erb
<%= render Senren::NativeSelectComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### radio_button

Category: forms.  Client: no.  Variants: default.

Use for: single-choice option groups.
Avoid: multi-select - use checkbox_group.

Rails usage:

```erb
<%= render Senren::RadioButtonComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### select

Category: forms.  Client: yes (senren--select).  Variants: default, error.

Use for: styled selects with custom option rendering.
Avoid: very long lists - use combobox.

Rails usage:

```erb
<%= render Senren::SelectComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### switch

Category: forms.  Client: no.  Variants: default.

Use for: boolean toggles; settings.
Avoid: actions that need confirmation - use button + dialog.

Rails usage:

```erb
<%= render Senren::SwitchComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### textarea

Category: forms.  Client: no.  Variants: default, error.

Use for: multi-line text.
Avoid: rich-text editing - use rich_text_editor_lite.

Rails usage:

```erb
<%= render Senren::TextareaComponent.new(variant: :default) do %>
  ...
<% end %>
```

### Overlays

Dialogs, popovers, tooltips, sheets, menus.

#### alert_dialog

Category: overlays.  Client: yes (senren--alert-dialog).  Variants: default, destructive.

Use for: destructive action confirmation; irreversible operations.
Avoid: routine modal forms - use dialog.

Rails usage:

```erb
<%= render Senren::AlertDialogComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### context_menu

Category: overlays.  Client: yes (senren--context-menu).  Variants: default.

Use for: right-click actions on rows or canvases.
Avoid: primary navigation; main page actions.

Rails usage:

```erb
<%= render Senren::ContextMenuComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### dialog

Category: overlays.  Client: yes (senren--dialog).  Variants: default.

Use for: confirmation modal; short form modal.
Avoid: long multi-step workflows; full page replacement.

Rails usage:

```erb
<%= render Senren::DialogComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### dropdown_menu

Category: overlays.  Client: yes (senren--dropdown-menu).  Variants: default.

Use for: contextual actions on rows; account menus.
Avoid: primary navigation - use top_nav or sidebar.

Rails usage:

```erb
<%= render Senren::DropdownMenuComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### hover_card

Category: overlays.  Client: yes (senren--hover-card).  Variants: default.

Use for: user hover previews; link previews.
Avoid: interactive forms - use popover or dialog.

Rails usage:

```erb
<%= render Senren::HoverCardComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### popover

Category: overlays.  Client: yes (senren--popover).  Variants: default.

Use for: small contextual UI like filters or color pickers.
Avoid: large content - use dialog or sheet.

Rails usage:

```erb
<%= render Senren::PopoverComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### sheet

Category: overlays.  Client: yes (senren--sheet).  Variants: right, left, top, bottom.

Use for: side panels; mobile filters; edit panels.
Avoid: destructive confirmation - use alert_dialog.

Rails usage:

```erb
<%= render Senren::SheetComponent.new(variant: :right) do %>
  ...
<% end %>
```

#### tooltip

Category: overlays.  Client: yes (senren--tooltip).  Variants: default.

Use for: supplementary hints on hover/focus.
Avoid: storing required information only in tooltip.

Rails usage:

```erb
<%= render Senren::TooltipComponent.new(variant: :default) do %>
  ...
<% end %>
```

### Navigation

Tabs, breadcrumbs, sidebar, theme toggle, shortcut keys.

#### accordion

Category: navigation.  Client: yes (senren--accordion).  Variants: single, multiple.

Use for: FAQ; collapsible content sections.
Avoid: primary navigation.

Rails usage:

```erb
<%= render Senren::AccordionComponent.new(variant: :single) do %>
  ...
<% end %>
```

#### breadcrumb

Category: navigation.  Client: no.  Variants: default.

Use for: hierarchical navigation context.
Avoid: non-hierarchical pages.

Rails usage:

```erb
<%= render Senren::BreadcrumbComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### collapsible

Category: navigation.  Client: yes (senren--collapsible).  Variants: default.

Use for: single show/hide toggles.
Avoid: groups - use accordion.

Rails usage:

```erb
<%= render Senren::CollapsibleComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### shortcut_key

Category: navigation.  Client: no.  Variants: default.

Use for: displaying keyboard shortcuts in tooltips and menus.
Avoid: as a button - shortcut_key is presentational.

Rails usage:

```erb
<%= render Senren::ShortcutKeyComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### sidebar

Category: navigation.  Client: yes (senren--sidebar).  Variants: default, compact.

Use for: primary app navigation in dashboards.
Avoid: marketing sites - use top_nav.

Rails usage:

```erb
<%= render Senren::SidebarComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### tabs

Category: navigation.  Client: yes (senren--tabs).  Variants: default, underline.

Use for: switching between related views in the same context.
Avoid: non-related sections - use a separate page.

Rails usage:

```erb
<%= render Senren::TabsComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### theme_toggle

Category: navigation.  Client: yes (senren--theme-toggle).  Variants: default.

Use for: light/dark/system theme switching.
Avoid: non-theme settings.

Rails usage:

```erb
<%= render Senren::ThemeToggleComponent.new(variant: :default) do %>
  ...
<% end %>
```

### Layout

Cards, separators, app shells, page headers, aspect ratios.

#### aspect_ratio

Category: layout.  Client: no.  Variants: square, video, portrait, ultrawide.

Use for: media; image placeholders; embeds.
Avoid: forcing aspect on text content.

Rails usage:

```erb
<%= render Senren::AspectRatioComponent.new(variant: :square) do %>
  ...
<% end %>
```

#### card

Category: layout.  Client: no.  Variants: default, muted, outline.

Use for: grouping related content; dashboard widgets; list items.
Avoid: nesting cards inside cards.

Rails usage:

```erb
<%= render Senren::CardComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### separator

Category: layout.  Client: no.  Variants: horizontal, vertical.

Use for: grouping content blocks.
Avoid: decorative-only use without semantics.

Rails usage:

```erb
<%= render Senren::SeparatorComponent.new(variant: :horizontal) do %>
  ...
<% end %>
```

#### typography

Category: layout.  Client: no.  Variants: h1, h2, h3, h4, p, lead, large, small, muted.

Use for: page titles; body copy; captions.
Avoid: styling without semantic tag matching.

Rails usage:

```erb
<%= render Senren::TypographyComponent.new(variant: :h1) do %>
  ...
<% end %>
```

### Data Display

Tables, badges, avatars, progress, skeletons, pagination.

#### alert

Category: data.  Client: no.  Variants: default, info, success, warning, destructive.

Use for: form feedback; page-level notices.
Avoid: transient toasts - use a toast component instead.

Rails usage:

```erb
<%= render Senren::AlertComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### avatar

Category: data.  Client: no.  Variants: sm, md, lg.

Use for: user thumbnail; team list; comments.
Avoid: decorative-only without alt.

Rails usage:

```erb
<%= render Senren::AvatarComponent.new(variant: :sm) do %>
  ...
<% end %>
```

#### badge

Category: data.  Client: no.  Variants: default, secondary, success, warning, destructive, outline.

Use for: status; priority; counts; tags.
Avoid: interactive actions disguised as badges.

Rails usage:

```erb
<%= render Senren::BadgeComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### clipboard

Category: data.  Client: yes (senren--clipboard).  Variants: default.

Use for: copy to clipboard buttons.
Avoid: non-text content.

Rails usage:

```erb
<%= render Senren::ClipboardComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### pagination

Category: data.  Client: no.  Variants: default.

Use for: paged lists and tables.
Avoid: infinite scroll feeds.

Rails usage:

```erb
<%= render Senren::PaginationComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### progress

Category: data.  Client: no.  Variants: default, success, warning, destructive.

Use for: task progress; file upload; loading bars.
Avoid: decorative animation.

Rails usage:

```erb
<%= render Senren::ProgressComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### skeleton

Category: data.  Client: no.  Variants: default, circle, text.

Use for: loading placeholders.
Avoid: permanent decoration.

Rails usage:

```erb
<%= render Senren::SkeletonComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### table

Category: data.  Client: no.  Variants: default, compact.

Use for: tabular data display.
Avoid: layout - use grid/flex.

Rails usage:

```erb
<%= render Senren::TableComponent.new(variant: :default) do %>
  ...
<% end %>
```

### SaaS Blocks

Composite blocks for SaaS apps - settings, billing, team, search, filters.

#### activity_feed

Category: saas.  Client: no.  Variants: default.

Use for: audit logs; comment threads; change history.
Avoid: transient notifications - use alert or toast.

Rails usage:

```erb
<%= render Senren::ActivityFeedComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### api_key_field

Category: saas.  Client: yes (senren--api-key-field).  Variants: default.

Use for: secret key display with reveal/copy/regenerate.
Avoid: storing secrets in plain text on the server side.

Rails usage:

```erb
<%= render Senren::ApiKeyFieldComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### app_shell

Category: saas.  Client: no.  Variants: default, compact.

Use for: SaaS dashboard layout root.
Avoid: marketing pages.

Rails usage:

```erb
<%= render Senren::AppShellComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### billing_plan_card

Category: saas.  Client: no.  Variants: default, current, recommended.

Use for: pricing page or billing settings.
Avoid: feature comparison tables - use table.

Rails usage:

```erb
<%= render Senren::BillingPlanCardComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### bulk_action_bar

Category: saas.  Client: no.  Variants: default.

Use for: acting on multiple selected rows.
Avoid: single-row actions - use dropdown_menu.

Rails usage:

```erb
<%= render Senren::BulkActionBarComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### data_table

Category: saas.  Client: yes (senren--data-table).  Variants: default.

Use for: sortable; filterable record lists.
Avoid: static layout grids.

Rails usage:

```erb
<%= render Senren::DataTableComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### empty_state

Category: saas.  Client: no.  Variants: default, illustrated.

Use for: zero-result lists; no-data dashboards.
Avoid: error states - use alert.

Rails usage:

```erb
<%= render Senren::EmptyStateComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### filter_bar

Category: saas.  Client: no.  Variants: default.

Use for: list filters above tables.
Avoid: primary navigation.

Rails usage:

```erb
<%= render Senren::FilterBarComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### invite_member_dialog

Category: saas.  Client: yes (senren--invite-member-dialog).  Variants: default.

Use for: team invitation flow.
Avoid: bulk imports - use a dedicated screen.

Rails usage:

```erb
<%= render Senren::InviteMemberDialogComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### page_header

Category: saas.  Client: no.  Variants: default.

Use for: titled page header with actions.
Avoid: stacking multiple page_headers per page.

Rails usage:

```erb
<%= render Senren::PageHeaderComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### search_input

Category: saas.  Client: no.  Variants: default.

Use for: search above lists or in headers.
Avoid: global navigation - use command.

Rails usage:

```erb
<%= render Senren::SearchInputComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### settings_section

Category: saas.  Client: no.  Variants: default.

Use for: grouped settings inside a settings page.
Avoid: unrelated content blocks.

Rails usage:

```erb
<%= render Senren::SettingsSectionComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### stat_card

Category: saas.  Client: no.  Variants: default, success, warning, destructive.

Use for: dashboard KPI tiles.
Avoid: interactive widgets - use card with explicit controls.

Rails usage:

```erb
<%= render Senren::StatCardComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### team_member_list

Category: saas.  Client: no.  Variants: default.

Use for: team management pages.
Avoid: arbitrary user lists - compose with table or card.

Rails usage:

```erb
<%= render Senren::TeamMemberListComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### top_nav

Category: saas.  Client: no.  Variants: default.

Use for: global header with brand and account menu.
Avoid: primary in-app navigation - use sidebar.

Rails usage:

```erb
<%= render Senren::TopNavComponent.new(variant: :default) do %>
  ...
<% end %>
```

### Rich Content

Editors, code blocks, carousels, command palettes.

#### carousel

Category: rich.  Client: yes (senren--carousel).  Variants: default.

Use for: media galleries; marketing highlights.
Avoid: primary navigation; important content gating.

Rails usage:

```erb
<%= render Senren::CarouselComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### codeblock

Category: rich.  Client: no.  Variants: default.

Use for: displaying code samples.
Avoid: running code - this is read-only display.

Rails usage:

```erb
<%= render Senren::CodeblockComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### command

Category: rich.  Client: yes (senren--command).  Variants: default.

Use for: command palettes; quick search.
Avoid: persistent navigation.

Rails usage:

```erb
<%= render Senren::CommandComponent.new(variant: :default) do %>
  ...
<% end %>
```

#### rich_text_editor_lite

Category: rich.  Client: yes (senren--rich-text-editor-lite).  Variants: default.

Use for: light formatting (bold/italic/links/lists) only.
Avoid: tables; embeds; media - out of scope for v0.1.

Rails usage:

```erb
<%= render Senren::RichTextEditorLiteComponent.new(variant: :default) do %>
  ...
<% end %>
```

## Recipes

### form_basics

Minimal form stack - structure, primitives, and submit button.

Components:
- form
- label
- input
- textarea
- native_select
- button
- alert

### dashboard

SaaS dashboard layout with shell, header, and stat cards.

Components:
- app_shell
- top_nav
- sidebar
- page_header
- card
- badge
- button
- stat_card
- typography
- separator

### settings_page

Settings page with sectioned form and destructive action.

Components:
- app_shell
- sidebar
- page_header
- card
- settings_section
- form
- input
- textarea
- switch
- button
- alert_dialog
- separator
- typography

### team_management

Team list with invite dialog and bulk actions.

Components:
- app_shell
- page_header
- card
- team_member_list
- invite_member_dialog
- dropdown_menu
- bulk_action_bar
- search_input
- filter_bar
- badge
- avatar
- button

### todolist_index

Components used by the apps/todolist Todo index page.

Components:
- app_shell
- top_nav
- sidebar
- page_header
- button
- card
- badge
- table
- dropdown_menu
- pagination
- empty_state
- filter_bar
- search_input

### todolist_form

Components used by the apps/todolist Todo new/edit pages.

Components:
- form
- label
- input
- textarea
- native_select
- button
- alert