ValyroUI Русская версия

All components

All 374 components of ValyroUI for React in one catalog: search, filters by section and tag, live previews in 19 themes.

Basics

Buttons, badges, avatars, tooltips and loading indicators

  • Button — Buttons in every variant
  • Icon Button — Icon-only button
  • Color Mode Switch — Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded
  • Button Group — Grouped buttons
  • Copy to Clipboard — Copy with confirmation
  • Badge — Status labels and tags
  • Tag — Removable and clickable tags, groups with +N
  • Avatar — User avatars
  • Tooltip — Hover and focus hints
  • Separator — Dividers
  • Icon — Any icon on the kit’s rules: size from the text, the theme’s stroke, RTL mirroring, an accessible name; createIcon and a gallery of 111 icons
  • Kbd — Keyboard keys and shortcuts: one "mod+k" string shows ⌘K on a Mac and Ctrl+K elsewhere, read aloud as words
  • Highlight — Search hits marked in text: case and accents ignored, several terms in their own tones, ready-made ranges, the current hit
  • Skeleton — Loading placeholders
  • Spinner — Loading indicator
  • Progress Bar — Progress bars
  • Progress Circle — Circular progress: a ring that glides to each value, or spins while waiting

Navigation and layout

App shell, header, sidebar, tabs, menus and a command palette

Overlays and notifications

Alerts, toasts, dialogs, sheets, popovers and onboarding tours

Forms and input

Fields, selects, dates, masks, colors, files and filters

  • Text Input — Text fields
  • Input Group — A field joined with text, buttons and selects in one frame
  • Textarea — Multiline text input
  • Search Input — Search field
  • Mentions Input — Text with @mentions and #tags, async suggestions
  • Tags Input — Tag entry
  • Select — Pick one option from a list
  • Multi Select — Pick several options
  • Combobox — Searchable select
  • Listbox — Option list on the page: one or several, Shift ranges
  • Chip Group — Chip group with icons: one or several options
  • Checkbox Tree — Checkbox tree: cascading, indeterminate state, keyboard
  • Checkbox — Checkboxes
  • Checkbox Group — Checkboxes under one label, hint, error and requirement
  • Radio Group — Pick exactly one option
  • Switch — On/off toggle
  • Slider — Range slider
  • Histogram Range — Price range with a histogram, two thumbs and inputs
  • Rating Input — Star rating
  • Number Input — Numeric input
  • OTP Input — One-time code entry
  • Phone Input — Phone number with country picker, live formatting and an E.164 value
  • Masked Input — Masked input: cards with Luhn check, expiry, CVC, date, time
  • Calendar — An inline month grid: one date or a range, several months, unavailable days, your own day content
  • Date Picker — Date selection
  • Date Range Picker — Date range selection
  • Date Field — Date typed segment by segment in the locale order
  • Time Picker — Time selection
  • Time Field — Time typed segment by segment, 24-hour or AM/PM
  • Wheel Picker — iOS-style picker wheel: momentum, 3D cylinder, date and time presets
  • Date Of Birth Input — Date of birth as three selects in locale order
  • Color Picker — Color selection
  • Swatch Picker — Pick a color from swatches: product, theme, label
  • Size Picker — Size selection: tiles or a scrolling row, out-of-stock states
  • Emoji Picker — Emoji picker: search, categories, skin tones, recents
  • File Uploader — File uploads
  • Image Cropper — Image cropping: pan, zoom, rotate, aspect ratios and a round avatar
  • Label — The name of a form control: required and optional marks read as words, an info tooltip, linked inside a FormField
  • Form Field — Field with validation and errors
  • Multi-step Form — Multi-step form: per-step validation, skipping, review before submit, drafts
  • Form Autosave Status — Form autosave status: offline, error, version conflict and a useAutosave hook
  • Filter Builder — Filter builder: nested AND/OR groups, field-aware conditions, JSON and a summary
  • Filter Toolbar — Catalog filter bar: result count, dropdown filters, sorting, chips

Data and metrics

Tables, grids, lists, trees, cards and dashboard widgets

  • Data Table — Tables with search and sorting
  • Data Grid — Grid for 100,000 rows: grouping, filters, inline editing
  • Virtual List — Virtual list for 100,000 rows
  • Bulk Action Bar — Actions for selected rows, with keyboard shortcuts
  • List Block — List with images or icons, descriptions and values
  • Description List — Key–value list: stacked, inline or a grid with icons
  • Tree View — Tree structures
  • Collapsible — One section that unfolds, or a "show more" preview
  • Accordion — Collapsible sections
  • Sortable — Drag-and-drop sorting
  • JSON Viewer — JSON viewer
  • Timeline — Event timeline
  • Card — All-purpose cards
  • Item Card — Row card: icon, title, description and a control on the right
  • Record Card — Record card: status, context, key fields and actions
  • Image — Pictures without layout shift: placeholder, soft fade-in, fallback, a dark-mode source
  • Carousel — Carousel: scroll snap, swipe, autoplay, thumbnails
  • Empty State — No-data screen
  • Stats Card — Metric cards
  • KPI Group — KPI row: value, change vs. previous period, sparkline and progress to goal
  • Meter — A measurement on a scale that colours itself by thresholds: storage, battery, strength
  • Widget — Dashboard container: title, actions, big number, legend and chart area
  • Number Value — Locale-aware number: currency, percent, compact notation and units
  • Trend Value — Metric change: arrow, sign and color, as text or a pill
  • Proportion Bar — Proportion bar with a legend: storage, budget, breakdown
  • Activity Rings — Concentric progress rings toward goals
  • Leaderboard — Leaderboard: medal places, thumbnails, numbers and change over a period

Charts and analytics

Charts, maps, diagrams and “what if” scenarios

Work and teams

Calendar, scheduler, kanban, CRM, approvals and a rich text editor

  • Calendar View — Event calendar
  • Scheduler — Scheduler: day, week, month and resource timeline, drag and drop, recurrence
  • Kanban Board — Task board
  • Gantt Chart — Gantt charts with dependencies and drag to reschedule
  • Booking Slots — Meeting booking: calendar, slots in the guest’s time zone, form and confirmation
  • CRM Pipeline — Deal pipeline: stages, amounts and probabilities, drag between stages
  • Approval Flow — Multi-stage approvals: sequential and parallel stages, decisions with reasons, history
  • Goal Tracker — OKRs: objectives and key results, statuses, confidence, check-ins with history
  • Onboarding Checklist — Onboarding checklist: progress, hints with CTAs, dismissal and celebration
  • Course Path Navigator — Course map: modules, locks, progress and skills, a list on narrow screens
  • Team Members — Team members: roles, email invites, pending invitations, seat count
  • Org Chart — Org chart: zoomable, pannable tree with search and collapsible branches
  • Activity Feed — Activity feed
  • Rich Text Editor — Text editor: Markdown shortcuts, slash commands, mentions, links and images
  • Sticker Board — A free composition of photos, stickers and notes to move and rotate
  • Lasso Select — Drag a rectangle to select a group of cards
  • Priority Budget — Share a fixed budget of points between items

Account and access

2FA, sessions and tokens, profile, settings, permissions and an audit log

  • Two Factor Setup — Two-factor setup: method, QR code or phone, code verification
  • Active Sessions — Active sessions: current device, suspicious sign-ins, revoke access
  • Access Tokens — Personal access tokens: scope, last used, revoke
  • Age Gate — Age verification: date of birth, remember me, deny under the limit
  • Profile Details — Profile: completeness, verified contacts, fields
  • Address Book — Address book: home, work, default addresses and actions
  • Social Profiles — Linked social profiles: reorder, verify, copy link
  • Settings Panel — Settings page: section navigation, unsaved-changes bar, danger zone
  • Permission Matrix — Roles and permissions matrix: inheritance, locks, bulk toggles, draft changes
  • Audit Log — Activity log: filters, field diffs, CSV export, load more
  • Privacy Center — Privacy center: score, setting groups, protection counters
  • Support Center — Support: contact channels with status, tickets with filters

AI chat and agents

AI chat, prompt input, model picker, reasoning, tools and agents

Image generation

Prompts and generation settings, results, inpainting and a node graph

Developer tools

Code, logs, diffs, API keys, webhooks, service status and feature flags

  • Code Block — Syntax-highlighted code
  • Diff Viewer — Multi-file diff: file list with stats, unified and split views, word highlights
  • Log Viewer — Streaming logs: levels, highlighted search, tail follow, JSON lines
  • Request Inspector — HTTP request log: filters, headers, bodies and a timing waterfall
  • API Key Manager — API keys: create with scopes and expiry, show the secret once, revoke
  • Api Playground — API playground: model, parameters, prompts and JSON request/response
  • Webhook Endpoints — Webhooks: endpoints, events, toggles and delivery rate
  • Certificate List — SSL/TLS certificates: time to expiry, auto-renewal, legend
  • Status Page — Status page: overall banner, 90-day uptime, incidents and subscriptions
  • Storage Usage — Storage: usage by category and cleanup actions
  • Download Center — Exports: file types, size, link expiry and re-request
  • Feature Flag Simulator — Preview the product under different feature flags and segments, no production access

Landing pages and brand

Hero, pricing, testimonials, FAQ, footer and a design system showcase

Shop and payments

Catalog, cart, checkout, cards, wallet and subscriptions

Content and social

Articles, news, facts and sources, posts, comments and media

  • Article Header — Article header: section, headline, lede, authors and date
  • Byline — Byline: authors, published and updated dates, reading time
  • Article Figure — Image with caption and photo credit
  • Pull Quote — Pull quote with attribution
  • Key Points — “Key points” summary block
  • Editor Note — Update, correction, disclosure and sponsored-content notes
  • Article Toc — Article table of contents that tracks the current section
  • Reading Progress — Reading progress bar
  • Share Bar — Share: Telegram, VK, X, WhatsApp, email and copy link
  • Author Bio — Author card at the end of an article, with a follow button
  • Article Card — News card: vertical, horizontal and over a photo
  • Live Blog — Live blog: update feed, pinned and key events
  • Breaking News — “Breaking” banner with rotating headlines
  • Article Comments — Article comments: votes, sorting, replies, moderation
  • Citation Evidence Lens — Highlights claims by how well they are supported, with sources for each
  • Source Dossier — Source dossier: verification status, linked facts, source types, print
  • Correction Ledger — Correction history: what changed, when and why, with a word-level diff
  • Interactive Quote Deck — Quotes with the primary source, context, original wording and attributed sharing
  • Post Card — Social post card
  • Comment Thread — Nested comment thread
  • Profile Card — User profile
  • Reaction Bar — Likes and reactions
  • Media Gallery — Image gallery
  • Media Player — Video and audio: custom controls, captions, PiP, fullscreen, waveform
  • Feature Hotspots — Numbered points on an image that open a note about each detail
  • Exploded Layers — Prepared image layers pulled apart with captions
  • Prediction Card — The reader guesses first, then sees the answer and the explanation
  • Detail Dial — Choose how deep an explanation goes: short, detailed or full
  • Version Scrubber — Step through prepared versions of a design with one slider
  • Page Minimap — Schematic map of a long page with the visible area

Games

Tier lists, meta, counterpicks, tournament brackets and patch notes for gaming sites

  • Tier List — S+…D tier list: portraits with role badges, role filter, drag with mouse, touch or keyboard, export
  • Meta Table — Meta table: tier, win, pick and ban rates with patch-over-patch change, role and rank filters, virtualized
  • Matchup Matrix — Counterpicks: champion-vs-champion heat matrix with tooltips, pick your champion, a list on phones
  • Tournament Bracket — Tournament bracket: single and double elimination, series scores, winner, team path, monograms
  • Patch Notes — Patch notes: champions and items with ability icons, before → after, buffs, nerfs and changes, filters
  • Crafting Recipe — Recipe card: batches, ingredients needed and what is missing

Animated components

Spring buttons, reordering lists, radial menus and layered reveals

Effects

Liquid glass, backgrounds, and text, number and cursor effects

3D and motion

Motion for any component, scroll scenes, 3D objects and buttons, WebGL

  • Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
  • Stagger — Lists, grids and table rows appear in a wave, one after another
  • Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
  • Layout Group — Jump-free reordering: filter, sort, regrid
  • Presence — Enter and exit: an element stays mounted until its exit animation ends
  • Scroll Effect — Twenty-four scroll effects — reveals, parallax, a progress bar, sticky stacking cards, a sideways track, text that fills in — on scroll-driven timelines
  • Page Transition — Forty transitions between pages, routes and steps — cube, carousel, circle and more — with light variants for machines without a GPU
  • Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
  • Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
  • Stacking Panels — Panels stick on scroll and pile into a stack
  • Helix Rail — Cards on a helix that spins with scroll
  • Scroll Scene — Scroll scene: a pinned screen changes step by step, with a progress rail
  • Parallax Layers — Depth layers that shift with scroll and cursor
  • Orbit Showcase — 3D ring of cards: drag with momentum, arrows, keyboard
  • Coverflow Carousel — 3D product carousel on native scroll: swipe with momentum, arrows, keyboard
  • Flip Card — Two-sided card that flips in 3D
  • Word Prism — Words on the faces of a prism that turns to the next one
  • Button 3D — Chunky key-style button that presses in and springs back
  • Switch 3D — Cube switch that rolls between “off” and a glowing “on”
  • Shape Morph — Shapes morph into each other on a spring: circle, drop, star, flower
  • Path Text — Text along a circle, arc or wave, rotating over time or with scroll
  • Shader Aurora — WebGL shader aurora that reaches toward the cursor
  • Shader Gradient — Live shader gradient for heroes: colors flow around the cursor
  • Liquid Surface — GPU water surface: ripples follow the cursor, splash on click
  • Particle Fabric — Fabric of tens of thousands of glowing points: folds, cursor, waves
  • Particle Picture — Particles assemble into an image or text and flow between them
  • Dot Globe — WebGL2 dot globe: markers, pulsing arcs, drag to rotate
  • Horizon Grid — Endless grid floor fading into a glowing horizon