Showcase (legacy)
All components in one page
Quick visual reference of every component. Detailed docs live on individual pages — see the Components catalog.
Typography
Type hierarchy with system font stack. All sizes maintain proper line heights and weights.
Display Large (h1)
Display Medium (h2)
Display Small (h3)
Title Large (h4)
Title Medium (h5)
Title Small (h6)
Body text (16px). This is the default paragraph size used throughout the system. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Caption (13px). Small text for footnotes and supplementary information.
Label (11px). The smallest size for labels, badges, and captions.
Colors
Semantic color tokens with built-in dark mode support. Based on Apple HIG with accessible contrast ratios (WCAG 2.1 AA).
Status Colors
Surface Colors
Badges
Small contextual labels for status, tags, or counters.
Variants
With Dot
Separators
Horizontal and vertical dividers, with optional labels.
Horizontal
Separator without label
With Label
Vertical
Avatars
Profile images, initials, and status indicators.
Sizes
With Initials
Square Variant
With Status Indicator
Avatar Group (Stack)
Spinners
Loading indicators in various sizes.
Light Variant
Skeletons
Placeholder content for loading states.
Keyboard Keys
Semantic HTML for keyboard shortcuts and commands.
Icons
SVG icons with size, color, and animation utilities via .ren-icon classes.
Sizes
Color Variants
Spinning Icon
Form Fields
Input, textarea, select fields with validation states.
Textarea
Checkbox
Custom-styled checkboxes with accessibility.
Group
Switch (Toggle)
Binary toggle control for on/off states.
Radio Buttons
Single-select from multiple options.
Vertical Group
Horizontal Group
Disabled
Progress
Visual progress indicators with various values and states.
Values
With Status Colors
Tabs
Tabbed interface for organizing content.
Underline (Default)
Content for Tab 1
Pills Style
Content for Tab 1
Enclosed Style
Content for Tab 1
Accordion
Collapsible sections using .ren-accordion with native <details>.
Default
What is RenDS?
RenDS is a vanilla, accessible, atomic design system. No framework required. Built with Web Components, CSS custom properties, and modern web standards.
How does theming work?
RenDS uses a 3-layer token system: primitives, semantic, and component tokens. Apply a theme with data-theme="ocean" on any parent element.
Is it accessible?
Yes. All components follow WAI-ARIA patterns, support keyboard navigation, focus management, and screen readers. WCAG 2.1 AA compliant.
Open by Default
This item starts open
Multiple items can be open simultaneously. Each <details> element manages its own state natively.
This one starts closed
Click to expand. The chevron rotates smoothly with CSS transitions.
Dialog (Modal)
Modal dialog using .ren-dialog with native <dialog> element. Animated entry/exit, backdrop blur, focus trap.
Toast Notifications
Temporary feedback messages using .ren-toast with viewport positioning and auto-dismiss.
Layout Primitives
Utilidades de layout reutilizables. No son componentes visuales, son helpers invisibles que controlan cómo se distribuyen los elementos.
Stack
Apila elementos verticalmente con espaciado uniforme. Ideal para formularios, listas de cards, secciones de contenido.
Card de perfil con .ren-stack-sm
Design System Developer
Formulario con .ren-stack
Variantes de gap
stack-xs
stack-md
stack-xl
Cluster
Agrupa elementos en horizontal y los wrappea cuando no entran. Ideal para tags, botones, chips.
Row
Fila horizontal que NO wrappea. Para layouts inline que deben mantenerse en una línea (navs, toolbars, headers).
Online
Center
Centra contenido con ancho máximo. Para contenedores de texto, artículos, páginas de contenido.
El contenido se centra horizontalmente
con un max-width controlado.
Grid
Grid responsive que se adapta automáticamente. Las cards se redistribuyen según el espacio disponible.
Number Field (Stepper)
Input field with increment/decrement buttons for numeric values, supporting min/max bounds and different sizes.
Basic Stepper
With Min/Max Bounds
Range 0-50
Range 10-100
Different Sizes
Small
Default
Large
Disabled State
Input OTP
One-time password input with auto-focus and paste support for different code lengths and types.
6-Digit Numeric OTP
4-Digit Numeric OTP
Alphanumeric OTP
Disabled State
Data Table
Interactive data table with sorting, multi-select, and pagination capabilities.
| Name | Role | Status | ||
|---|---|---|---|---|
| John Doe | john.doe@company.com | Manager | Active | |
| Jane Smith | jane.smith@company.com | Developer | Active | |
| Mike Johnson | mike.johnson@company.com | Designer | Pending | |
| Sarah Williams | sarah.williams@company.com | Analyst | Active | |
| Robert Brown | robert.brown@company.com | Manager | Inactive | |
| Emily Davis | emily.davis@company.com | Developer | Active | |
| David Martinez | david.martinez@company.com | Designer | Active | |
| Lisa Anderson | lisa.anderson@company.com | Analyst | Pending |
Form Validation
Multi-section form with field validation, error summaries, and submission handling.
Multi-Step Form
Three-step form wizard with progress indicator and navigation controls.
Personal Information
Cards → Full documentation
Flexible content containers with multiple variants. Support headers, footers, images, status accents, and interactive states.
Basic Card
Project Update
Last updated 2 hours ago
The new dashboard is ready for review. All components have been tested and documented.
Card Variants
Raised shadow for emphasis
Subtle border, no shadow
Transparent background
Interactive & Status
Hover me — lifts on hover
Top accent border
Error state accent
Links
Styled anchor links with semantic variants: default, muted, plain, external, nav, and skip.
Pagination
Page navigation with 44px touch targets, current page indicator, and disabled states.
Default
Simple
Collapsible
Native <details>/<summary> with animated height transitions. Zero JavaScript — uses interpolate-size: allow-keywords.
What is RenDS?
RenDS is a vanilla HTML/CSS/JS design system with zero framework dependencies. It uses modern browser APIs like the Popover API, <dialog>, and CSS @starting-style for rich interactions with minimal JavaScript.
How is this different from an accordion?
A collapsible is a single expandable section. An accordion is a group of collapsibles where only one can be open at a time (using the name attribute on <details>).
Ghost variant (no border)
This variant removes the border and background, useful for inline expandable sections within other content.
Toolbar
WAI-ARIA Toolbar with roving tabindex. Arrow keys navigate items, Home/End jump to first/last.
Text Formatting Toolbar
Ghost Variant
DropZone
Drag-and-drop file upload area. Dispatches ren-files-added custom event with the dropped files.
Drag files here or click to browse
Supports images, PDFs, and documents up to 10 MB
Compact
Drop files or browse
Empty State
Reusable pattern for no-data states in tables, lists, and cards. CSS-only, no JS needed.
Full Empty State
No products yet
Add your first product to start managing your inventory.
Compact (inline)
No results match your search.
Bordered (for inside cards)
No notes
Start writing to capture your thoughts.
Alert Dialog
Confirmation dialog using native <dialog>. Blocks interaction — requires explicit confirm/cancel. No outside-click dismiss.
Tooltip
Popover API-based tooltips with arrow positioning. Triggered on hover/focus via JS.
Popover
Rich content popover using the Popover API with anchor positioning. Supports header, body, footer, and arrow.
Sheet
Slide-in panel using <dialog>. Supports left, right, top, bottom sides with size variants.
Hover Card
Rich content preview on hover using the Popover API with anchor positioning. Great for user profiles, link previews.
Hover over @rensoconese to see their profile card.
@rensoconese
Creator of RenDS — a vanilla design system with zero dependencies.
Combobox
Searchable dropdown with type-ahead filtering. Mirrors placement to data-side and uses aria-selected for selection.
Slider
Native <input type="range"> with custom styling. Supports sizes, colors, vertical mode, and marks.
Toggle Group
Segmented control with aria-pressed or data-state="on". Outline, size, and vertical variants.
Default
Outline
Sizes
Scroll Area
Custom-styled scrollbar container with size presets, auto-hide, fade gradients, and direction control.
Vertical (200px)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
With Fade
This scroll area has fade gradients at the top and bottom edges to visually hint at more content.
Scroll down to see the fade effect in action.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut enim ad minim veniam, quis nostrud exercitation.
Duis aute irure dolor in reprehenderit in voluptate.
Color Picker
Full-featured color picker with saturation canvas, hue/alpha sliders, HEX/RGB/HSL inputs, eyedropper, and preset swatches. Uses Popover API with data-side placement.
Calendar
Accessible calendar grid with keyboard navigation (arrow keys). Supports selected dates, ranges, today highlight, and outside days.
Date Picker
Trigger button that opens a calendar in a popover. Supports presets, range mode, and validation states.
Date Range Picker
Trigger button that opens a pair of calendars in a popover for selecting a start/end range. Ships preset shortcuts (Last 7 days, This month, etc.), apply/cancel actions, and a summary of the selected span.
Shipped as a Web Component (<ren-date-range-picker>) that hydrates the markup above — see the component README for live usage, presets, locale, and form-wire-up.
Carousel
CSS scroll-snap carousel with arrow navigation, dot indicators, and optional autoplay. Touch-friendly, keyboard accessible.
Custom Select
Popover-based select with search, groups, multi-select chips, and keyboard navigation. Replaces native <select>.
Command Palette
Searchable command menu (⌘K pattern) with grouped items, keyboard shortcuts, and descriptions. Uses fixed modal with backdrop blur.
Dynamic Type
Apple HIG-inspired adaptive typography with 4 size scales: xSmall, Default, Large, xLarge. Set data-type-scale on any container.
Display
Title — Section headings
Headline — Emphasized body
Body — Default content text used for paragraphs and descriptions.
Callout — Slightly smaller, secondary content
Subhead — Supporting information
Footnote — Fine print and metadata
Caption — Smallest readable text
Appearance API
Theme the entire system by setting data-theme, data-shape, and data-density attributes. 6 color presets + shape + density combos.
Color Themes
Shape
Density
Preview
Theme preview
These components respond to the theme, shape, and density settings above.
AI Patterns
Carbon for AI-inspired components for AI-generated content: messages, citations, streaming indicators, confidence, and prompt input.
AI Slug
This response was generated by AI