Scroll down...
Keep scrolling...
The header sticks!
More content here...
Almost there...
Bottom reached.
| Attribute | Values | Description |
|---|---|---|
sticky | boolean | Sticks to top of scroll container |
| Attribute | Values | Description |
|---|---|---|
cols | 1-6 | auto-fit | auto-fill | Number of columns or fluid mode |
cols-sm | 1-3 | Columns at ≤640px |
cols-md | 1-4 | Columns at 641-1024px |
cols-lg | 2-6 | Columns at ≥1025px |
--ry-grid-min | CSS length | Min column width for auto-fit/auto-fill (default 280px) |
| Attribute | Values | Description |
|---|---|---|
gap | sm | md | lg | Vertical spacing |
| Attribute | Values | Description |
|---|---|---|
gap | sm | md | lg | Horizontal spacing |
Card content goes here.
All cards lift on hover. Interactive cards get a stronger effect with primary border.
Interactive cards with href navigate on click or Enter key.
Tab to focus, Enter or Space to activate. Emits ry:click.
| Attribute | Values | Description |
|---|---|---|
interactive | boolean | Clickable card with hover lift, focus ring, keyboard support |
href | URL | Navigate on click (requires interactive) |
| Attribute | Values | Description |
|---|---|---|
variant | primary | secondary | outline | ghost | danger | accent | Button style |
size | sm | md | lg | Button size |
pressed | boolean | Pressed/active toggle state |
modal | modal-id | Opens modal on click |
drawer | drawer-id | Opens drawer on click |
| Attribute | Values | Description |
|---|---|---|
resizable | boolean | Enable drag-to-resize handle |
persist | string | localStorage key — saves width across reloads |
--ry-split-width | CSS length | Sidebar width (default 300px) |
--ry-split-min-width | CSS length | Min width during resize (default 100px) |
--ry-split-max-width | CSS length | Max width during resize (default 80% of container) |
| Class | Description |
|---|---|
.ry-check-list | Green checkmark list (CSS-only, no JS) |
| Attribute | Values | Description |
|---|---|---|
title | string | Header text (on accordion-item) |
open | boolean | Initially expanded (on accordion-item) |
This is the overview tab content.
This is the features tab content.
| Attribute | Values | Description |
|---|---|---|
title | string | Tab label (on tab) |
active | boolean | Initially selected (on tab) |
Modal content with focus trapping.
| Attribute | Values | Description |
|---|---|---|
id | string | Modal identifier |
title | string | Header title |
close | boolean | Closes modal (on button) |
| Attribute | Values | Description |
|---|---|---|
| first child | — | First child element is the trigger |
| Attribute | Values | Description |
|---|---|---|
label | string | Field label text |
error | string | Error message (hides hint when set) |
hint | string | Helper text below input |
| Attribute | Values | Description |
|---|---|---|
checked | boolean | Initially checked |
disabled | boolean | Disable interaction |
| Attribute | Values | Description |
|---|---|---|
name | string | Groups radios together |
value | string | Value when selected |
checked | boolean | Initially selected |
disabled | boolean | Disable interaction |
| Attribute | Values | Description |
|---|---|---|
variant | default | primary | success | warning | danger | accent | Badge style |
--ry-badge-color | CSS color | Arbitrary background color via style |
--ry-badge-text | CSS color | Arbitrary text color via style |
| Attribute | Values | Description |
|---|---|---|
type | info | success | warning | danger | Alert style |
title | string | Alert heading |
| Attribute | Values | Description |
|---|---|---|
name | string | Form field name |
checked | boolean | Initially checked |
disabled | boolean | Disable interaction |
| Attribute | Values | Description |
|---|---|---|
min | number | Minimum value (default: 0) |
max | number | Maximum value (default: 100) |
step | number | Step increment, 0 for smooth (default: 1) |
value | number | Current value (single slider) |
start / end | number | Range values (with range attribute) |
range | boolean | Enable dual-handle range mode |
labeled | boolean | Show value labels |
ticked | boolean | Show tick marks |
tooltip | boolean | Show value on thumb hover |
vertical | boolean | Vertical orientation |
reversed | boolean | Reverse direction |
color | primary | secondary | success | warning | danger | info | Track color |
size | sm | lg | Size variant |
disabled | boolean | Disable interaction |
| Attribute | Values | Description |
|---|---|---|
min | number | Minimum value (default: 0) |
max | number | Maximum value (default: 100) |
step | number | Step increment, 0 for smooth (default: 0) |
value | number | Current value |
label | string | Label text below knob |
labels | string | Comma-separated display labels for discrete values |
description | string | Tooltip text shown on hover |
color | primary | secondary | success | warning | danger | Track color |
size | sm | lg | Size variant |
disabled | boolean | Disable interaction |
Arrow placement
Icon styles
Drag direction — stacked defaults to vertical
Prefix & suffix
Step intervals
Behaviors
Sizes
| Attribute | Values | Description |
|---|---|---|
min | number | Minimum value (default: 0) |
max | number | Maximum value (default: 100) |
step | number | Step increment (default: 1) |
value | number | Current value (default: 0) |
arrows | both | start | end | stacked | none | Button placement (default: both) |
icons | plus-minus | chevron | arrow | Button icon style (default: plus-minus) |
drag | x | y | none | Drag direction (default: x, stacked defaults to y) |
prefix | string | Text before value (e.g. "$") |
suffix | string | Text after value (e.g. "°", "%") |
editable | boolean | Allow direct typing on click |
wrap | boolean | Wrap around min/max boundaries |
size | xs | sm | lg | Size variant |
disabled | boolean | Disable interaction |
Dropdown mode (default) - click to open:
With swatches:
Inline mode - always visible:
With opacity + swatches (inline):
| Attribute | Values | Description |
|---|---|---|
value | color string | Initial color (hex, rgb, hsl) |
format | hex | rgb | hsl | Output format (default: hex) |
inline | boolean | Always show picker (no dropdown) |
opacity | boolean | Enable alpha channel slider |
swatches | string | Preset colors separated by semicolons |
disabled | boolean | Disable interaction |
Input-style color picker with editable hex value:
With opacity support:
| Attribute | Values | Description |
|---|---|---|
value | color string | Initial color (hex, rgb, hsl) |
format | hex | rgb | hsl | Output format (default: hex) |
opacity | boolean | Enable alpha channel slider |
placeholder | string | Placeholder text for input |
disabled | boolean | Disable interaction |
Linear gradient (default):
Multi-stop rainbow with CSS output:
Radial gradient:
| Attribute | Values | Description |
|---|---|---|
value | CSS gradient string | Initial gradient value |
disabled | boolean | Disable interaction |
| Attribute | Values | Description |
|---|---|---|
name | string | Groups buttons (same name = only one pressed) |
value | string | Value when selected |
pressed | boolean | Currently pressed |
disabled | boolean | Disable interaction |
size | sm | md | lg | Button size |
| Attribute | Values | Description |
|---|---|---|
content | string | Tooltip text |
position | top | bottom | left | right | Tooltip position |
Drawer content here.
| Attribute | Values | Description |
|---|---|---|
id | string | Drawer identifier |
side | left | right | bottom | Slide direction |
| Method | Description |
|---|---|
RyToast.success(msg) | Show success toast |
RyToast.error(msg) | Show error toast |
RyToast.warning(msg) | Show warning toast |
RyToast.info(msg) | Show info toast |
| Attribute | Values | Description |
|---|---|---|
placeholder | string | Placeholder text |
name | string | Form field name |
disabled | boolean | Disable select (on option) |
multiple | boolean | Enable multi-select with tags |
clearable | boolean | Show clear button (multi) |
max-selections | number | Max selections (multi) |
| Attribute | Values | Description |
|---|---|---|
placeholder | string | Placeholder text for input |
name | string | Form field name |
value | string | Currently selected value |
disabled | boolean | Disable combobox |
| Attribute | Values | Description |
|---|---|---|
language | js | css | html | json | Syntax highlighting |
title | string | Header title |
line-numbers | boolean | Show line numbers |
Note: Use <ry-code> with prefix to avoid conflict with native <code> tag.
| Name | Role | Status |
|---|---|---|
| Alice Johnson | Engineer | Active |
| Bob Smith | Designer | Active |
| Carol White | Manager | Away |
| Attribute | Values | Description |
|---|---|---|
data-bordered | boolean | Add borders to all cells |
data-striped | boolean | Alternate row backgrounds |
| Attribute | Values | Description |
|---|---|---|
label | string | Item label (on tree-item) |
open | boolean | Initially expanded folder (on tree-item with children) |
selected | boolean | Initially selected file (on leaf tree-item) |
sortable | boolean | Enable drag-and-drop rearranging (on tree) |
no-animate | boolean | Disable expand/collapse animation (on tree) |
--ry-tree-duration | CSS time | Animation duration (default: 150ms) |
| Attribute | Values | Description |
|---|---|---|
name | close | check | chevron-* | copy | sun | moon | info | warning | error | success | search | menu | plus | minus | settings | user | heart | star | trash | edit | external-link | download | upload | Icon name |
size | number | Size in pixels (default: 24) |
label | string | Accessible label |
| Attribute | Values | Description |
|---|---|---|
variant | default | primary | success | warning | danger | Color variant |
size | sm | md | lg | Size |
removable | boolean | Show close button |
data-value | string | Value included in ry:remove event |
| Attribute | Values | Description |
|---|---|---|
placeholder | string | Input placeholder |
delimiter | string | Delimiter character (default ",") |
max-tags | number | Max number of tags |
value | string | Initial comma-separated values |
name | string | Form field name |
Framework-agnostic, Light DOM web components. CSS is the source of truth.
| Attribute | Values | Description |
|---|---|---|
align | center | left | Text alignment |
size | sm | md | lg | Padding size |
full-bleed | boolean | Remove max-width |
| Attribute | Values | Description |
|---|---|---|
trend | up | down | Trend arrow direction |
size | sm | md | lg | Value text size |
align | left | center | Alignment |
One line of code to get started. No build step required.
Clean API, great docs, and TypeScript support.
Under 10KB gzipped. No dependencies.
| Attribute | Values | Description |
|---|---|---|
cols (grid) | 2 | 3 | 4 | Number of columns |
icon (feature) | icon name | Icon from registry |
align (feature) | left | center | Content alignment |
| Attribute | Values | Description |
|---|---|---|
featured | boolean | Highlight this card |
| Attribute | Values | Description |
|---|---|---|
stars | 1–5 | Star rating display |
avatar | image URL | Avatar photo |
name | text | Person's name |
role | text | Title / company |
First slide content
Second slide content
Third slide content
| Attribute | Values | Description |
|---|---|---|
arrows | boolean | Show prev/next arrows |
dots | boolean | Show dot indicators |
loop | boolean | Loop back to start |
autoplay | boolean | Auto-advance slides |
interval | number | Autoplay interval in ms (default 5000) |
pause-on-hover | boolean | Pause autoplay on hover |
ry-ui • Framework-agnostic Light DOM components