The skin of the Rueda.Dev ecosystem.
Copy-into-your-project components built on Radix UI + Tailwind. One file per component, fully editable, theme-swappable in runtime.
npx "@rueda.dev/gems-diamond" init
Browse components →
Components (105)
Accordion
Collapsible stack — single or multi expand, controlled or uncontrolled, with leading/trailing slots.
6 variants · 1 categories
Alert
Static important messages — info, success, warning, danger, brand and editorial notice.
6 variants · 1 categories
Alert Dialog
Urgent interruption built on @radix-ui/react-alert-dialog — destructive delete, unsaved-changes warn, left-rail danger, dark critical, mono error code, floating danger icon.
6 variants · 1 categories
Aspect Ratio
Media ratio wrappers for video, square, portrait, cinematic, photo, and social formats.
6 variants · 1 categories
Audio Player
Audio player wrapper — minimal, podcast row, waveform, live radio, playlist, pill.
6 variants · 1 categories
Autocomplete
Typeahead input with filtered suggestions — basic, with hints, with recents, @ mentions, slash commands and inline ghost hint.
6 variants · 1 categories
Avatar
User identity primitive — initials, image, status, ring. 6 visual variants × 5 sizes.
6 variants · 1 categories
Avatar Group
Stacked avatars with overflow indicator and configurable spacing.
6 variants · 1 categories
Badge
Count, status, dot, and label variations with semantic tones and floating support.
6 variants · 1 categories
Bottom Navigation
Mobile bottom navigation patterns with labels, icons, center action, active pills, top indicators, and active chips.
6 variants · 1 categories
Bottom Sheet
Panel anchored to the bottom of the viewport built on @radix-ui/react-dialog — share grid, sort with selection, grouped settings, quick contact, scrollable detail, media now-playing.
6 variants · 1 categories
Box
Generic layout container primitives for cards, callouts, elevated surfaces, terminal panels, and hard-shadow blocks.
6 variants · 1 categories
Breadcrumbs
Hierarchical trails for slash, chevron, slab, filesystem, ellipsis, and editorial breadcrumb patterns.
6 variants · 1 categories
Button
59 button variants. Tailwind-only, Radix Slot composition, single file.
59 variants · 10 categories
Calendar
Date display — month grid, agenda, year heatmap, range selection.
6 variants · 1 categories
Card
Versatile entity container — supports media, meta, title, description, footer slots; data-driven or composition.
6 variants · 1 categories
Carousel
Transform-based slider with drag / swipe (touch + mouse), keyboard navigation, pause-on-hover autoplay, configurable slidesPerView and loop, across dots / arrows / thumbs / cards / circular / progress variants.
6 variants · 1 categories
Center
Centering primitives for flex, crosshair, column, grid, absolute, and margin-auto placement.
6 variants · 1 categories
Chart
Small SVG chart primitives for area lines, bars, donuts, scatter plots, target bars and radar charts.
6 variants · 1 categories
Chat Bubble
Message containers for conversational UIs — supports avatars, typing, media, and side alignment.
6 variants · 1 categories
Checkbox
Single checkbox **or** group — square, round, switch-style, card, x-mark, ASCII single controls; stacked, card grid, pills, select-all, days-of-week and priced-rows group layouts.
12 variants · 2 categories
Chip
Interactive labels — filterable, dismissible, with dot/emoji/add variants.
6 variants · 1 categories
Code Block
Formatted code with optional filename, line numbers, copy, diff, and editorial quote rendering.
6 variants · 1 categories
Color Picker
Color selection — swatch grid, hex input, color wheel, HSL sliders, hue strip, shade scale.
6 variants · 1 categories
Command Palette
Searchable command launcher with project, suggested, terminal, jump, people and AI prompt variants.
6 variants · 1 categories
Confirm Dialog
“Are you sure?” prompt built on @radix-ui/react-alert-dialog — archive simple, icon + subtitle, purchase summary, emoji deploy, persistence checkbox, terminal confirm.
6 variants · 1 categories
Container
Responsive content width constraints for small, medium, fluid, stepped, prose, and ruled layouts.
6 variants · 1 categories
Context Menu
Context menu regions for standard, file, tinted, compact, share, and git-style action lists.
6 variants · 1 categories
Cookie Banner
Privacy consent banner — classic bottom bar, inverted slim, granular preferences, corner chip, terminal prompt, editorial note.
6 variants · 1 categories
Data Grid
Sortable, filterable, groupable table with toolbar, selection, and inline bar visualizations.
6 variants · 1 categories
Date Picker
Single-date picker — calendar grid (Radix Popover), real native <input type="date">, inline pill, big-date card, terminal, quick presets.
6 variants · 1 categories
Date Range Picker
Pick a start and end ISO date — pill span, calendar range, presets, twin native, stacked cards, duration bar.
6 variants · 1 categories
Dialog
Modal window built on @radix-ui/react-dialog with focus trap, ESC dismiss and scroll lock — standard, success, dark cinematic, header+footer, editorial left-rail, brutalist hard-shadow.
6 variants · 1 categories
Divider
Accessible separators for soft, strong, dashed, labeled, ornament, and vertical divisions.
6 variants · 1 categories
Drawer
Panel sliding from any edge built on @radix-ui/react-dialog — right nav menu, left sidebar, top notifications, right edit panel, right cart dark, left file tree mono.
6 variants · 1 categories
Dropdown Menu
Button-triggered menus with sort, retro, searchable, pill trigger, bulk action, and terminal variants.
6 variants · 1 categories
Dropzone
Drag-and-drop file area — classic big, compact row, grid slots, with progress, hatched pattern, circular avatar.
6 variants · 1 categories
Empty State
“No data to show” containers with art, copy and CTA — inbox, CTA, no-results, dropzone, editorial 404, all caught up.
6 variants · 1 categories
Error State
System failure containers — classic 404, 500 server, playful broken, connection lost, terminal output and friendly code.
6 variants · 1 categories
Fieldset
Semantic grouping of related controls wrapping <fieldset>/<legend> — classic, card with accent bar, horizontal rule, section header, numbered step, editorial italic.
6 variants · 1 categories
File Input
Single file picker wrapping <input type="file"> — classic upload, segmented filename + browse, image preview tile, dashed attach, terminal, FAB +.
6 variants · 1 categories
Flex
Flexbox layout primitives for rows, distributed rows, columns, wrapping groups, centering, and baseline-style bars.
6 variants · 1 categories
Form
Opinionated <form> shell with title, description and footer slots — login card, minimal stack, stepped progress, terminal login, subscribe CTA, compact profile.
6 variants · 1 categories
Form Field
Composed wrapper around any control with FormLabel + FormHelper + FormError slots. Replaces standalone form-label, helper-text and error-message — six variants for each slot.
18 variants · 3 categories
Grid
CSS Grid scaffolds for uniform columns, fractional columns, auto-fit tracks, twelve-column systems, and masonry-like rows.
6 variants · 1 categories
Grid Item
Grid child helpers for column spans, row spans, bento tiles, explicit placement, named areas, and featured cells.
6 variants · 1 categories
Heading
Semantic h1 through h6 heading styles with consistent rhythm and accessible element control.
6 variants · 1 categories
Image
Image wrapper with caption, badge, ratio control, and placeholder fallback.
6 variants · 1 categories
Input
Consolidated single-line input — text, password, number, search and masked types in one component. Wraps the real <input>; visual variants live in `variant`.
24 variants · 5 categories
Kanban
Drag-and-drop column board with hover-active focus, WIP limits, animated checkboxes, quick-move buttons, and inline add / edit / remove.
6 variants · 1 categories
Kbd
Keyboard key indicator with chord helper. 6 visual variants.
6 variants · 1 categories
Language Switcher
Locale picker with dropdown, code chip, full menu, segmented, searchable and regional dark variants.
6 variants · 1 categories
Lightbox
Full-screen media viewer built on @radix-ui/react-dialog with keyboard navigation — counter + arrows, with caption, thumbnail strip, action toolbar, video with scrubber, EXIF metadata.
6 variants · 1 categories
Link
Anchor variants for default, icon, decorative underline, numbered mono, pill, and editorial link styles.
6 variants · 1 categories
List
Vertical grouping primitive — data-driven items with leading/trailing slots, custom renderer, or composition.
6 variants · 1 categories
List Item
Flexible row primitive with leading, title/description, and trailing slots.
6 variants · 1 categories
Map
Lightweight map visualization shell for pins, clusters, dark maps, routes, heatmaps and place cards.
6 variants · 1 categories
Mega Menu
Multi-column dropdown navigation for SaaS, commerce, docs, solutions, editorial, and icon-grid menus.
6 variants · 1 categories
Menu
Action menu lists for shortcut, grouped, accent, toggle, terminal command, and user-header layouts.
6 variants · 1 categories
Multi-Select
Multi-choice control — tag pills (free typing), chip dark, checklist, filter chips, segmented bar, dropdown with checks.
6 variants · 1 categories
Navbar
Top navigation header patterns for classic, tinted, searchable, commerce, pill-shaped, and terminal app bars.
6 variants · 1 categories
Notification Center
Grouped notifications panel with read/unread state, optional tabs and time grouping — classic, tabbed, grouped, dark, calendar and banner layouts.
6 variants · 1 categories
Notification Dot
Unread indicator — dot, counted badge, pulsing live signal, status ring, overflow pill, or presence legend.
6 variants · 1 categories
Offline Indicator
Network loss banners — subscribes to navigator.onLine and renders a top-bar, pill, chip, reconnecting spinner, blocker overlay or retry toast.
6 variants · 1 categories
OTP Input
One-time-passcode field — classic boxes, underlined, big XL, dashed split, terminal, read-only display.
6 variants · 1 categories
Pagination
Page navigation controls with numbered, simple, circular, compact status, jump input, and grouped variants.
6 variants · 1 categories
Paragraph
Body text blocks for default prose, editorial copy, captions, drop caps, monospace docs, and pull quotes.
6 variants · 1 categories
PDF Viewer
Document viewer shell with navigation, thumbnails, search, zoom, spread and annotation variants.
6 variants · 1 categories
Popconfirm
Inline confirm tooltip anchored to its trigger built on @radix-ui/react-popover — quick yes/no, accent variant, titled detailed, dark mini, emoji delete, terminal style.
6 variants · 1 categories
Popover
Click-triggered floating panel built on @radix-ui/react-popover — six layouts for profile cards, filter pickers, share links, color/menu pickers and mentions feeds.
6 variants · 1 categories
Pricing Table
Tier comparison cards — single, featured, stacked rows, enterprise dark, toggle billing, discount callout.
6 variants · 1 categories
Progress
Linear progress with %, stepped, striped, indeterminate and terminal ASCII styles.
6 variants · 1 categories
QR Code
QR matrix renderer with branded, inverted, Wi-Fi, export and error-level variants.
6 variants · 1 categories
Radio
Single radio button **or** group — dot, square, bullseye, card, segmented, size-pill single controls; vertical, plan-cards, segmented-bar, icon-grid, scale and stacked-list group layouts.
12 variants · 2 categories
Rating
Rate something — stars, big stars, hearts, numeric 0-10 scale, emoji reactions, gradient slider.
6 variants · 1 categories
Rich Text Editor
Composable rich text editor shell with classic, heading, quote, floating, markdown and collaborative variants.
6 variants · 1 categories
Scrollspy
Scroll-tied navigation previews for side rails, highlight pills, right-edge dots, mono editorial, badge markers, and sliding indicators.
6 variants · 1 categories
Select
Single-choice dropdown — native <select> or custom Radix Popover-driven variants for avatars, flags, flat underline and terminal.
6 variants · 1 categories
Sidebar
Side navigation menus for grouped, tinted, icon rail, workspace, editorial, and count-pill layouts.
6 variants · 1 categories
Signature Pad
Pointer-enabled canvas signature pad with line, dark, color, witness and certified variants.
6 variants · 1 categories
Skeleton
Content placeholders with shimmer — primitive block plus image, post, gallery, article, form and list scaffolds.
6 variants · 1 categories
Skip Link
Accessibility shortcuts for standard, centered, banner, outlined, multiple-target, and annotated skip links.
6 variants · 1 categories
Slider
Single-thumb or two-thumb range slider, wrapping real <input type="range"> — classic, thick, floating value, stepped, gradient, mono single; range, range-thick, range-bubbles, range-fields, range-histogram, range-mono dual.
12 variants · 2 categories
Spacer
Flexible spacing primitive for filling remaining space, pushing content, vertical fill, token scale, nav gutters, and distributed layouts.
6 variants · 1 categories
Spinner
Loading indicators — classic ring, dual rings, bouncing dots, audio bars, ring %, pulsing trio.
6 variants · 1 categories
Split Pane
Resizable-style pane compositions for editors, consoles, previews, navigation and decorative splits.
6 variants · 1 categories
Stack
Rhythmic stack layouts for tight, loose, horizontal, divided, indented, and separated content groups.
6 variants · 1 categories
Statistic
KPI displays with delta indicators, sparklines, progress bars, and grid layouts.
6 variants · 1 categories
Stepper
Wizard and progress navigation with horizontal, vertical, progress bar, numbered, segmented, and editorial variants.
6 variants · 1 categories
Switch
Boolean toggle wrapping a real <input type="checkbox" role="switch"> — classic, square, with-label, iOS-style, text bi-state, industrial.
6 variants · 1 categories
Table
Data-driven table with columns/rows or composition. 6 visual variants.
6 variants · 1 categories
Tabs
Keyboard-accessible tab views for underline, segmented, vertical, browser-style, pill, and mono editorial layouts.
6 variants · 1 categories
Tag
Categorization labels — hash, semantic, mono, slab, editorial italic, angled cut.
6 variants · 1 categories
Textarea
Multi-line text input — classic, auto-expanding, with counter, with toolbar, markdown mono, ghost underline.
6 variants · 1 categories
Theme Switcher
Appearance selector with segmented, circular, toggle, preview, menu and swatch variants.
6 variants · 1 categories
Time Picker
Time-of-day picker — HH:MM + AM/PM, big readout, split selects, time slots, analog clock face, real native <input type="time">.
6 variants · 1 categories
Timeline
Chronological events — vertical, milestone, log, horizontal stepper, historical, activity feed.
6 variants · 1 categories
Toast
Temporary notifications built on @radix-ui/react-toast — ToastProvider + useToast() hook for imperative dispatch, plus a static <Toast /> for previews. Six variants: success, undo, progress, error, minimal, action.
6 variants · 1 categories
Tooltip
Hover info bubble built on @radix-ui/react-tooltip — label, keyboard shortcut, rich pro-tip, accent, light-bordered and status indicator.
6 variants · 1 categories
Tour
Multi-step product tour — `<Tour>` orchestrator with spotlight cutout, automatic positioning, keyboard nav and 5 card variants. Plus `<TourCard>` for standalone callouts and `<TourSpotlight>` for a pulsing ring. Target any element via selector, ref or callback.
6 variants · 1 categories
Transfer List
Dual-list mover for assignments, approvals, avatar pools, filters and permission scopes.
6 variants · 1 categories
Tree View
Hierarchical tree views for files, workspaces, code highlights, counts, organization charts, and project phases.
6 variants · 1 categories
Typography
Base text rendering examples for scale, code, weights, decorations, quote, and eyebrow patterns.
6 variants · 1 categories
Video Player
Video wrapper — standard, live, vertical portrait, recording, editorial poster, accent.
6 variants · 1 categories
Visually Hidden
Screen-reader-visible utility for icon labels, hidden field labels, skip links, status text, list bounds, and live regions.
6 variants · 1 categories
Quick start
npx "@rueda.dev/gems-diamond" add button
Or scaffold first with init, then add components à la carte.