Buttons
Primary
Secondary
Outline
Ghost
Danger
Accent
Small
Default
Large
Disabled
Cards
Basic Card
Card body with muted text and standard spacing.
Interactive
Hover and click me to see the interaction style.
Active
With Badge
Cards compose with other components naturally.
Alerts
Informational message for the user.
Operation completed successfully.
Proceed with caution here.
Something went wrong.
Badges
Default
Primary
Success
Warning
Danger
Accent
Tabs
Tab content for the overview section. Notice how the active tab reflects the primary color.
Settings tab content.
Activity log goes here.
Accordion
Framework-agnostic web components with CSS-driven theming. Light DOM, zero dependencies.
Set a handful of core CSS variables. Everything else derives automatically.
Override any derived token for fine control beyond the core knobs.
Code
:root {
--ry-color-primary: oklch(0.6 0.2 260);
--ry-color-secondary: oklch(0.55 0.04 257);
--ry-color-accent: oklch(0.63 0.21 304);
--ry-radius-base: 0.375rem;
--ry-shadow-strength: 1;
}
Modal & Drawer
Open Modal
Open Drawer
This modal inherits all theme properties — colors, radius, shadows, fonts.
Confirm
Cancel
Drawer Panel
Side panel with theme-derived styling.