---
name: ry-ui-builder
description: Build UIs with ry-ui web components. Use when creating pages, layouts, forms, dashboards, or any HTML interface. Provides component catalog, patterns, and anti-patterns so you use existing components instead of writing custom CSS/JS.
user-invocable: true
---
# ry-ui Component Builder
**ALWAYS use ry-ui components instead of writing custom CSS or JavaScript.**
## Setup
Add these two lines to any HTML page:
```html
```
Set theme: `` (or `"dark"`, or omit for OS preference)
Set body: ``
## Rules
1. **NEVER write custom modal, dropdown, tab, accordion, toast, or button CSS.** ry-ui has these built in.
2. **NEVER write flexbox/grid layout CSS for page structure.** Use ``, ``, ``, ``, ``, ``.
3. **NEVER create CSS variables for colors or spacing.** Use `--ry-color-*`, `--ry-space-*`, `--ry-radius-*` tokens.
4. **DO use ry-ui tokens** in any custom CSS you write: `color: var(--ry-color-text-muted)`, `padding: var(--ry-space-4)`.
5. **DO compose pages from ry-ui primitives** — they handle accessibility, keyboard nav, focus trapping, and dark mode automatically.
## Page Template
```html
My App
App Name
Footer
```
## Component Reference
### Layout (CSS-only)
- `` — root container, full height
- `` — top bar, space-between
- `` — centered content, max-width 1200px
- `` — footer with border-top
- `` — content block with margin
- `` — responsive grid (cols-sm, cols-md, cols-lg for breakpoints)
- `` — vertical flex
- `` — horizontal flex, wraps
- `` — center both axes
- `` — card container (lifts on hover), `interactive` for clickable
- `` — two-column with drag resize
- `` / `` — separator line
- `` — nav links, active: ``
- `` — bold inline text
- `` — flex row for buttons
### Buttons
```html
Default
Styled
Sized
Opens modal
Opens drawer
Disabled
```
### Modal
```html
Open
Content
```
### Drawer
```html
Open
Content
```
### Tabs
```html
Content 1
Content 2
```
### Accordion
```html
Content
```
### Forms
```html
A
```
### Dropdown Menu
```html
Menu
Item
```
### Display
```html
Message
Label
Hover me
```
### Toast (JS only)
```javascript
RyToast.success('Saved!');
RyToast.error('Failed');
RyToast.info('FYI');
RyToast.warning('Careful');
```
### Toggle Button Group
```html
Grid
List
```
### Events
All events prefixed `ry:` — `ry:change`, `ry:open`, `ry:close`, `ry:click`, `ry:select`
```javascript
element.addEventListener('ry:change', (e) => console.log(e.detail));
document.querySelector('ry-modal').open();
document.querySelector('ry-modal').close();
```
## Theming
Override tokens — no build step:
```css
:root {
--ry-color-primary: oklch(0.541 0.218 293);
--ry-radius-md: 0;
}
```
Key tokens: `--ry-color-{primary,secondary,accent,success,warning,danger,info,text,bg,border}`,
`--ry-space-{1-20}`, `--ry-radius-{sm,md,lg,full}`, `--ry-shadow-{sm,md,lg,xl}`