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

All components

All 340 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

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

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
  • 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
  • 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
  • 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

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

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

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
  • 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