# ValyroUI

> React component library for React 17, 18 and 19: 340 components, 19 themes (light and dark each; vercel and glass bundled, the rest opt-in), plain CSS, no runtime dependencies besides React. Components are installed as source code into your project or from npm (`valyro-ui`).

- Docs and live demos: https://valyro.xyz
- Registry index (shadcn-compatible): https://valyro.xyz/r/registry.json
- Item JSON with full source: https://valyro.xyz/r/<name>.json (free core items)
- Free core: 77 components and the vercel, glass, high-contrast themes (npm `valyro-ui`, MIT). Items marked (Pro) — 263 components and the other themes — need a ValyroUI Pro licence (https://valyro.xyz/pricing/); their registry JSON has no source. Licensed users run `npx valyro-cli@latest login` once, then `add` works for Pro items too.

## Setup

1. `npx valyro-cli@latest init` — detects Next.js / Vite / React Router / Astro, writes valyro.json, installs `styles` and `theme`, prints (or with `--patch` applies) the CSS import and <ThemeProvider> wrapper.
2. `npx valyro-cli@latest add <name…>` — copies components and their dependencies into `components/valyro-ui/` (under `src/` or `app/` when present).
3. Alternative: `npx shadcn@latest add https://valyro.xyz/r/<name>.json` (universal items, no components.json needed).

Import `components/valyro-ui/styles/index.css` once (it bundles vercel and glass) and wrap the app in `<ThemeProvider theme="vercel" mode="light" | "dark">`. Themes: vercel, glass, material, fluent, linear, stripe, anthropic, paper, brutalism, high-contrast, terminal, pixel, cyber, fantasy, playrix, manacost, mythic, frost, hearthstone; for one that is not bundled also import `components/valyro-ui/styles/themes/<name>.css`. Fonts are self-hosted in the npm package: `valyro-ui/fonts/<id>.css` (`init --theme` prints the ones a theme needs). Components import from `components/valyro-ui/<category>/<File>`.

## APIs and packages

- Compound parts: Tooltip, Sidebar, Breadcrumbs, Tabs, SegmentedControl, Stepper, DropdownMenu, ContextMenu, CommandPalette, AppShell, ResizablePanels, Select, MultiSelect, Listbox, Combobox, CheckboxGroup, RadioGroup, FormField, Card, Carousel, DataTable, Timeline, Accordion, TreeView, Alert, Dialog, Drawer, BottomSheet, Popover, HoverCard, ChipGroup, CheckboxTree take props or parts (`<Dialog.Trigger>`, `<Tabs.List>`, `<DataTable.Row>`). Every part is also a named export (`DialogTrigger`, `TabsTab`): use those in React Server Components, which cannot dot into a client component. Each component below lists its parts. Guide: https://valyro.xyz/feedback/dialog/#compound
- Headless hooks: npm `valyro-ui/headless` (no CSS) exports useControllableState, useDisclosure, useListNavigation, stepIndex, useFocusTrap, getTabbables, useDismissableLayer, DISMISS_IGNORE_ATTRIBUTE, useScrollLock, ariaHideOutside, useAriaHideOutside, useTypeahead, createPrefixMatcher, createContainsMatcher, findTypeaheadIndex, announce, clearAnnouncer, destroyAnnouncer, LIVE_ANNOUNCER_ATTRIBUTE, useAnnounceCount, useFloating, computePosition, parsePlacement, usePresence, Portal, useIsClient, usePortalContainer, Slot, mergeProps, useVirtualizer, useFlip, flipDelta, useSpringValue, useNow, subscribeNow, getNow, useAccordion, useTreeView, useDataTable, useListbox, useSelect, useCombobox, useRadioGroup, useCheckboxGroup, useField, useTabs, useMenu, usePagination, getPaginationRange, useDialog, useTooltip, useResizablePanels, useCheckboxTree, useStepper, useCalendar, useSlider, useSortable, useCarousel, usePopover, useNumberInput, useDateField, useTimeField, cx, mergeRefs, composeHandlers, useLatest, useEventCallback, useDirection, getDirection, inlineArrowStep, isComposingKey, clamp, withRef, cleanupRef, sharedCleanupRef, getElementRef, useId, useSyncExternalStore, useIsomorphicLayoutEffect, startTransition, useTransition, useDeferredValue. Installed as source, they are the `primitives` item. Guide with live examples: https://valyro.xyz/getting-started/headless/
- Tailwind CSS v4: `valyro-ui/tailwind.css` (source install: `components/valyro-ui/styles/tailwind.css`) maps the --ui-* tokens onto utilities (`bg-accent text-fg border-border rounded-card shadow-card`); import it after `tailwindcss` and the kit CSS. Guide: https://valyro.xyz/getting-started/vite/#tailwind
- React versions: react and react-dom 17, 18 or 19. 19 is the primary target; 18 runs through a small compatibility layer; on 17, `useId` ids are assigned right after mount (none in server HTML) and Node's native ESM loader cannot resolve React 17's `react/jsx-runtime` without a bundler (require() the CommonJS build). Guide: https://valyro.xyz/getting-started/vite/#react-versions
- React Native: npm `valyro-ui-native` — the components for iOS, Android and Expo on React Native primitives, every theme, no native dependencies. Docs: https://valyro.xyz/react-native/

## Basics (basic)

- [Button](https://valyro.xyz/r/button.json): Buttons in every variant. Demo: https://valyro.xyz/basic/button/
- [Icon Button](https://valyro.xyz/r/icon-button.json): Icon-only button. Demo: https://valyro.xyz/basic/icon-button/
- [Button Group](https://valyro.xyz/r/button-group.json): Grouped buttons. Demo: https://valyro.xyz/basic/button-group/
- [Badge](https://valyro.xyz/r/badge.json): Status labels and tags. Demo: https://valyro.xyz/basic/badge/
- [Avatar](https://valyro.xyz/r/avatar.json): User avatars. Demo: https://valyro.xyz/basic/avatar/
- [Tooltip](https://valyro.xyz/r/tooltip.json): Hover and focus hints. Demo: https://valyro.xyz/basic/tooltip/
- [Separator](https://valyro.xyz/r/separator.json): Dividers. Demo: https://valyro.xyz/basic/separator/
- [Skeleton](https://valyro.xyz/r/skeleton.json): Loading placeholders. Demo: https://valyro.xyz/basic/skeleton/
- [Spinner](https://valyro.xyz/r/spinner.json): Loading indicator. Demo: https://valyro.xyz/basic/spinner/
- [Progress Bar](https://valyro.xyz/r/progress-bar.json): Progress bars. Demo: https://valyro.xyz/basic/progress-bar/

## Navigation (navigation)

- [Navbar](https://valyro.xyz/r/navbar.json): Top navigation bar. Demo: https://valyro.xyz/navigation/navbar/
- [Sidebar](https://valyro.xyz/r/sidebar.json): Side navigation panel. Demo: https://valyro.xyz/navigation/sidebar/
- [Breadcrumbs](https://valyro.xyz/r/breadcrumbs.json): Breadcrumb trail. Demo: https://valyro.xyz/navigation/breadcrumbs/
- [Tabs](https://valyro.xyz/r/tabs.json): Tabs. Demo: https://valyro.xyz/navigation/tabs/
- [Segmented Control](https://valyro.xyz/r/segmented-control.json): Mode switcher. Demo: https://valyro.xyz/navigation/segmented-control/
- [Pagination](https://valyro.xyz/r/pagination.json): Page navigation. Demo: https://valyro.xyz/navigation/pagination/
- [Stepper](https://valyro.xyz/r/stepper.json): Step-by-step progress. Demo: https://valyro.xyz/navigation/stepper/
- [Dropdown Menu](https://valyro.xyz/r/dropdown-menu.json): Dropdown menu. Demo: https://valyro.xyz/navigation/dropdown-menu/
- [Context Menu](https://valyro.xyz/r/context-menu.json): Right-click menu. Demo: https://valyro.xyz/navigation/context-menu/
- [Command Palette](https://valyro.xyz/r/command-palette.json): ⌘K-style command menu. Demo: https://valyro.xyz/navigation/command-palette/

## Layout (layout)

- [App Shell](https://valyro.xyz/r/app-shell.json): Application frame. Demo: https://valyro.xyz/navigation/app-shell/
- [Resizable Panels](https://valyro.xyz/r/resizable-panels.json): Panels with draggable dividers. Demo: https://valyro.xyz/navigation/resizable-panels/
- [Sortable](https://valyro.xyz/r/sortable.json): Drag-and-drop sorting. Demo: https://valyro.xyz/data-display/sortable/
- [Virtual List](https://valyro.xyz/r/virtual-list.json): Virtual list for 100,000 rows. Demo: https://valyro.xyz/data-display/virtual-list/

## Forms (forms)

- [Text Input](https://valyro.xyz/r/text-input.json): Text fields. Demo: https://valyro.xyz/forms/text-input/
- [Textarea](https://valyro.xyz/r/textarea.json): Multiline text input. Demo: https://valyro.xyz/forms/textarea/
- [Select](https://valyro.xyz/r/select.json): Pick one option from a list. Demo: https://valyro.xyz/forms/select/
- [Multi Select](https://valyro.xyz/r/multi-select.json): Pick several options. Demo: https://valyro.xyz/forms/multi-select/
- [Listbox](https://valyro.xyz/r/listbox.json): Option list on the page: one or several, Shift ranges. Demo: https://valyro.xyz/forms/listbox/
- [Combobox](https://valyro.xyz/r/combobox.json): Searchable select. Demo: https://valyro.xyz/forms/combobox/
- [Checkbox](https://valyro.xyz/r/checkbox.json): Checkboxes. Demo: https://valyro.xyz/forms/checkbox/
- [Checkbox Group](https://valyro.xyz/r/checkbox-group.json): Checkboxes under one label, hint, error and requirement. Demo: https://valyro.xyz/forms/checkbox-group/
- [Radio Group](https://valyro.xyz/r/radio-group.json): Pick exactly one option. Demo: https://valyro.xyz/forms/radio-group/
- [Switch](https://valyro.xyz/r/switch.json): On/off toggle. Demo: https://valyro.xyz/forms/switch/
- [Slider](https://valyro.xyz/r/slider.json): Range slider. Demo: https://valyro.xyz/forms/slider/
- [Search Input](https://valyro.xyz/r/search-input.json): Search field. Demo: https://valyro.xyz/forms/search-input/

## Advanced forms (forms-advanced)

- [Date Picker](https://valyro.xyz/r/date-picker.json): Date selection. Demo: https://valyro.xyz/forms/date-picker/
- [Date Range Picker](https://valyro.xyz/r/date-range-picker.json): Date range selection. Demo: https://valyro.xyz/forms/date-range-picker/
- [Date Field](https://valyro.xyz/r/date-field.json): Date typed segment by segment in the locale order. Demo: https://valyro.xyz/forms/date-field/
- [Time Picker](https://valyro.xyz/r/time-picker.json): Time selection. Demo: https://valyro.xyz/forms/time-picker/
- [Time Field](https://valyro.xyz/r/time-field.json): Time typed segment by segment, 24-hour or AM/PM. Demo: https://valyro.xyz/forms/time-field/
- [Wheel Picker](https://valyro.xyz/r/wheel-picker.json) (Pro): iOS-style picker wheel: momentum, 3D cylinder, date and time presets. Demo: https://valyro.xyz/forms/wheel-picker/
- [Number Input](https://valyro.xyz/r/number-input.json): Numeric input. Demo: https://valyro.xyz/forms/number-input/
- [Tags Input](https://valyro.xyz/r/tags-input.json): Tag entry. Demo: https://valyro.xyz/forms/tags-input/
- [Color Picker](https://valyro.xyz/r/color-picker.json): Color selection. Demo: https://valyro.xyz/forms/color-picker/
- [File Uploader](https://valyro.xyz/r/file-uploader.json): File uploads. Demo: https://valyro.xyz/forms/file-uploader/
- [OTP Input](https://valyro.xyz/r/otp-input.json): One-time code entry. Demo: https://valyro.xyz/forms/otp-input/
- [Phone Input](https://valyro.xyz/r/phone-input.json) (Pro): Phone number with country picker, live formatting and an E.164 value. Demo: https://valyro.xyz/forms/phone-input/
- [Masked Input](https://valyro.xyz/r/masked-input.json) (Pro): Masked input: cards with Luhn check, expiry, CVC, date, time. Demo: https://valyro.xyz/forms/masked-input/
- [Mentions Input](https://valyro.xyz/r/mentions-input.json) (Pro): Text with @mentions and #tags, async suggestions. Demo: https://valyro.xyz/forms/mentions-input/
- [Emoji Picker](https://valyro.xyz/r/emoji-picker.json) (Pro): Emoji picker: search, categories, skin tones, recents. Demo: https://valyro.xyz/forms/emoji-picker/
- [Image Cropper](https://valyro.xyz/r/image-cropper.json) (Pro): Image cropping: pan, zoom, rotate, aspect ratios and a round avatar. Demo: https://valyro.xyz/forms/image-cropper/
- [Rating Input](https://valyro.xyz/r/rating-input.json): Star rating. Demo: https://valyro.xyz/forms/rating-input/
- [Form Field](https://valyro.xyz/r/form-field.json): Field with validation and errors. Demo: https://valyro.xyz/forms/form-field/

## Data display (data-display)

- [Card](https://valyro.xyz/r/card.json): All-purpose cards. Demo: https://valyro.xyz/data-display/card/
- [Carousel](https://valyro.xyz/r/carousel.json): Carousel: scroll snap, swipe, autoplay, thumbnails. Demo: https://valyro.xyz/data-display/carousel/
- [Stats Card](https://valyro.xyz/r/stats-card.json): Metric cards. Demo: https://valyro.xyz/data-display/stats-card/
- [Data Table](https://valyro.xyz/r/data-table.json): Tables with search and sorting. Demo: https://valyro.xyz/data-display/data-table/
- [Calendar View](https://valyro.xyz/r/calendar-view.json) (Pro): Event calendar. Demo: https://valyro.xyz/workspace/calendar-view/
- [Kanban Board](https://valyro.xyz/r/kanban-board.json) (Pro): Task board. Demo: https://valyro.xyz/workspace/kanban-board/
- [Timeline](https://valyro.xyz/r/timeline.json): Event timeline. Demo: https://valyro.xyz/data-display/timeline/
- [Accordion](https://valyro.xyz/r/accordion.json): Collapsible sections. Demo: https://valyro.xyz/data-display/accordion/
- [Tree View](https://valyro.xyz/r/tree-view.json): Tree structures. Demo: https://valyro.xyz/data-display/tree-view/
- [Empty State](https://valyro.xyz/r/empty-state.json): No-data screen. Demo: https://valyro.xyz/data-display/empty-state/
- [JSON Viewer](https://valyro.xyz/r/json-viewer.json) (Pro): JSON viewer. Demo: https://valyro.xyz/data-display/json-viewer/
- [Media Player](https://valyro.xyz/r/media-player.json) (Pro): Video and audio: custom controls, captions, PiP, fullscreen, waveform. Demo: https://valyro.xyz/content/media-player/
- [KPI Group](https://valyro.xyz/r/kpi-group.json): KPI row: value, change vs. previous period, sparkline and progress to goal. Demo: https://valyro.xyz/data-display/kpi-group/

## Productivity (productivity)

- [Data Grid](https://valyro.xyz/r/data-grid.json) (Pro): Grid for 100,000 rows: grouping, filters, inline editing. Demo: https://valyro.xyz/data-display/data-grid/
- [Scheduler](https://valyro.xyz/r/scheduler.json) (Pro): Scheduler: day, week, month and resource timeline, drag and drop, recurrence. Demo: https://valyro.xyz/workspace/scheduler/
- [Rich Text Editor](https://valyro.xyz/r/rich-text-editor.json) (Pro): Text editor: Markdown shortcuts, slash commands, mentions, links and images. Demo: https://valyro.xyz/workspace/rich-text-editor/
- [Filter Builder](https://valyro.xyz/r/filter-builder.json) (Pro): Filter builder: nested AND/OR groups, field-aware conditions, JSON and a summary. Demo: https://valyro.xyz/forms/filter-builder/
- [Multi-step Form](https://valyro.xyz/r/multi-step-form.json) (Pro): Multi-step form: per-step validation, skipping, review before submit, drafts. Demo: https://valyro.xyz/forms/multi-step-form/
- [Bulk Action Bar](https://valyro.xyz/r/bulk-action-bar.json) (Pro): Actions for selected rows, with keyboard shortcuts. Demo: https://valyro.xyz/data-display/bulk-action-bar/

## Business (business)

- [CRM Pipeline](https://valyro.xyz/r/crm-pipeline.json) (Pro): Deal pipeline: stages, amounts and probabilities, drag between stages. Demo: https://valyro.xyz/workspace/crm-pipeline/
- [Permission Matrix](https://valyro.xyz/r/permission-matrix.json) (Pro): Roles and permissions matrix: inheritance, locks, bulk toggles, draft changes. Demo: https://valyro.xyz/account-access/permission-matrix/
- [Audit Log](https://valyro.xyz/r/audit-log.json) (Pro): Activity log: filters, field diffs, CSV export, load more. Demo: https://valyro.xyz/account-access/audit-log/
- [Org Chart](https://valyro.xyz/r/org-chart.json) (Pro): Org chart: zoomable, pannable tree with search and collapsible branches. Demo: https://valyro.xyz/workspace/org-chart/
- [Approval Flow](https://valyro.xyz/r/approval-flow.json) (Pro): Multi-stage approvals: sequential and parallel stages, decisions with reasons, history. Demo: https://valyro.xyz/workspace/approval-flow/
- [Booking Slots](https://valyro.xyz/r/booking-slots.json) (Pro): Meeting booking: calendar, slots in the guest’s time zone, form and confirmation. Demo: https://valyro.xyz/workspace/booking-slots/
- [Team Members](https://valyro.xyz/r/team-members.json) (Pro): Team members: roles, email invites, pending invitations, seat count. Demo: https://valyro.xyz/workspace/team-members/
- [Onboarding Checklist](https://valyro.xyz/r/onboarding-checklist.json) (Pro): Onboarding checklist: progress, hints with CTAs, dismissal and celebration. Demo: https://valyro.xyz/workspace/onboarding-checklist/
- [Goal Tracker](https://valyro.xyz/r/goal-tracker.json) (Pro): OKRs: objectives and key results, statuses, confidence, check-ins with history. Demo: https://valyro.xyz/workspace/goal-tracker/
- [Settings Panel](https://valyro.xyz/r/settings-panel.json) (Pro): Settings page: section navigation, unsaved-changes bar, danger zone. Demo: https://valyro.xyz/account-access/settings-panel/

## Feedback and overlays (feedback)

- [Alert](https://valyro.xyz/r/alert.json): Inline alerts. Demo: https://valyro.xyz/feedback/alert/
- [Toast](https://valyro.xyz/r/toast.json): Pop-up notifications. Demo: https://valyro.xyz/feedback/toast/
- [Dialog](https://valyro.xyz/r/dialog.json): Modal dialogs. Demo: https://valyro.xyz/feedback/dialog/
- [Confirm Dialog](https://valyro.xyz/r/confirm-dialog.json): Action confirmation. Demo: https://valyro.xyz/feedback/confirm-dialog/
- [Drawer](https://valyro.xyz/r/drawer.json): Slide-out panels. Demo: https://valyro.xyz/feedback/drawer/
- [Bottom Sheet](https://valyro.xyz/r/bottom-sheet.json): iOS-style bottom sheet: snap points, swipe, peek mode. Demo: https://valyro.xyz/feedback/bottom-sheet/
- [Popover](https://valyro.xyz/r/popover.json): Floating content. Demo: https://valyro.xyz/feedback/popover/
- [Hover Card](https://valyro.xyz/r/hover-card.json): Card on hover. Demo: https://valyro.xyz/feedback/hover-card/
- [Loading Overlay](https://valyro.xyz/r/loading-overlay.json): Loading screen. Demo: https://valyro.xyz/feedback/loading-overlay/
- [Notification Center](https://valyro.xyz/r/notification-center.json): Notification inbox. Demo: https://valyro.xyz/feedback/notification-center/
- [Copy to Clipboard](https://valyro.xyz/r/copy-to-clipboard.json): Copy with confirmation. Demo: https://valyro.xyz/basic/copy-to-clipboard/
- [Tour](https://valyro.xyz/r/tour.json) (Pro): Onboarding tour: element spotlight, steps, progress and resume. Demo: https://valyro.xyz/feedback/tour/

## Charts and analytics (charts)

- [Line Chart](https://valyro.xyz/r/line-chart.json): Line charts. Demo: https://valyro.xyz/charts/line-chart/
- [Bar Chart](https://valyro.xyz/r/bar-chart.json): Bar charts. Demo: https://valyro.xyz/charts/bar-chart/
- [Area Chart](https://valyro.xyz/r/area-chart.json): Filled area charts. Demo: https://valyro.xyz/charts/area-chart/
- [Donut Chart](https://valyro.xyz/r/donut-chart.json): Donut charts. Demo: https://valyro.xyz/charts/donut-chart/
- [Sparkline](https://valyro.xyz/r/sparkline.json): Tiny inline charts. Demo: https://valyro.xyz/charts/sparkline/
- [Heatmap](https://valyro.xyz/r/heatmap.json) (Pro): Heatmaps. Demo: https://valyro.xyz/charts/heatmap/
- [Funnel Chart](https://valyro.xyz/r/funnel-chart.json) (Pro): Conversion funnels. Demo: https://valyro.xyz/charts/funnel-chart/
- [Gauge Chart](https://valyro.xyz/r/gauge-chart.json) (Pro): Radial gauges. Demo: https://valyro.xyz/charts/gauge-chart/
- [Metric Comparison](https://valyro.xyz/r/metric-comparison.json) (Pro): Metric comparison. Demo: https://valyro.xyz/charts/metric-comparison/
- [Analytics Filter Bar](https://valyro.xyz/r/analytics-filter-bar.json) (Pro): Dashboard filters. Demo: https://valyro.xyz/charts/analytics-filter-bar/
- [Scatter Chart](https://valyro.xyz/r/scatter-chart.json) (Pro): Scatter and bubble charts with a trend line. Demo: https://valyro.xyz/charts/scatter-chart/
- [Radar Chart](https://valyro.xyz/r/radar-chart.json) (Pro): Radar charts for comparing profiles. Demo: https://valyro.xyz/charts/radar-chart/
- [Treemap](https://valyro.xyz/r/treemap.json) (Pro): Hierarchies as areas, with drill-down. Demo: https://valyro.xyz/charts/treemap/
- [Sankey Chart](https://valyro.xyz/r/sankey-chart.json) (Pro): Flow diagrams between stages. Demo: https://valyro.xyz/charts/sankey-chart/
- [Candlestick Chart](https://valyro.xyz/r/candlestick-chart.json) (Pro): Stock candlesticks with volume and moving averages. Demo: https://valyro.xyz/charts/candlestick-chart/
- [Gantt Chart](https://valyro.xyz/r/gantt-chart.json) (Pro): Gantt charts with dependencies and drag to reschedule. Demo: https://valyro.xyz/workspace/gantt-chart/
- [Map Chart](https://valyro.xyz/r/map-chart.json) (Pro): World map: choropleth and points, zoom and pan. Demo: https://valyro.xyz/charts/map-chart/

## Marketing (marketing)

- [Hero Section](https://valyro.xyz/r/hero-section.json) (Pro): Landing page hero. Demo: https://valyro.xyz/marketing/hero-section/
- [Feature Grid](https://valyro.xyz/r/feature-grid.json) (Pro): Feature grid. Demo: https://valyro.xyz/marketing/feature-grid/
- [Pricing Table](https://valyro.xyz/r/pricing-table.json) (Pro): Pricing plans. Demo: https://valyro.xyz/marketing/pricing-table/
- [Testimonials](https://valyro.xyz/r/testimonials.json) (Pro): Customer testimonials. Demo: https://valyro.xyz/marketing/testimonials/
- [Logo Cloud](https://valyro.xyz/r/logo-cloud.json) (Pro): Customer logos. Demo: https://valyro.xyz/marketing/logo-cloud/
- [FAQ Section](https://valyro.xyz/r/faq-section.json) (Pro): Frequently asked questions. Demo: https://valyro.xyz/marketing/faq-section/
- [Comparison Table](https://valyro.xyz/r/comparison-table.json) (Pro): Product comparison. Demo: https://valyro.xyz/marketing/comparison-table/
- [CTA Section](https://valyro.xyz/r/cta-section.json) (Pro): Call-to-action block. Demo: https://valyro.xyz/marketing/cta-section/
- [Newsletter Signup](https://valyro.xyz/r/newsletter-signup.json) (Pro): Newsletter signup. Demo: https://valyro.xyz/marketing/newsletter-signup/
- [Footer](https://valyro.xyz/r/footer.json) (Pro): Site footer. Demo: https://valyro.xyz/marketing/footer/

## SaaS and AI (ai)

- [AI Chat Window](https://valyro.xyz/r/ai-chat-window.json) (Pro): AI chat window. Demo: https://valyro.xyz/ai/ai-chat-window/
- [Chat Message](https://valyro.xyz/r/chat-message.json) (Pro): Messages with streaming output. Demo: https://valyro.xyz/ai/chat-message/
- [Prompt Composer](https://valyro.xyz/r/prompt-composer.json) (Pro): Prompt field with attachments. Demo: https://valyro.xyz/ai/prompt-composer/
- [Model Selector](https://valyro.xyz/r/model-selector.json) (Pro): AI model picker. Demo: https://valyro.xyz/ai/model-selector/
- [Token Usage](https://valyro.xyz/r/token-usage.json) (Pro): Token spend display. Demo: https://valyro.xyz/ai/token-usage/
- [Code Block](https://valyro.xyz/r/code-block.json): Syntax-highlighted code. Demo: https://valyro.xyz/devtools/code-block/
- [Markdown Preview](https://valyro.xyz/r/markdown-preview.json) (Pro): Rendered Markdown. Demo: https://valyro.xyz/ai/markdown-preview/
- [Activity Feed](https://valyro.xyz/r/activity-feed.json) (Pro): Activity feed. Demo: https://valyro.xyz/workspace/activity-feed/
- [Billing Plan Card](https://valyro.xyz/r/billing-plan-card.json) (Pro): Subscription management. Demo: https://valyro.xyz/commerce/billing-plan-card/
- [Usage Quota](https://valyro.xyz/r/usage-quota.json) (Pro): Usage limits. Demo: https://valyro.xyz/commerce/usage-quota/
- [Chain of Thought](https://valyro.xyz/r/chain-of-thought.json) (Pro): Model reasoning steps. Demo: https://valyro.xyz/ai/chain-of-thought/
- [Tool Call](https://valyro.xyz/r/tool-call.json) (Pro): Tool call with approval. Demo: https://valyro.xyz/ai/tool-call/
- [Sources](https://valyro.xyz/r/sources.json) (Pro): Sources and citations in an answer. Demo: https://valyro.xyz/ai/sources/
- [Artifact Panel](https://valyro.xyz/r/artifact-panel.json) (Pro): Artifact panel next to the chat. Demo: https://valyro.xyz/ai/artifact-panel/
- [Diff Review](https://valyro.xyz/r/diff-review.json) (Pro): Review AI edits hunk by hunk. Demo: https://valyro.xyz/ai/diff-review/
- [Streaming Text](https://valyro.xyz/r/streaming-text.json) (Pro): Smooth token streaming. Demo: https://valyro.xyz/ai/streaming-text/
- [Voice Orb](https://valyro.xyz/r/voice-orb.json) (Pro): Animated voice-mode orb. Demo: https://valyro.xyz/ai/voice-orb/
- [Voice Input](https://valyro.xyz/r/voice-input.json) (Pro): Voice input with waveform and transcript. Demo: https://valyro.xyz/ai/voice-input/
- [Inline Suggestion](https://valyro.xyz/r/inline-suggestion.json) (Pro): Inline autocomplete suggestion. Demo: https://valyro.xyz/ai/inline-suggestion/
- [Model Comparison](https://valyro.xyz/r/model-comparison.json) (Pro): Side-by-side answers from several models. Demo: https://valyro.xyz/ai/model-comparison/
- [Agent Plan](https://valyro.xyz/r/agent-plan.json) (Pro): Live agent task plan. Demo: https://valyro.xyz/ai/agent-plan/
- [Message Branches](https://valyro.xyz/r/message-branches.json) (Pro): Message versions and a conversation branch tree. Demo: https://valyro.xyz/ai/message-branches/
- [Answer Card](https://valyro.xyz/r/answer-card.json) (Pro): Perplexity-style answer with sources. Demo: https://valyro.xyz/ai/answer-card/
- [Prompt Library](https://valyro.xyz/r/prompt-library.json) (Pro): Prompt library with variables. Demo: https://valyro.xyz/ai/prompt-library/
- [Memory Panel](https://valyro.xyz/r/memory-panel.json) (Pro): What the assistant remembers. Demo: https://valyro.xyz/ai/memory-panel/
- [Response Feedback](https://valyro.xyz/r/response-feedback.json) (Pro): Answer rating and a rubric for reviewers. Demo: https://valyro.xyz/ai/response-feedback/

## Image generation (image-gen)

- [Prompt Editor](https://valyro.xyz/r/prompt-editor.json) (Pro): Prompt and negative prompt: weights, LoRA, autocomplete, token count. Demo: https://valyro.xyz/image-gen/prompt-editor/
- [Generation Settings](https://valyro.xyz/r/generation-settings.json) (Pro): Model, sampler, steps, CFG, size, presets. Demo: https://valyro.xyz/image-gen/generation-settings/
- [Aspect Ratio Picker](https://valyro.xyz/r/aspect-ratio-picker.json) (Pro): Aspect ratio and exact size. Demo: https://valyro.xyz/image-gen/aspect-ratio-picker/
- [Seed Input](https://valyro.xyz/r/seed-input.json) (Pro): Seed: random, fixed, increment. Demo: https://valyro.xyz/image-gen/seed-input/
- [LoRA Stack](https://valyro.xyz/r/lora-stack.json) (Pro): LoRA stack: strengths, toggles, order, trigger words. Demo: https://valyro.xyz/image-gen/lora-stack/
- [Style Presets](https://valyro.xyz/r/style-presets.json) (Pro): Style cards with previews and weights. Demo: https://valyro.xyz/image-gen/style-presets/
- [Reference Image Input](https://valyro.xyz/r/reference-image-input.json) (Pro): Reference image for img2img and ControlNet. Demo: https://valyro.xyz/image-gen/reference-image-input/
- [Generation Progress](https://valyro.xyz/r/generation-progress.json) (Pro): Steps, ETA, live latent preview, queue. Demo: https://valyro.xyz/image-gen/generation-progress/
- [Image Result Grid](https://valyro.xyz/r/image-result-grid.json) (Pro): Result gallery with actions and a lightbox. Demo: https://valyro.xyz/image-gen/image-result-grid/
- [Image Compare](https://valyro.xyz/r/image-compare.json) (Pro): Before/after comparison: slider, side by side, overlay. Demo: https://valyro.xyz/image-gen/image-compare/
- [Inpaint Canvas](https://valyro.xyz/r/inpaint-canvas.json) (Pro): Inpainting mask and canvas outpainting. Demo: https://valyro.xyz/image-gen/inpaint-canvas/
- [Generation History](https://valyro.xyz/r/generation-history.json) (Pro): Generation history by day, with filters. Demo: https://valyro.xyz/image-gen/generation-history/

## Node editor (node-editor)

- [Node Canvas](https://valyro.xyz/r/node-canvas.json) (Pro): Infinite node canvas: typed ports, links, groups, minimap, graph execution. Demo: https://valyro.xyz/image-gen/node-canvas/
- [Node Library](https://valyro.xyz/r/node-library.json) (Pro): Node palette: fuzzy search, categories, favorites, drag onto the canvas. Demo: https://valyro.xyz/image-gen/node-library/
- [Node Inspector](https://valyro.xyz/r/node-inspector.json) (Pro): Selected node properties: title, color, mode, parameters, ports. Demo: https://valyro.xyz/image-gen/node-inspector/
- [Execution Queue](https://valyro.xyz/r/execution-queue.json) (Pro): Run queue and history: progress, ETA, previews, cancel and retry. Demo: https://valyro.xyz/image-gen/execution-queue/

## Developer tools (devtools)

- [Log Viewer](https://valyro.xyz/r/log-viewer.json) (Pro): Streaming logs: levels, highlighted search, tail follow, JSON lines. Demo: https://valyro.xyz/devtools/log-viewer/
- [Diff Viewer](https://valyro.xyz/r/diff-viewer.json) (Pro): Multi-file diff: file list with stats, unified and split views, word highlights. Demo: https://valyro.xyz/devtools/diff-viewer/
- [API Key Manager](https://valyro.xyz/r/api-key-manager.json) (Pro): API keys: create with scopes and expiry, show the secret once, revoke. Demo: https://valyro.xyz/devtools/api-key-manager/
- [Status Page](https://valyro.xyz/r/status-page.json) (Pro): Status page: overall banner, 90-day uptime, incidents and subscriptions. Demo: https://valyro.xyz/devtools/status-page/
- [Request Inspector](https://valyro.xyz/r/request-inspector.json) (Pro): HTTP request log: filters, headers, bodies and a timing waterfall. Demo: https://valyro.xyz/devtools/request-inspector/

## Social and e-commerce (commerce)

- [Post Card](https://valyro.xyz/r/post-card.json) (Pro): Social post card. Demo: https://valyro.xyz/content/post-card/
- [Comment Thread](https://valyro.xyz/r/comment-thread.json) (Pro): Nested comment thread. Demo: https://valyro.xyz/content/comment-thread/
- [Profile Card](https://valyro.xyz/r/profile-card.json) (Pro): User profile. Demo: https://valyro.xyz/content/profile-card/
- [Reaction Bar](https://valyro.xyz/r/reaction-bar.json) (Pro): Likes and reactions. Demo: https://valyro.xyz/content/reaction-bar/
- [Media Gallery](https://valyro.xyz/r/media-gallery.json) (Pro): Image gallery. Demo: https://valyro.xyz/content/media-gallery/
- [Product Card](https://valyro.xyz/r/product-card.json) (Pro): Product card. Demo: https://valyro.xyz/commerce/product-card/
- [Product Grid](https://valyro.xyz/r/product-grid.json) (Pro): Product catalog. Demo: https://valyro.xyz/commerce/product-grid/
- [Product Filters](https://valyro.xyz/r/product-filters.json) (Pro): Catalog filters. Demo: https://valyro.xyz/commerce/product-filters/
- [Shopping Cart Drawer](https://valyro.xyz/r/shopping-cart-drawer.json) (Pro): Slide-out cart. Demo: https://valyro.xyz/commerce/shopping-cart-drawer/
- [Checkout Summary](https://valyro.xyz/r/checkout-summary.json) (Pro): Order summary at checkout. Demo: https://valyro.xyz/commerce/checkout-summary/
- [Reviews Summary](https://valyro.xyz/r/reviews-summary.json) (Pro): Reviews: average rating, filterable histogram, sorting and helpful votes. Demo: https://valyro.xyz/commerce/reviews-summary/
- [Order Tracking](https://valyro.xyz/r/order-tracking.json) (Pro): Order tracking: stages, carrier, tracking number and history. Demo: https://valyro.xyz/commerce/order-tracking/
- [Invoice](https://valyro.xyz/r/invoice.json) (Pro): Printable invoice: line items, taxes, discounts and totals in any currency. Demo: https://valyro.xyz/commerce/invoice/

## Editorial (editorial)

- [Article Header](https://valyro.xyz/r/article-header.json) (Pro): Article header: section, headline, lede, authors and date. Demo: https://valyro.xyz/content/article-header/
- [Byline](https://valyro.xyz/r/byline.json) (Pro): Byline: authors, published and updated dates, reading time. Demo: https://valyro.xyz/content/byline/
- [Article Card](https://valyro.xyz/r/article-card.json) (Pro): News card: vertical, horizontal and over a photo. Demo: https://valyro.xyz/content/article-card/
- [Article Figure](https://valyro.xyz/r/article-figure.json) (Pro): Image with caption and photo credit. Demo: https://valyro.xyz/content/article-figure/
- [Pull Quote](https://valyro.xyz/r/pull-quote.json) (Pro): Pull quote with attribution. Demo: https://valyro.xyz/content/pull-quote/
- [Key Points](https://valyro.xyz/r/key-points.json) (Pro): “Key points” summary block. Demo: https://valyro.xyz/content/key-points/
- [Editor Note](https://valyro.xyz/r/editor-note.json) (Pro): Update, correction, disclosure and sponsored-content notes. Demo: https://valyro.xyz/content/editor-note/
- [Article Toc](https://valyro.xyz/r/article-toc.json) (Pro): Article table of contents that tracks the current section. Demo: https://valyro.xyz/content/article-toc/
- [Reading Progress](https://valyro.xyz/r/reading-progress.json) (Pro): Reading progress bar. Demo: https://valyro.xyz/content/reading-progress/
- [Share Bar](https://valyro.xyz/r/share-bar.json) (Pro): Share: Telegram, VK, X, WhatsApp, email and copy link. Demo: https://valyro.xyz/content/share-bar/
- [Author Bio](https://valyro.xyz/r/author-bio.json) (Pro): Author card at the end of an article, with a follow button. Demo: https://valyro.xyz/content/author-bio/
- [Live Blog](https://valyro.xyz/r/live-blog.json) (Pro): Live blog: update feed, pinned and key events. Demo: https://valyro.xyz/content/live-blog/
- [Breaking News](https://valyro.xyz/r/breaking-news.json) (Pro): “Breaking” banner with rotating headlines. Demo: https://valyro.xyz/content/breaking-news/
- [Article Comments](https://valyro.xyz/r/article-comments.json) (Pro): Article comments: votes, sorting, replies, moderation. Demo: https://valyro.xyz/content/article-comments/

## Effects (effects)

- [Glass Lens](https://valyro.xyz/r/glass-lens.json) (Pro): Glass lens with real refraction. Demo: https://valyro.xyz/effects/glass-lens/
- [Morphing Capsule](https://valyro.xyz/r/morphing-capsule.json) (Pro): Capsule that flows between states. Demo: https://valyro.xyz/effects/morphing-capsule/
- [Cursor Glow](https://valyro.xyz/r/cursor-glow.json) (Pro): Glow and tilt that follow the cursor. Demo: https://valyro.xyz/effects/cursor-glow/
- [Floating Tab Bar](https://valyro.xyz/r/floating-tab-bar.json) (Pro): Floating glass tab bar. Demo: https://valyro.xyz/effects/floating-tab-bar/
- [Aurora Background](https://valyro.xyz/r/aurora-background.json) (Pro): Slow aurora behind your content. Demo: https://valyro.xyz/effects/aurora-background/
- [Animated Border](https://valyro.xyz/r/animated-border.json) (Pro): Light beam running around a border. Demo: https://valyro.xyz/effects/animated-border/
- [Shimmer Text](https://valyro.xyz/r/shimmer-text.json) (Pro): Shine sweeping across text. Demo: https://valyro.xyz/effects/shimmer-text/
- [Number Ticker](https://valyro.xyz/r/number-ticker.json) (Pro): Animated counter with Intl formatting. Demo: https://valyro.xyz/effects/number-ticker/
- [Marquee](https://valyro.xyz/r/marquee.json) (Pro): Endless scrolling row of logos and testimonials. Demo: https://valyro.xyz/effects/marquee/
- [Spotlight](https://valyro.xyz/r/spotlight.json) (Pro): Stage beams and a cursor spotlight. Demo: https://valyro.xyz/effects/spotlight/
- [Meteors](https://valyro.xyz/r/meteors.json) (Pro): Falling meteors. Demo: https://valyro.xyz/effects/meteors/
- [Background Pattern](https://valyro.xyz/r/background-pattern.json) (Pro): Fading dot, grid and line backgrounds. Demo: https://valyro.xyz/effects/background-pattern/
- [Text Reveal](https://valyro.xyz/r/text-reveal.json) (Pro): Word-by-word reveal and typewriter text. Demo: https://valyro.xyz/effects/text-reveal/
- [Confetti](https://valyro.xyz/r/confetti.json) (Pro): Confetti: a component and fireConfetti(). Demo: https://valyro.xyz/effects/confetti/
- [Particles](https://valyro.xyz/r/particles.json) (Pro): Particle field that reacts to the cursor. Demo: https://valyro.xyz/effects/particles/
- [Magnetic](https://valyro.xyz/r/magnetic.json) (Pro): Magnetic pull toward the cursor. Demo: https://valyro.xyz/effects/magnetic/
- [Tilt Card](https://valyro.xyz/r/tilt-card.json) (Pro): 3D tilt with glare and parallax. Demo: https://valyro.xyz/effects/tilt-card/
- [Ripple](https://valyro.xyz/r/ripple.json) (Pro): Material-style press ripple. Demo: https://valyro.xyz/effects/ripple/
- [Bubble Background](https://valyro.xyz/r/bubble-background.json) (Pro): Soft colored bubbles, one follows the cursor. Demo: https://valyro.xyz/effects/bubble-background/
- [Fireworks Background](https://valyro.xyz/r/fireworks-background.json) (Pro): Fireworks for wins and achievements, launch on click. Demo: https://valyro.xyz/effects/fireworks-background/
- [Gradient Background](https://valyro.xyz/r/gradient-background.json) (Pro): Slowly shifting gradient. Demo: https://valyro.xyz/effects/gradient-background/
- [Hexagon Background](https://valyro.xyz/r/hexagon-background.json) (Pro): Hexagon grid with a glowing trail. Demo: https://valyro.xyz/effects/hexagon-background/
- [Hole Background](https://valyro.xyz/r/hole-background.json) (Pro): Portal tunnel with rings and particles. Demo: https://valyro.xyz/effects/hole-background/
- [Stars Background](https://valyro.xyz/r/stars-background.json) (Pro): Starry sky with cursor parallax. Demo: https://valyro.xyz/effects/stars-background/

## Animated (animate)

- [Toggle](https://valyro.xyz/r/toggle.json) (Pro): Toggle button with a springy response. Demo: https://valyro.xyz/animate/toggle/
- [Code Tabs](https://valyro.xyz/r/code-tabs.json) (Pro): Code variants in tabs: npm, pnpm, bun, with copy. Demo: https://valyro.xyz/animate/code-tabs/
- [Flip Button](https://valyro.xyz/r/flip-button.json) (Pro): Two-sided button that flips on a spring. Demo: https://valyro.xyz/animate/flip-button/
- [Liquid Button](https://valyro.xyz/r/liquid-button.json) (Pro): Button that fills with “liquid” on hover. Demo: https://valyro.xyz/animate/liquid-button/
- [Theme Toggler](https://valyro.xyz/r/theme-toggler.json) (Pro): Light/dark switch with a View Transitions reveal. Demo: https://valyro.xyz/animate/theme-toggler/
- [GitHub Stars Button](https://valyro.xyz/r/github-stars-button.json) (Pro): Repository link with a rolling star count. Demo: https://valyro.xyz/animate/github-stars-button/
- [Number Wheel](https://valyro.xyz/r/number-wheel.json) (Pro): Number on a spinning wheel with neighboring values. Demo: https://valyro.xyz/animate/number-wheel/
- [Share Button](https://valyro.xyz/r/share-button.json) (Pro): Button that fans out social icons. Demo: https://valyro.xyz/animate/share-button/
- [Pin List](https://valyro.xyz/r/pin-list.json) (Pro): Pinnable list: items glide between groups. Demo: https://valyro.xyz/animate/pin-list/
- [Notification Stack](https://valyro.xyz/r/notification-stack.json) (Pro): Notification stack that expands into a list. Demo: https://valyro.xyz/animate/notification-stack/
- [Todo List](https://valyro.xyz/r/todo-list.json) (Pro): Checklist with a wavy strike-through on done items. Demo: https://valyro.xyz/animate/todo-list/
- [Presence Avatars](https://valyro.xyz/r/presence-avatars.json) (Pro): Who’s online: avatars rearrange as status changes. Demo: https://valyro.xyz/animate/presence-avatars/
- [Radial Menu](https://valyro.xyz/r/radial-menu.json) (Pro): Ring-shaped context menu on right-click. Demo: https://valyro.xyz/animate/radial-menu/
- [Radial Nav](https://valyro.xyz/r/radial-nav.json) (Pro): Circular navigation with an arrow that turns to the section. Demo: https://valyro.xyz/animate/radial-nav/
- [Radial Intro](https://valyro.xyz/r/radial-intro.json) (Pro): Items fly out from the center and orbit. Demo: https://valyro.xyz/animate/radial-intro/
- [Link Preview](https://valyro.xyz/r/link-preview.json) (Pro): Page preview on link hover. Demo: https://valyro.xyz/animate/link-preview/

## 3D and motion (motion)

- [Scroll Cylinder](https://valyro.xyz/r/scroll-cylinder.json) (Pro): Headline lines on a rotating cylinder, driven by scroll. Demo: https://valyro.xyz/motion/scroll-cylinder/
- [Stacking Panels](https://valyro.xyz/r/stacking-panels.json) (Pro): Panels stick on scroll and pile into a stack. Demo: https://valyro.xyz/motion/stacking-panels/
- [Orbit Showcase](https://valyro.xyz/r/orbit-showcase.json) (Pro): 3D ring of cards: drag with momentum, arrows, keyboard. Demo: https://valyro.xyz/motion/orbit-showcase/
- [Flip Card](https://valyro.xyz/r/flip-card.json) (Pro): Two-sided card that flips in 3D. Demo: https://valyro.xyz/motion/flip-card/
- [Word Prism](https://valyro.xyz/r/word-prism.json) (Pro): Words on the faces of a prism that turns to the next one. Demo: https://valyro.xyz/motion/word-prism/
- [Horizon Grid](https://valyro.xyz/r/horizon-grid.json) (Pro): Endless grid floor fading into a glowing horizon. Demo: https://valyro.xyz/motion/horizon-grid/
- [Helix Rail](https://valyro.xyz/r/helix-rail.json) (Pro): Cards on a helix that spins with scroll. Demo: https://valyro.xyz/motion/helix-rail/
- [Shader Aurora](https://valyro.xyz/r/shader-aurora.json) (Pro): WebGL shader aurora that reaches toward the cursor. Demo: https://valyro.xyz/motion/shader-aurora/
- [Liquid Surface](https://valyro.xyz/r/liquid-surface.json) (Pro): GPU water surface: ripples follow the cursor, splash on click. Demo: https://valyro.xyz/motion/liquid-surface/
- [Particle Fabric](https://valyro.xyz/r/particle-fabric.json) (Pro): Fabric of tens of thousands of glowing points: folds, cursor, waves. Demo: https://valyro.xyz/motion/particle-fabric/
- [Particle Picture](https://valyro.xyz/r/particle-picture.json) (Pro): Particles assemble into an image or text and flow between them. Demo: https://valyro.xyz/motion/particle-picture/
- [Coverflow Carousel](https://valyro.xyz/r/coverflow-carousel.json) (Pro): 3D product carousel on native scroll: swipe with momentum, arrows, keyboard. Demo: https://valyro.xyz/motion/coverflow-carousel/
- [Parallax Layers](https://valyro.xyz/r/parallax-layers.json) (Pro): Depth layers that shift with scroll and cursor. Demo: https://valyro.xyz/motion/parallax-layers/
- [Shape Morph](https://valyro.xyz/r/shape-morph.json) (Pro): Shapes morph into each other on a spring: circle, drop, star, flower. Demo: https://valyro.xyz/motion/shape-morph/
- [Path Text](https://valyro.xyz/r/path-text.json) (Pro): Text along a circle, arc or wave, rotating over time or with scroll. Demo: https://valyro.xyz/motion/path-text/
- [Button 3D](https://valyro.xyz/r/button-3d.json) (Pro): Chunky key-style button that presses in and springs back. Demo: https://valyro.xyz/motion/button-3d/
- [Switch 3D](https://valyro.xyz/r/switch-3d.json) (Pro): Cube switch that rolls between “off” and a glowing “on”. Demo: https://valyro.xyz/motion/switch-3d/
- [Shader Gradient](https://valyro.xyz/r/shader-gradient.json) (Pro): Live shader gradient for heroes: colors flow around the cursor. Demo: https://valyro.xyz/motion/shader-gradient/
- [Dot Globe](https://valyro.xyz/r/dot-globe.json) (Pro): WebGL2 dot globe: markers, pulsing arcs, drag to rotate. Demo: https://valyro.xyz/motion/dot-globe/
- [Scroll Scene](https://valyro.xyz/r/scroll-scene.json) (Pro): Scroll scene: a pinned screen changes step by step, with a progress rail. Demo: https://valyro.xyz/motion/scroll-scene/

## Motion for any component (motion-kit)

- [Reveal](https://valyro.xyz/r/reveal.json) (Pro): Reveal any component on scroll: rise, fade in, 3D unfold. Demo: https://valyro.xyz/motion/reveal/
- [Stagger](https://valyro.xyz/r/stagger.json) (Pro): Lists, grids and table rows appear in a wave, one after another. Demo: https://valyro.xyz/motion/stagger/
- [Tilt](https://valyro.xyz/r/tilt.json) (Pro): Tilt, lift, glare and magnetic pull under the cursor for any card. Demo: https://valyro.xyz/motion/tilt/
- [Layout Group](https://valyro.xyz/r/layout-group.json) (Pro): Jump-free reordering: filter, sort, regrid. Demo: https://valyro.xyz/motion/layout-group/
- [Presence](https://valyro.xyz/r/presence.json) (Pro): Enter and exit: an element stays mounted until its exit animation ends. Demo: https://valyro.xyz/motion/presence/
- [Scene Backdrop](https://valyro.xyz/r/scene-backdrop.json) (Pro): WebGL or CSS scene behind a regular UI: hero, cards, dashboard. Demo: https://valyro.xyz/motion/scene-backdrop/

## Widgets and metrics (widgets)

- [Widget](https://valyro.xyz/r/widget.json) (Pro): Dashboard container: title, actions, big number, legend and chart area. Demo: https://valyro.xyz/data-display/widget/
- [Number Value](https://valyro.xyz/r/number-value.json) (Pro): Locale-aware number: currency, percent, compact notation and units. Demo: https://valyro.xyz/data-display/number-value/
- [Trend Value](https://valyro.xyz/r/trend-value.json) (Pro): Metric change: arrow, sign and color, as text or a pill. Demo: https://valyro.xyz/data-display/trend-value/
- [Description List](https://valyro.xyz/r/description-list.json): Key–value list: stacked, inline or a grid with icons. Demo: https://valyro.xyz/data-display/description-list/
- [Item Card](https://valyro.xyz/r/item-card.json) (Pro): Row card: icon, title, description and a control on the right. Demo: https://valyro.xyz/data-display/item-card/
- [List Block](https://valyro.xyz/r/list-block.json) (Pro): List with images or icons, descriptions and values. Demo: https://valyro.xyz/data-display/list-block/
- [Record Card](https://valyro.xyz/r/record-card.json) (Pro): Record card: status, context, key fields and actions. Demo: https://valyro.xyz/data-display/record-card/
- [Proportion Bar](https://valyro.xyz/r/proportion-bar.json) (Pro): Proportion bar with a legend: storage, budget, breakdown. Demo: https://valyro.xyz/data-display/proportion-bar/
- [Activity Rings](https://valyro.xyz/r/activity-rings.json) (Pro): Concentric progress rings toward goals. Demo: https://valyro.xyz/data-display/activity-rings/
- [Leaderboard](https://valyro.xyz/r/leaderboard.json) (Pro): Leaderboard: medal places, thumbnails, numbers and change over a period. Demo: https://valyro.xyz/data-display/leaderboard/
- [Sequence Diagram](https://valyro.xyz/r/sequence-diagram.json) (Pro): Sequence diagram: participants, lifelines, calls and responses. Demo: https://valyro.xyz/charts/sequence-diagram/
- [Flow Diagram](https://valyro.xyz/r/flow-diagram.json) (Pro): Auto-laid-out flowchart: steps, decisions, edge labels. Demo: https://valyro.xyz/charts/flow-diagram/
- [Tile Map](https://valyro.xyz/r/tile-map.json) (Pro): Lightweight tile map: markers, route, popup cards, zoom. Demo: https://valyro.xyz/charts/tile-map/

## Selection and filters (selection)

- [Chip Group](https://valyro.xyz/r/chip-group.json): Chip group with icons: one or several options. Demo: https://valyro.xyz/forms/chip-group/
- [Swatch Picker](https://valyro.xyz/r/swatch-picker.json) (Pro): Pick a color from swatches: product, theme, label. Demo: https://valyro.xyz/forms/swatch-picker/
- [Size Picker](https://valyro.xyz/r/size-picker.json) (Pro): Size selection: tiles or a scrolling row, out-of-stock states. Demo: https://valyro.xyz/forms/size-picker/
- [Histogram Range](https://valyro.xyz/r/histogram-range.json) (Pro): Price range with a histogram, two thumbs and inputs. Demo: https://valyro.xyz/forms/histogram-range/
- [Date Of Birth Input](https://valyro.xyz/r/date-of-birth-input.json) (Pro): Date of birth as three selects in locale order. Demo: https://valyro.xyz/forms/date-of-birth-input/
- [Checkbox Tree](https://valyro.xyz/r/checkbox-tree.json): Checkbox tree: cascading, indeterminate state, keyboard. Demo: https://valyro.xyz/forms/checkbox-tree/
- [Filter Toolbar](https://valyro.xyz/r/filter-toolbar.json) (Pro): Catalog filter bar: result count, dropdown filters, sorting, chips. Demo: https://valyro.xyz/forms/filter-toolbar/

## Shopping and payments (checkout)

- [Credit Card](https://valyro.xyz/r/credit-card.json) (Pro): Bank card: gradient or two-tone, network detected from the number, contactless. Demo: https://valyro.xyz/commerce/credit-card/
- [Card Input](https://valyro.xyz/r/card-input.json) (Pro): Number, expiry and CVC in one field: masks, Luhn check, auto-advance. Demo: https://valyro.xyz/commerce/card-input/
- [Payment Methods](https://valyro.xyz/r/payment-methods.json) (Pro): Saved cards and wallets as selectable cards. Demo: https://valyro.xyz/commerce/payment-methods/
- [Checkout Form](https://valyro.xyz/r/checkout-form.json) (Pro): Checkout: shipping, address type, payment and field validation. Demo: https://valyro.xyz/commerce/checkout-form/
- [Transaction List](https://valyro.xyz/r/transaction-list.json) (Pro): Transactions: charges, top-ups, refunds and balance. Demo: https://valyro.xyz/commerce/transaction-list/
- [Wallet Balance](https://valyro.xyz/r/wallet-balance.json) (Pro): Wallet balance: hide amount, actions, card for top-ups. Demo: https://valyro.xyz/commerce/wallet-balance/
- [Purchase Card](https://valyro.xyz/r/purchase-card.json) (Pro): Product purchase: banner, one-time payment or subscription, card and address. Demo: https://valyro.xyz/commerce/purchase-card/
- [Subscription Manager](https://valyro.xyz/r/subscription-manager.json) (Pro): Subscription management: status, features, quotas, billing and cancellation. Demo: https://valyro.xyz/commerce/subscription-manager/
- [Loyalty Rewards](https://valyro.xyz/r/loyalty-rewards.json) (Pro): Loyalty program: points, tier, progress and a rewards catalog. Demo: https://valyro.xyz/commerce/loyalty-rewards/
- [Product Spotlight](https://valyro.xyz/r/product-spotlight.json) (Pro): Featured product: tagged photo, price, rating and actions. Demo: https://valyro.xyz/commerce/product-spotlight/
- [Location Card](https://valyro.xyz/r/location-card.json) (Pro): Store location: distance, opening hours, pickup options and ordering. Demo: https://valyro.xyz/commerce/location-card/

## Account and security (account)

- [Two Factor Setup](https://valyro.xyz/r/two-factor-setup.json) (Pro): Two-factor setup: method, QR code or phone, code verification. Demo: https://valyro.xyz/account-access/two-factor-setup/
- [Active Sessions](https://valyro.xyz/r/active-sessions.json) (Pro): Active sessions: current device, suspicious sign-ins, revoke access. Demo: https://valyro.xyz/account-access/active-sessions/
- [Access Tokens](https://valyro.xyz/r/access-tokens.json) (Pro): Personal access tokens: scope, last used, revoke. Demo: https://valyro.xyz/account-access/access-tokens/
- [Profile Details](https://valyro.xyz/r/profile-details.json) (Pro): Profile: completeness, verified contacts, fields. Demo: https://valyro.xyz/account-access/profile-details/
- [Address Book](https://valyro.xyz/r/address-book.json) (Pro): Address book: home, work, default addresses and actions. Demo: https://valyro.xyz/account-access/address-book/
- [Privacy Center](https://valyro.xyz/r/privacy-center.json) (Pro): Privacy center: score, setting groups, protection counters. Demo: https://valyro.xyz/account-access/privacy-center/
- [Age Gate](https://valyro.xyz/r/age-gate.json) (Pro): Age verification: date of birth, remember me, deny under the limit. Demo: https://valyro.xyz/account-access/age-gate/
- [Social Profiles](https://valyro.xyz/r/social-profiles.json) (Pro): Linked social profiles: reorder, verify, copy link. Demo: https://valyro.xyz/account-access/social-profiles/
- [Support Center](https://valyro.xyz/r/support-center.json) (Pro): Support: contact channels with status, tickets with filters. Demo: https://valyro.xyz/account-access/support-center/

## Platform and API (platform)

- [Certificate List](https://valyro.xyz/r/certificate-list.json) (Pro): SSL/TLS certificates: time to expiry, auto-renewal, legend. Demo: https://valyro.xyz/devtools/certificate-list/
- [Webhook Endpoints](https://valyro.xyz/r/webhook-endpoints.json) (Pro): Webhooks: endpoints, events, toggles and delivery rate. Demo: https://valyro.xyz/devtools/webhook-endpoints/
- [Download Center](https://valyro.xyz/r/download-center.json) (Pro): Exports: file types, size, link expiry and re-request. Demo: https://valyro.xyz/devtools/download-center/
- [Storage Usage](https://valyro.xyz/r/storage-usage.json) (Pro): Storage: usage by category and cleanup actions. Demo: https://valyro.xyz/devtools/storage-usage/
- [Api Playground](https://valyro.xyz/r/api-playground.json) (Pro): API playground: model, parameters, prompts and JSON request/response. Demo: https://valyro.xyz/devtools/api-playground/

## Brand and promo (brand)

- [Theme Customizer](https://valyro.xyz/r/theme-customizer.json) (Pro): Theme customizer: presets, colors, radius, font and a live preview. Demo: https://valyro.xyz/marketing/theme-customizer/
- [Color Token](https://valyro.xyz/r/color-token.json) (Pro): Color token: swatch or row with the variable, value and copy. Demo: https://valyro.xyz/marketing/color-token/
- [Type Specimen](https://valyro.xyz/r/type-specimen.json) (Pro): Type specimen: a large glyph and typeface–role pairs. Demo: https://valyro.xyz/marketing/type-specimen/
- [Bento Grid](https://valyro.xyz/r/bento-grid.json) (Pro): Responsive bento grid of cards in mixed sizes. Demo: https://valyro.xyz/marketing/bento-grid/
- [Image Adjustments](https://valyro.xyz/r/image-adjustments.json) (Pro): Color grading: upload, fit and seven filter sliders. Demo: https://valyro.xyz/image-gen/image-adjustments/
- [Award Badge](https://valyro.xyz/r/award-badge.json) (Pro): Award badge with a laurel wreath, stars and caption. Demo: https://valyro.xyz/marketing/award-badge/
- [Template Card](https://valyro.xyz/r/template-card.json) (Pro): Template card: live thumbnail, badge, description and links. Demo: https://valyro.xyz/marketing/template-card/
- [App Store Buttons](https://valyro.xyz/r/app-store-buttons.json) (Pro): App store buttons: App Store, Google Play, Galaxy Store, RuStore. Demo: https://valyro.xyz/marketing/app-store-buttons/

## AI agents (agents)

- [Agent Trace Timeline](https://valyro.xyz/r/agent-trace-timeline.json) (Pro): Agent steps as a waterfall: time, tokens, cost, inputs and outputs with secrets redacted. Demo: https://valyro.xyz/ai/agent-trace-timeline/
- [Agent Approval Gate](https://valyro.xyz/r/agent-approval-gate.json) (Pro): Agent action approval: risk, diff, explicit consent and a decision log. Demo: https://valyro.xyz/ai/agent-approval-gate/
- [Context Budget Meter](https://valyro.xyz/r/context-budget-meter.json) (Pro): Context window by part: system prompt, documents, history, overflow and what to trim. Demo: https://valyro.xyz/ai/context-budget-meter/

## Facts and sources (trust)

- [Citation Evidence Lens](https://valyro.xyz/r/citation-evidence-lens.json) (Pro): Highlights claims by how well they are supported, with sources for each. Demo: https://valyro.xyz/content/citation-evidence-lens/
- [Source Dossier](https://valyro.xyz/r/source-dossier.json) (Pro): Source dossier: verification status, linked facts, source types, print. Demo: https://valyro.xyz/content/source-dossier/
- [Correction Ledger](https://valyro.xyz/r/correction-ledger.json) (Pro): Correction history: what changed, when and why, with a word-level diff. Demo: https://valyro.xyz/content/correction-ledger/
- [Interactive Quote Deck](https://valyro.xyz/r/interactive-quote-deck.json) (Pro): Quotes with the primary source, context, original wording and attributed sharing. Demo: https://valyro.xyz/content/interactive-quote-deck/

## Scenarios and insights (insights)

- [Scenario Simulator](https://valyro.xyz/r/scenario-simulator.json) (Pro): Assumption sliders update the forecast, uncertainty band and KPIs. Demo: https://valyro.xyz/charts/scenario-simulator/
- [Map Layer Story](https://valyro.xyz/r/map-layer-story.json) (Pro): Map story: each step toggles data layers and frames a region, no WebGL. Demo: https://valyro.xyz/charts/map-layer-story/
- [Confidence Band Chart](https://valyro.xyz/r/confidence-band-chart.json) (Pro): Forecast with confidence intervals and outliers, keyboard-readable points. Demo: https://valyro.xyz/charts/confidence-band-chart/
- [Variance Explainer](https://valyro.xyz/r/variance-explainer.json) (Pro): Waterfall: what drove a KPI change, with drill-down into factors. Demo: https://valyro.xyz/charts/variance-explainer/
- [Cohort Retention Matrix](https://valyro.xyz/r/cohort-retention-matrix.json) (Pro): Cohort retention: heat table, averages, anomalies and notes. Demo: https://valyro.xyz/charts/cohort-retention-matrix/

## Product and SaaS (saas)

- [Feature Flag Simulator](https://valyro.xyz/r/feature-flag-simulator.json) (Pro): Preview the product under different feature flags and segments, no production access. Demo: https://valyro.xyz/devtools/feature-flag-simulator/
- [Subscription Plan Simulator](https://valyro.xyz/r/subscription-plan-simulator.json) (Pro): Pricing calculator: seats, monthly or yearly, VAT and an exact price breakdown. Demo: https://valyro.xyz/commerce/subscription-plan-simulator/
- [Guided Product Finder](https://valyro.xyz/r/guided-product-finder.json) (Pro): Product finder wizard: branching questions and why a product fits. Demo: https://valyro.xyz/commerce/guided-product-finder/
- [Keyboard Map Overlay](https://valyro.xyz/r/keyboard-map-overlay.json) (Pro): Keyboard shortcut map for a screen: search, keyboard view and practice mode. Demo: https://valyro.xyz/navigation/keyboard-map-overlay/
- [Form Autosave Status](https://valyro.xyz/r/form-autosave-status.json) (Pro): Form autosave status: offline, error, version conflict and a useAutosave hook. Demo: https://valyro.xyz/forms/form-autosave-status/
- [Course Path Navigator](https://valyro.xyz/r/course-path-navigator.json) (Pro): Course map: modules, locks, progress and skills, a list on narrow screens. Demo: https://valyro.xyz/workspace/course-path-navigator/

## Game analytics (gaming)

- [Tier List](https://valyro.xyz/r/tier-list.json) (Pro): S+…D tier list: portraits with role badges, role filter, drag with mouse, touch or keyboard, export. Demo: https://valyro.xyz/games/tier-list/
- [Meta Table](https://valyro.xyz/r/meta-table.json) (Pro): Meta table: tier, win, pick and ban rates with patch-over-patch change, role and rank filters, virtualized. Demo: https://valyro.xyz/games/meta-table/
- [Matchup Matrix](https://valyro.xyz/r/matchup-matrix.json) (Pro): Counterpicks: champion-vs-champion heat matrix with tooltips, pick your champion, a list on phones. Demo: https://valyro.xyz/games/matchup-matrix/
- [Patch Notes](https://valyro.xyz/r/patch-notes.json) (Pro): Patch notes: champions and items with ability icons, before → after, buffs, nerfs and changes, filters. Demo: https://valyro.xyz/games/patch-notes/
- [Tournament Bracket](https://valyro.xyz/r/tournament-bracket.json) (Pro): Tournament bracket: single and double elimination, series scores, winner, team path, monograms. Demo: https://valyro.xyz/games/tournament-bracket/

## Depth and reveal (depth)

- [Folded Depth Cards](https://valyro.xyz/r/folded-depth-cards.json) (Pro): Cards layered in depth that fold like paper, with keyboard and swipe. Demo: https://valyro.xyz/animate/folded-depth-cards/
- [Halftone Image Reveal](https://valyro.xyz/r/halftone-image-reveal.json) (Pro): Image revealed in halftone dots on scroll, hover or when it appears. Demo: https://valyro.xyz/animate/halftone-image-reveal/

## Pro themes

- [Anthropic theme](https://valyro.xyz/r/anthropic-theme.json) (Pro): Warm ivory and clay, serif headings, calm editorial rhythm. Import components/valyro-ui/styles/themes/anthropic.css after styles/index.css.
- [Brutalism theme](https://valyro.xyz/r/brutalism-theme.json) (Pro): Neo-brutalism: thick black outlines, hard offset shadows, loud flat colour. Import components/valyro-ui/styles/themes/brutalism.css after styles/index.css.
- [Cyber theme](https://valyro.xyz/r/cyber-theme.json) (Pro): Neon sci-fi HUD: chamfered corners, cyan and magenta glow, technical type. Import components/valyro-ui/styles/themes/cyber.css after styles/index.css.
- [Fantasy theme](https://valyro.xyz/r/fantasy-theme.json) (Pro): Classic RPG: leather and parchment, forged-gold buttons, ruby-set corner guards, Cinzel and Garamond. Import components/valyro-ui/styles/themes/fantasy.css after styles/index.css.
- [Fluent theme](https://valyro.xyz/r/fluent-theme.json) (Pro): Fluent 2 (Windows 11): Mica and Acrylic materials, Segoe UI, soft depth. Import components/valyro-ui/styles/themes/fluent.css after styles/index.css.
- [Frost theme](https://valyro.xyz/r/frost-theme.json) (Pro): Steel and ice: gunmetal night, polished-silver buttons, ice-shard corners, chamfered plates, Cinzel over Inter. Import components/valyro-ui/styles/themes/frost.css after styles/index.css.
- [Hearthstone theme](https://valyro.xyz/r/hearthstone-theme.json) (Pro): HearthPulse tavern: parchment and red cloth, timber and gold frames, glossy mana-blue buttons, HSDisplay headings. Import components/valyro-ui/styles/themes/hearthstone.css after styles/index.css.
- [Linear theme](https://valyro.xyz/r/linear-theme.json) (Pro): Dark-first SaaS: dense layout, violet accent, subtle gradient edges, Inter. Import components/valyro-ui/styles/themes/linear.css after styles/index.css.
- [Manacost theme](https://valyro.xyz/r/manacost-theme.json) (Pro): Hearthstone news portal: white pages, portal-blue top rules and table heads, navy accent, yellow markers. Import components/valyro-ui/styles/themes/manacost.css after styles/index.css.
- [Material theme](https://valyro.xyz/r/material-theme.json) (Pro): Material 3: tonal surfaces from one seed colour, large radii, Roboto Flex. Import components/valyro-ui/styles/themes/material.css after styles/index.css.
- [Mythic theme](https://valyro.xyz/r/mythic-theme.json) (Pro): Obsidian and gold leaf: gold hairlines and corner lozenges, spaced capital labels, Garamond headings over Inter. Import components/valyro-ui/styles/themes/mythic.css after styles/index.css.
- [Paper theme](https://valyro.xyz/r/paper-theme.json) (Pro): Notion-like editorial: near-white page, quiet greys, almost no borders. Import components/valyro-ui/styles/themes/paper.css after styles/index.css.
- [Pixel theme](https://valyro.xyz/r/pixel-theme.json) (Pro): 8-bit games: pixel font, blocky bevelled controls, stepped pixel shadows. Import components/valyro-ui/styles/themes/pixel.css after styles/index.css.
- [Playrix theme](https://valyro.xyz/r/playrix-theme.json) (Pro): Casual-game brand: Playrix green candy buttons, sky-blue links, rounded white cards on a leafy page. Import components/valyro-ui/styles/themes/playrix.css after styles/index.css.
- [Stripe theme](https://valyro.xyz/r/stripe-theme.json) (Pro): Fintech clarity: indigo accent, airy white surfaces, soft layered shadows. Import components/valyro-ui/styles/themes/stripe.css after styles/index.css.
- [Terminal theme](https://valyro.xyz/r/terminal-theme.json) (Pro): Monospace everywhere, phosphor green on black with amber accents, square corners. Import components/valyro-ui/styles/themes/terminal.css after styles/index.css.

## Setup items

- [Styles](https://valyro.xyz/r/styles.json): Design tokens: one self-contained file per theme in styles/themes/ plus base CSS. Import styles/index.css once (Vercel and Liquid Glass); import styles/themes/<name>.css for any other theme. styles/tailwind.css maps the tokens onto Tailwind CSS v4 utilities (import it after tailwindcss).
- [Theme Provider](https://valyro.xyz/r/theme.json): ThemeProvider sets data-theme / data-mode on <html> and provides theme and locale context; ThemeScope themes one subtree (and the layers opened inside it); createThemeCSS generates --ui-* overrides for a custom theme.
- [Primitives](https://valyro.xyz/r/primitives.json): Headless hooks and helpers the components are built on (the npm package exports them as valyro-ui/headless): controllable state, list navigation, focus trap, dismissable layers, floating positioning, presence, virtualization, Slot, portals, dates and React 17–19 helpers.
- [Icons](https://valyro.xyz/r/icons.json): Inline SVG icon set used by the components.