# Senren UI

> A Rails UI library of ViewComponent, Stimulus and Tailwind components that are copied into your application rather than imported from a gem. You own the files after installation and edit them directly.

Install: `bundle add senren-ui` then `bin/rails generate senren:install`.
Add components: `bin/rails senren:add button card dialog`.

## Documentation

- [Introduction](https://www.senren-ui.dev/docs): what Senren is and when to reach for it
- [Installation](https://www.senren-ui.dev/docs/installation): generator, stylesheets, Stimulus wiring
- [Quickstart](https://www.senren-ui.dev/docs/quickstart): first component on a page
- [Theming](https://www.senren-ui.dev/docs/theming): the token set and the palette presets
- [Conventions](https://www.senren-ui.dev/docs/conventions): the rules components are written to
- [AI agents](https://www.senren-ui.dev/docs/ai-agents): the guide files the generator writes into your repo

## Components (64)

### Actions

Buttons, links, and clickable affordances.

- [Button](https://www.senren-ui.dev/components/button): primary action
- [Link](https://www.senren-ui.dev/components/link): in-app navigation

### Forms

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

- [Calendar](https://www.senren-ui.dev/components/calendar): date display and selection
- [Checkbox](https://www.senren-ui.dev/components/checkbox): boolean preferences
- [Checkbox Group](https://www.senren-ui.dev/components/checkbox_group): multi-select boolean groups
- [Combobox](https://www.senren-ui.dev/components/combobox): searchable selects
- [Date Picker](https://www.senren-ui.dev/components/date_picker): date input fields
- [Form](https://www.senren-ui.dev/components/form): Rails form_with wrappers
- [Input](https://www.senren-ui.dev/components/input): text
- [Label](https://www.senren-ui.dev/components/label): labeling form controls
- [Masked Input](https://www.senren-ui.dev/components/masked_input): phone
- [Native Select](https://www.senren-ui.dev/components/native_select): short option lists
- [Radio Button](https://www.senren-ui.dev/components/radio_button): single-choice option groups
- [Select](https://www.senren-ui.dev/components/select): styled selects with custom option rendering
- [Switch](https://www.senren-ui.dev/components/switch): boolean toggles
- [Textarea](https://www.senren-ui.dev/components/textarea): multi-line text

### Overlays

Dialogs, popovers, tooltips, sheets, menus.

- [Alert Dialog](https://www.senren-ui.dev/components/alert_dialog): destructive action confirmation
- [Context Menu](https://www.senren-ui.dev/components/context_menu): right-click actions on rows or canvases
- [Dialog](https://www.senren-ui.dev/components/dialog): confirmation modal
- [Dropdown Menu](https://www.senren-ui.dev/components/dropdown_menu): contextual actions on rows
- [Hover Card](https://www.senren-ui.dev/components/hover_card): user hover previews
- [Popover](https://www.senren-ui.dev/components/popover): small contextual UI like filters or color pickers
- [Sheet](https://www.senren-ui.dev/components/sheet): side panels
- [Tooltip](https://www.senren-ui.dev/components/tooltip): supplementary hints on hover/focus

### Navigation

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

- [Accordion](https://www.senren-ui.dev/components/accordion): FAQ
- [Breadcrumb](https://www.senren-ui.dev/components/breadcrumb): hierarchical navigation context
- [Collapsible](https://www.senren-ui.dev/components/collapsible): single show/hide toggles
- [Shortcut Key](https://www.senren-ui.dev/components/shortcut_key): displaying keyboard shortcuts in tooltips and menus
- [Sidebar](https://www.senren-ui.dev/components/sidebar): primary app navigation in dashboards
- [Tabs](https://www.senren-ui.dev/components/tabs): switching between related views in the same context
- [Theme Toggle](https://www.senren-ui.dev/components/theme_toggle): light/dark/system theme switching

### Layout

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

- [Aspect Ratio](https://www.senren-ui.dev/components/aspect_ratio): media
- [Card](https://www.senren-ui.dev/components/card): grouping related content
- [Separator](https://www.senren-ui.dev/components/separator): grouping content blocks
- [Typography](https://www.senren-ui.dev/components/typography): page titles

### Data Display

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

- [Alert](https://www.senren-ui.dev/components/alert): form feedback
- [Avatar](https://www.senren-ui.dev/components/avatar): user thumbnail
- [Badge](https://www.senren-ui.dev/components/badge): status
- [Clipboard](https://www.senren-ui.dev/components/clipboard): copy to clipboard buttons
- [Pagination](https://www.senren-ui.dev/components/pagination): paged lists and tables
- [Progress](https://www.senren-ui.dev/components/progress): task progress
- [Skeleton](https://www.senren-ui.dev/components/skeleton): loading placeholders
- [Table](https://www.senren-ui.dev/components/table): tabular data display

### SaaS Blocks

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

- [Activity Feed](https://www.senren-ui.dev/components/activity_feed): audit logs
- [Api Key Field](https://www.senren-ui.dev/components/api_key_field): secret key display with reveal/copy/regenerate
- [App Shell](https://www.senren-ui.dev/components/app_shell): SaaS dashboard layout root
- [Billing Plan Card](https://www.senren-ui.dev/components/billing_plan_card): pricing page or billing settings
- [Bulk Action Bar](https://www.senren-ui.dev/components/bulk_action_bar): acting on multiple selected rows
- [Cart](https://www.senren-ui.dev/components/cart): cart summary panels
- [Data Table](https://www.senren-ui.dev/components/data_table): sortable
- [Empty State](https://www.senren-ui.dev/components/empty_state): zero-result lists
- [Filter Bar](https://www.senren-ui.dev/components/filter_bar): list filters above tables
- [Invite Member Dialog](https://www.senren-ui.dev/components/invite_member_dialog): team invitation flow
- [Page Header](https://www.senren-ui.dev/components/page_header): titled page header with actions
- [Product Card](https://www.senren-ui.dev/components/product_card): product listings
- [Search Input](https://www.senren-ui.dev/components/search_input): search above lists or in headers
- [Settings Section](https://www.senren-ui.dev/components/settings_section): grouped settings inside a settings page
- [Stat Card](https://www.senren-ui.dev/components/stat_card): dashboard KPI tiles
- [Team Member List](https://www.senren-ui.dev/components/team_member_list): team management pages
- [Top Nav](https://www.senren-ui.dev/components/top_nav): global header with brand and account menu

### Rich Content

Editors, code blocks, carousels, command palettes.

- [Carousel](https://www.senren-ui.dev/components/carousel): media galleries
- [Codeblock](https://www.senren-ui.dev/components/codeblock): displaying code samples
- [Command](https://www.senren-ui.dev/components/command): command palettes
- [Rich Text Editor Lite](https://www.senren-ui.dev/components/rich_text_editor_lite): light formatting (bold/italic/links/lists) only

Full reference with variants and guidance: https://www.senren-ui.dev/llms-full.txt