Grid

Stack

Cluster

Card

Split

Button

Field

Checkbox

Radio

Switch

Select

Combobox

Slider

Knob

Number Select

Toggle Button

Tag Input

Color Picker

Color Input

Gradient Picker

Accordion

Tabs

Modal

Drawer

Dropdown

Tooltip

Toast

Carousel

Tree

Badge

Alert

Tag

Icon

Code

Table

Check List

Hero

Stat

Feature Grid

Pricing

Testimonial

Grid

Responsive column layouts with fixed or fluid sizing.

One Two Three

        Grid

          AttributeValuesDescription

          cols1-6 | auto-fit | auto-fillNumber of columns or fluid mode
cols-sm1-3Columns at ≤640px
cols-md1-4Columns at 641-1024px
cols-lg2-6Columns at ≥1025px
--ry-grid-minCSS lengthMin column width for auto-fit/auto-fill (default 280px)

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)

Stack

Vertical spacing between elements with consistent gaps.

Stacked item 1 Stacked item 2 Stacked item 3

        Stack

          AttributeValuesDescription

          gapsm | md | lgVertical spacing

Attribute	Values	Description
`gap`	sm \| md \| lg	Vertical spacing

Cluster

Horizontal wrapping layout for inline elements like tags and buttons.

Tag 1 Tag 2 Tag 3 Tag 4

        Cluster

          AttributeValuesDescription

          gapsm | md | lgHorizontal spacing

Attribute	Values	Description
`gap`	sm \| md \| lg	Horizontal spacing

Card

Content container with optional hover interaction and link behavior.

Card Title

Card content goes here.

Hover Me

Interactive card with hover lift.

Keyboard Accessible

Tab to focus, Enter to activate.

Card

Attribute	Values	Description
`interactive`	boolean	Clickable card with hover lift, focus ring, keyboard support
`href`	URL	Navigate on click (requires `interactive`)

Button

Clickable actions with semantic variants for primary, secondary, danger, and more.

        Button

          AttributeValuesDescription

          variantprimary | secondary | outline | ghost | danger | accentButton style
sizesm | md | lgButton size
pressedbooleanPressed/active toggle state
modalmodal-idOpens modal on click
drawerdrawer-idOpens drawer on click

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

Split

Resizable two-panel layout with optional persistent width.

Drag the handle to resize → Resizable sidebar

        Split

const split = document.querySelector('ry-split[resizable]');

// Listen for resize
split.addEventListener('ry:resize', (e) => {
  console.log(e.detail.width);  // new width in px
});

// Keyboard: Arrow keys (±10px), Shift+Arrow (±50px)
// Home = min width, End = max width
// Double-click handle = reset to default
        
          AttributeValuesDescription

          resizablebooleanEnable drag-to-resize handle
persiststringlocalStorage key — saves width across reloads
--ry-split-widthCSS lengthSidebar width (default 300px)
--ry-split-min-widthCSS lengthMin width during resize (default 100px)
--ry-split-max-widthCSS lengthMax width during resize (default 80% of container)

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)

Check List

CSS-only checkmark list for feature comparisons and pricing.

Unlimited projects
Priority support
Advanced analytics
Custom domains

        Check List

          ClassDescription

          .ry-check-listGreen checkmark list (CSS-only, no JS)

Class	Description
`.ry-check-list`	Green checkmark list (CSS-only, no JS)

Accordion

Collapsible content sections for FAQs and progressive disclosure.

A framework-agnostic, Light DOM component library.

Nope! Just link the CSS and JS files.

        Accordion

const item = document.querySelector('ry-accordion-item');

// Listen for open/close
item.addEventListener('ry:toggle', (e) => {
  console.log(e.detail.open);  // true or false
});

// Open/close programmatically
item.open = true;   // Expand
item.open = false;  // Collapse
item.toggle();
        
          AttributeValuesDescription

          titlestringHeader text (on accordion-item)
openbooleanInitially expanded (on accordion-item)

Attribute	Values	Description
`title`	string	Header text (on accordion-item)
`open`	boolean	Initially expanded (on accordion-item)

Tabs

Tabbed content panels for organizing related information.

This is the overview tab content.

This is the features tab content.

Tabs

const tabs = document.querySelector('ry-tabs'); // Listen for tab changes tabs.addEventListener('ry:change', (e) => { console.log(e.detail.index); // 0, 1, 2... console.log(e.detail.title); // "Overview" }); // Switch tabs programmatically tabs.activeIndex = 1; // Switch to second tab

Attribute	Values	Description
`title`	string	Tab label (on tab)
`active`	boolean	Initially selected (on tab)

Modal

Focus-trapped dialog overlay for confirmations and forms.

Modal

const modal = document.querySelector('ry-modal'); modal.addEventListener('ry:open', () => console.log('opened')); modal.addEventListener('ry:close', () => console.log('closed')); // Open/close programmatically modal.open(); modal.close();

Attribute	Values	Description
`id`	string	Modal identifier
`title`	string	Header title
`close`	boolean	Closes modal (on button)

Dropdown

Click-triggered menu for actions and navigation options.

Edit

Duplicate

Delete

        Dropdown

const dropdown = document.querySelector('ry-dropdown');

dropdown.addEventListener('ry:select', (e) => {
  console.log(e.detail.value);  // "Edit", "Delete", etc.
});

dropdown.open();
dropdown.close();
        
          AttributeValuesDescription

          first child—First child element is used as the trigger

Attribute	Values	Description
`first child`	—	First child element is used as the trigger

Field

Form field wrapper that auto-generates labels, hints, and error states.

Field

Attribute	Values	Description
`label`	string	Field label text
`error`	string	Error message (hides hint when set)
`hint`	string	Helper text below input

Checkbox

Native checkbox with themed styling.

Accept terms and conditions Subscribe to newsletter Disabled option

Checkbox

Attribute	Values	Description
`checked`	boolean	Initially checked
`disabled`	boolean	Disable interaction

Radio

Grouped radio buttons for single-selection choices.

Free plan Pro plan Enterprise Disabled

Radio

Attribute	Values	Description
`name`	string	Groups radios together
`value`	string	Value when selected
`checked`	boolean	Initially selected
`disabled`	boolean	Disable interaction

Badge

Small status indicators with semantic color variants.

Default Primary Success Warning Danger Accent Custom Color

        Badge

          AttributeValuesDescription

          variantdefault | primary | success | warning | danger | accentBadge style
--ry-badge-colorCSS colorArbitrary background color via style
--ry-badge-textCSS colorArbitrary text color via style

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

Alert

Contextual feedback messages for info, success, warnings, and errors.

This is an informational message. Operation completed successfully. Please review before continuing. Something went wrong.

        Alert

          AttributeValuesDescription

          typeinfo | success | warning | dangerAlert style
titlestringAlert heading

Attribute	Values	Description
`type`	info \| success \| warning \| danger	Alert style
`title`	string	Alert heading

Switch

Toggle control for binary on/off settings.

Enable notifications Dark mode Disabled switch

        Switch

const toggle = document.querySelector('ry-switch');

toggle.addEventListener('ry:change', (e) => {
  console.log(e.detail.checked);  // true or false
  console.log(e.detail.name);     // "notifications"
});

toggle.checked;           // true
toggle.checked = false;   // Turn off
        
          AttributeValuesDescription

          namestringForm field name
checkedbooleanInitially checked
disabledbooleanDisable interaction

Attribute	Values	Description
`name`	string	Form field name
`checked`	boolean	Initially checked
`disabled`	boolean	Disable interaction

Slider

Range input with single or dual handles, ticks, and color variants.

        Slider

        
          
        

        
const slider = document.querySelector('ry-slider');

slider.addEventListener('ry:input', (e) => {
  console.log(e.detail.value);  // 50
});

slider.addEventListener('ry:change', (e) => {
  saveVolume(e.detail.value);
});

slider.value;         // 50
slider.value = 75;    // Update value
        

        
          AttributeValuesDescription

          minnumberMinimum value (default: 0)
maxnumberMaximum value (default: 100)
stepnumberStep increment, 0 for smooth (default: 1)
valuenumberCurrent value (single slider)
start / endnumberRange values (with range attribute)
rangebooleanEnable dual-handle range mode
labeledbooleanShow value labels
tickedbooleanShow tick marks
tooltipbooleanShow value on thumb hover
verticalbooleanVertical orientation
reversedbooleanReverse direction
colorprimary | secondary | success | warning | danger | infoTrack color
sizesm | lgSize variant
disabledbooleanDisable 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

Knob

Rotary dial control for precise numeric input.

        Knob

const knob = document.querySelector('ry-knob');

knob.addEventListener('ry:input', (e) => {
  console.log(e.detail.value);  // 0-100
});

knob.addEventListener('ry:change', (e) => {
  saveSettings({ volume: e.detail.value });
});

knob.value;         // 50
knob.value = 75;    // Update value
        
          AttributeValuesDescription

          minnumberMinimum value (default: 0)
maxnumberMaximum value (default: 100)
stepnumberStep increment, 0 for smooth (default: 0)
valuenumberCurrent value
labelstringLabel text below knob
labelsstringComma-separated display labels for discrete values
descriptionstringTooltip text shown on hover
colorprimary | secondary | success | warning | dangerTrack color
sizesm | lgSize variant
disabledbooleanDisable 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

Number Select

Compact numeric stepper with configurable arrows, drag, and direct editing.

Arrow placement

Icon styles

Prefix & suffix

Sizes

        Number Select

        
          
        

        
const ns = document.querySelector('ry-number-select');

ns.addEventListener('ry:input', (e) => {
  console.log('input:', e.detail.value);
});
ns.addEventListener('ry:change', (e) => {
  console.log('change:', e.detail.value);
});

ns.value;           // 50
ns.value = 75;
        

        
          AttributeValuesDescription

          minnumberMinimum value (default: 0)
maxnumberMaximum value (default: 100)
stepnumberStep increment (default: 1)
valuenumberCurrent value (default: 0)
arrowsboth | start | end | stacked | noneButton placement (default: both)
iconsplus-minus | chevron | arrowButton icon style (default: plus-minus)
dragx | y | noneDrag direction (default: x, stacked defaults to y)
prefixstringText before value (e.g. "$")
suffixstringText after value (e.g. "°", "%")
editablebooleanAllow direct typing on click
wrapbooleanWrap around min/max boundaries
sizexs | sm | lgSize variant
disabledbooleanDisable interaction

        
      

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

Color Picker

Visual color selection with spectrum, sliders, and optional swatches.

Dropdown mode (default) — click to open:

With swatches:

Inline mode — always visible:

        Color Picker

const picker = document.querySelector('ry-color-picker');

picker.addEventListener('ry:input', (e) => {
  console.log(e.detail.value);  // "#3b82f6"
});

picker.addEventListener('ry:change', (e) => {
  saveColor(e.detail.value);
});

picker.value;                    // "#3b82f6"
picker.value = '#ff0000';
picker.setColor('hsl(200, 100%, 50%)');
        
          AttributeValuesDescription

          valuecolor stringInitial color (hex, rgb, hsl)
formathex | rgb | hslOutput format (default: hex)
inlinebooleanAlways show picker (no dropdown)
opacitybooleanEnable alpha channel slider
swatchesstringPreset colors separated by semicolons
disabledbooleanDisable interaction

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

Color Input

Text input paired with a color swatch for direct hex/rgb entry.

        Color Input

const input = document.querySelector('ry-color-input');

input.addEventListener('ry:change', (e) => {
  console.log(e.detail.value);  // "#3b82f6"
});

input.value;           // "#3b82f6"
input.value = '#ff0000';
        
          AttributeValuesDescription

          valuecolor stringInitial color (hex, rgb, hsl)
formathex | rgb | hslOutput format (default: hex)
opacitybooleanEnable alpha channel slider
placeholderstringPlaceholder text for input
disabledbooleanDisable interaction

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

Gradient Picker

Multi-stop gradient editor for linear and radial gradients.

Linear gradient (default):

Multi-stop rainbow with CSS output:

Radial gradient:

        Gradient Picker

const picker = document.querySelector('ry-gradient-picker');

picker.addEventListener('ry:input', (e) => {
  console.log(e.detail.value);  // CSS gradient string
  console.log(e.detail.stops);  // [{ id, color, position }, ...]
});

picker.value;           // "linear-gradient(90deg, ...)"
picker.value = 'radial-gradient(circle, #ff0000 0%, #0000ff 100%)';
picker.addStop('#ff00ff', 50);
        
          AttributeValuesDescription

          valueCSS gradient stringInitial gradient value
disabledbooleanDisable interaction

Attribute	Values	Description
`value`	CSS gradient string	Initial gradient value
`disabled`	boolean	Disable interaction

Toggle Button

Pressable button for radio-style selection, supports block card layout.

Bronze
Standard Network
$85/month
Deductible: $6,000 · Coverage: 60%

Silver
Enhanced Network
$145/month
Deductible: $3,000 · Coverage: 80%

Gold
Premium Network
$220/month
Deductible: $1,000 · Coverage: 90%

Medical

Dental

Vision

        Toggle Button

const btn = document.querySelector('ry-toggle-button');

btn.addEventListener('ry:change', (e) => {
  console.log(e.detail.pressed);  // true or false
  console.log(e.detail.value);    // "bronze", etc.
});

btn.pressed = true;
        
          AttributeValuesDescription

          namestringGroups buttons (same name = only one pressed)
valuestringValue when selected
pressedbooleanCurrently pressed
disabledbooleanDisable interaction
sizesm | md | lgButton size

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

Tooltip

Contextual hover text anchored to any element.

        Tooltip

          AttributeValuesDescription

          contentstringTooltip text
positiontop | bottom | left | rightTooltip position

Attribute	Values	Description
`content`	string	Tooltip text
`position`	top \| bottom \| left \| right	Tooltip position

Drawer

Slide-out panel for secondary content and navigation.

Drawer Title

Drawer content here.

Drawer

const drawer = document.querySelector('ry-drawer'); drawer.addEventListener('ry:open', () => console.log('opened')); drawer.addEventListener('ry:close', () => console.log('closed')); drawer.open(); drawer.close();

Attribute	Values	Description
`id`	string	Drawer identifier
`side`	left \| right \| bottom	Slide direction

Toast

Transient notification messages triggered programmatically.

        Toast

RyToast.success('Changes saved!');
RyToast.error('Something went wrong');
RyToast.warning('Please review');
RyToast.info('New update available');

// With options
RyToast.success('Saved!', { duration: 5000 });
        
          MethodDescription

          RyToast.success(msg)Show success toast
RyToast.error(msg)Show error toast
RyToast.warning(msg)Show warning toast
RyToast.info(msg)Show info toast

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

Select

Custom dropdown for single or multi-value selection with keyboard support.

        Select

const select = document.querySelector('ry-select');

select.addEventListener('ry:change', (e) => {
  console.log(e.detail.value);  // "us"
  console.log(e.detail.label);  // "United States"
});

select.value;           // "us"
select.value = 'uk';
select.open();
select.close();
        
          AttributeValuesDescription

          placeholderstringPlaceholder text
namestringForm field name
disabledbooleanDisable select
multiplebooleanEnable multi-select with tags
clearablebooleanShow clear button (multi)
max-selectionsnumberMax selections (multi)

Attribute	Values	Description
`placeholder`	string	Placeholder text
`name`	string	Form field name
`disabled`	boolean	Disable select
`multiple`	boolean	Enable multi-select with tags
`clearable`	boolean	Show clear button (multi)
`max-selections`	number	Max selections (multi)

Combobox

Searchable dropdown that filters options as you type.

        Combobox

const combobox = document.querySelector('ry-combobox');

combobox.addEventListener('ry:change', (e) => {
  console.log(e.detail.value);  // "us"
  console.log(e.detail.label);  // "United States"
});

combobox.value;           // "us"
combobox.value = 'uk';
        
          AttributeValuesDescription

          placeholderstringPlaceholder text for input
namestringForm field name
valuestringCurrently selected value
disabledbooleanDisable combobox

Attribute	Values	Description
`placeholder`	string	Placeholder text for input
`name`	string	Form field name
`value`	string	Currently selected value
`disabled`	boolean	Disable combobox

Code

Syntax-highlighted code block with copy button.

const greeting = "Hello!"; console.log(greeting);

Code

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.

Table

Styled HTML table with optional borders and striping.

Name	Role	Status
Alice Johnson	Engineer	Active
Bob Smith	Designer	Active
Carol White	Manager	Away

        Table

          AttributeValuesDescription

          data-borderedbooleanAdd borders to all cells
data-stripedbooleanAlternate row backgrounds

Name	Role
Alice	Engineer
Bob	Designer

Attribute	Values	Description
`data-bordered`	boolean	Add borders to all cells
`data-striped`	boolean	Alternate row backgrounds

Tree

Hierarchical file/folder view with expand/collapse and drag-to-sort.

        Tree

const tree = document.querySelector('ry-tree');

tree.addEventListener('ry:select', (e) => {
  console.log(e.detail.label);  // "button.tsx"
});

tree.addEventListener('ry:move', (e) => {
  console.log(`Moved "${e.detail.item}" ${e.detail.position} "${e.detail.target}"`);
});

tree.toJSON();   // [{ label: "src", open: true, children: [...] }]
        
          AttributeValuesDescription

          labelstringItem label (on tree-item)
openbooleanInitially expanded folder (on tree-item with children)
selectedbooleanInitially selected file (on leaf tree-item)
sortablebooleanEnable drag-and-drop rearranging (on tree)
no-animatebooleanDisable expand/collapse animation (on tree)
--ry-tree-durationCSS timeAnimation duration (default: 150ms)

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)

Icon

Inline SVG icons from the built-in registry.

        Icon

          AttributeValuesDescription

          nameclose | check | chevron-* | copy | sun | moon | info | warning | error | success | search | menu | plus | minus | settings | user | heart | star | trash | edit | external-link | download | uploadIcon name
sizenumberSize in pixels (default: 24)
labelstringAccessible label

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

Tag

Labeled chips with color variants and optional remove button.

Default Primary Success Warning Danger Removable Remove me Small Large

        Tag

          AttributeValuesDescription

          variantdefault | primary | success | warning | dangerColor variant
sizesm | md | lgSize
removablebooleanShow close button
data-valuestringValue included in ry:remove event

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

Tag Input

Text input that creates removable tags from typed values.

        Tag Input

          AttributeValuesDescription

          placeholderstringInput placeholder
delimiterstringDelimiter character (default ",")
max-tagsnumberMax number of tags
valuestringInitial comma-separated values
namestringForm field name

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

Hero

Full-width landing section with headline, copy, and CTA buttons.

Build apps faster

Framework-agnostic, Light DOM web components. CSS is the source of truth.

Hero

Attribute	Values	Description
`align`	center \| left	Text alignment
`size`	sm \| md \| lg	Padding size
`full-bleed`	boolean	Remove max-width

Stat

Key metric display with trend indicators for dashboards.

        Stat

          AttributeValuesDescription

          trendup | downTrend arrow direction
sizesm | md | lgValue text size
alignleft | centerAlignment

Attribute	Values	Description
`trend`	up \| down	Trend arrow direction
`size`	sm \| md \| lg	Value text size
`align`	left \| center	Alignment

Feature Grid

Icon-and-text cards arranged in columns for feature showcases.

Easy Setup

One line of code to get started. No build step required.

Developer Friendly

Clean API, great docs, and TypeScript support.

Lightweight

Under 10KB gzipped. No dependencies.

Feature Grid

Attribute	Values	Description
`cols` (grid)	2 \| 3 \| 4	Number of columns
`icon` (feature)	icon name	Icon from registry
`align` (feature)	left \| center	Content alignment

Pricing

Side-by-side plan comparison cards with featured highlight.

5 projects
Community support
Basic analytics

Unlimited projects
Priority support
Advanced analytics

Everything in Pro
SLA guarantee
Custom integrations

        Pricing

          AttributeValuesDescription

          featuredbooleanHighlight this card

Attribute	Values	Description
`featured`	boolean	Highlight this card

Testimonial

Customer quote card with avatar, star rating, and attribution.

This library changed how we build UIs. Everything just works. Clean, fast, and framework-agnostic. Exactly what we needed. We shipped our entire dashboard in half the time.

        Testimonial

          AttributeValuesDescription

          stars1–5Star rating display
avatarURLAvatar photo URL
nametextPerson's name
roletextTitle / company

Attribute	Values	Description
`stars`	1–5	Star rating display
`avatar`	URL	Avatar photo URL
`name`	text	Person's name
`role`	text	Title / company

Carousel

Swipeable slide viewer with arrows, dots, and looping.

Slide 1

First slide content

Slide 2

Second slide content

Slide 3

Third slide content

        Carousel

          AttributeValuesDescription

          arrowsbooleanShow prev/next arrows
dotsbooleanShow dot indicators
loopbooleanLoop back to start
autoplaybooleanAuto-advance slides
intervalnumberAutoplay interval in ms (default 5000)
pause-on-hoverbooleanPause autoplay on hover

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

Grid

Grid

Stack

Stack

Cluster

Cluster

Card

Card Title

Hover Me

Keyboard Accessible

Card

Card Title

Hover Me

With Link

Button

Button

Split

Split

Check List

Check List

Accordion

Accordion

Tabs

Tabs

Modal

Modal

Dropdown

Dropdown

Field

Field

Checkbox

Checkbox

Radio

Radio

Badge

Badge

Alert

Alert

Switch

Switch

Slider

Slider

Knob

Knob

Number Select

Number Select

Color Picker

Color Picker

Color Input

Color Input

Gradient Picker

Gradient Picker

Toggle Button

Toggle Button

Tooltip

Tooltip

Drawer

Drawer Title

Drawer

Drawer Title

Toast

Toast

Select

Select

Combobox

Combobox

Code

Code

Table

Table

Tree

Tree

Icon

Icon

Tag

Tag

Tag Input

Tag Input

Hero

Build apps faster