# beUI Pro Full Catalog Premium, motion-rich React components, blocks, and full landing-page templates you drop into your app and own. beUI Pro sells premium animated React blocks, page sections, components, and full landing-page templates with source code access. ## Free Studio - https://pro.beui.dev/studio - Create, customize, and export animated WebGL backgrounds as PNG, WebM, or standalone React source for free. ## Categories - Components: https://pro.beui.dev/components/categories/components - Small, polished React UI components with motion, source access, and shadcn-compatible installs. - Blocks: https://pro.beui.dev/components/categories/blocks - Premium animated React blocks for heroes, pricing, newsletters, integrations, testimonials, forms, and landing-page sections. - Illustrations: https://pro.beui.dev/illustrations - Responsive animated SVG illustrations with editable React source for product stories, feature sections, empty spaces, and launch pages. - Pages: https://pro.beui.dev/components/categories/pages - Full-page React sections for onboarding, auth, careers, about pages, and animated 404 experiences. - Templates: https://pro.beui.dev/components/categories/templates - Complete Next.js landing-page templates for AI products, analytics tools, developer tools, crypto products, and modern SaaS launches. ## Premium Items - Usage Budget: https://pro.beui.dev/components/usage-budget - Type: block - Description: A segmented usage meter with resource costs, animated totals, and an adjustable monthly budget. - Variants: Usage Budget - Research Sources: https://pro.beui.dev/components/research-sources - Type: block - Description: A searchable reference library with source filters, readable excerpts, and context selection. - Variants: Research Sources - Conversion Funnel: https://pro.beui.dev/components/conversion-funnel - Type: block - Description: Explore conversion stages with an interactive Recharts chart, period controls, and drop-off details. - Variants: Conversion Funnel - Model Picker: https://pro.beui.dev/components/model-picker - Type: component - Description: A searchable model picker with provider logos, grouped options, keyboard selection, and a fixed bottom search field. - Variants: Provider catalog, Provider rail - AI Artifacts: https://pro.beui.dev/components/ai-artifacts - Type: block - Description: Composable artifact containers with headers, actions, content, and footers for generated documents, code, and custom outputs. - Variants: Code artifact, Document artifact - AI Thinking Loaders: https://pro.beui.dev/components/ai-thinking-loader - Type: component - Description: Six compact pixel and node animations for AI thinking, analysis, and generation states. - Variants: Pixel orbit, Grid scan, Diagonal wave, Assembling tiles, Diamond loop, Connected nodes - App Preview: https://pro.beui.dev/illustrations/app-preview - Type: illustration - Description: A compact collection of single-screen mobile app illustrations for crypto, AI, and social products. - Isometric Scenes: https://pro.beui.dev/illustrations/isometric-scenes - Type: illustration - Description: A growing collection of animated perspective scenes for infrastructure, systems, and layered product concepts. - AI & Chat: https://pro.beui.dev/illustrations/chat-exchange - Type: illustration - Description: A collection of compact AI prompts, assistant conversations, research states, and generated results. - Voice Note: https://pro.beui.dev/illustrations/voice-note - Type: illustration - Description: A perspective voice memo stack with an animated waveform, transcript status, and floating playback control. - Document Cards: https://pro.beui.dev/illustrations/document-cards - Type: illustration - Description: A growing collection of animated document stacks, verification states, and file-focused compositions. - Card Stack: https://pro.beui.dev/illustrations/layered-cards - Type: illustration - Description: A growing collection of layered card decks, cycling surfaces, and compact interface stacks. - Bar Wave: https://pro.beui.dev/illustrations/bar-wave - Type: illustration - Description: A compact isometric stack with a slow traveling wave and gentle pointer response. - Connected Hub: https://pro.beui.dev/illustrations/connected-hub - Type: illustration - Description: A compact collection of connected service hubs with editable integration nodes and animated signal paths. - Search & Command: https://pro.beui.dev/illustrations/search-command - Type: illustration - Description: A compact command search that reveals a query, filters workspace results, and moves the active selection. - File Flow: https://pro.beui.dev/illustrations/file-flow - Type: illustration - Description: A compact file transformation track with queued sources, an active processing gate, and a completed output. - Live Presence: https://pro.beui.dev/illustrations/live-presence - Type: illustration - Description: A collection of shared editing scenes with collaborator avatars, cursors, selections, and comments. - Split Reveal: https://pro.beui.dev/illustrations/split-reveal - Type: illustration - Description: A before-and-after reveal that moves between obscured and clear content. - Rolling Stack: https://pro.beui.dev/illustrations/rolling-stack - Type: illustration - Description: A rolling stack that cycles any ordered set of labeled items into focus. - Horizontal Stack: https://pro.beui.dev/illustrations/horizontal-stack - Type: illustration - Description: A horizontal rolling stack that cycles icon-only cards through focus. - Icon Marquee: https://pro.beui.dev/illustrations/icon-marquee - Type: illustration - Description: Two continuous rows of icon cards moving in opposite directions. - Arc Stack: https://pro.beui.dev/illustrations/arc-stack - Type: illustration - Description: A semicircular stack that rolls images or connector cards through the center focus. - Animated Dropdown: https://pro.beui.dev/components/animated-dropdown - Type: component - Description: A composable dropdown with a corner-origin surface morph, a spring-driven focus surface, nested menus, collision handling, and complete keyboard navigation. - Variants: Animated dropdown - Animated Text: https://pro.beui.dev/components/animated-text - Type: component - Description: Three composable text treatments for alternating hover labels and cycling or progressive blur-highlight paragraphs. - Variants: Alternating text swap, Blur highlight, Progressive blur highlight - Flip Card: https://pro.beui.dev/components/flip-card - Type: component - Description: Two composable card interactions: a direct two-sided flip and a compact card that flips continuously as it morphs into a centered modal. - Variants: Image flip cards, Modal flip card - Cards: https://pro.beui.dev/components/cards - Type: component - Description: Compact standalone cards with clear information hierarchy, purposeful actions, and polished motion. - Variants: Balance card, Compact card, Invite card, Folder card, Story card, Profile card - What We Offer: https://pro.beui.dev/components/what-we-offer - Type: block - Description: Rounded product offering sections that combine a clear value proposition, focused visual proof, a primary action, and scannable service or capability cards. - Variants: AI operations overview, Layered control stack, Connected workflow - Step Form: https://pro.beui.dev/components/step-form - Type: block - Description: A focused multi-step form with directional transitions, morphing height, stable validation, keyboard flow, and a concise success state. - Variants: Focused step form, Card stack, Inline prompt, Onboarding form - Empty States: https://pro.beui.dev/components/empty-states - Type: block - Description: Four animated empty-state blocks with concise actions, distinct illustration styles, and theme-aware motion. - Variants: Archive drawer, Search lens, Inbox zero, Blank board - Agent Chat Input: https://pro.beui.dev/components/agent-chat-input - Type: block - Description: Premium chat composer variants ranging from a full agent workspace input to a compact credits-aware prompt bar. - Variants: Studio composer, Credits composer - Morphic Tooltip: https://pro.beui.dev/components/morphic-tooltip - Type: component - Description: A shared-layout tooltip primitive with one animated surface that morphs between triggers for polished hover and focus hints. - Morphic Card Modal: https://pro.beui.dev/components/morphic-card-modal - Type: component - Description: Apple-style card expansion modal. A card morphs into a full overlay using shared layout animation — no position hacks, just framer layoutId. - Hero Sections: https://pro.beui.dev/components/hero-sections - Type: block - Description: A growing set of premium hero section variants with polished copy layout, CTA placement, and product demo framing for modern React landing pages. - Variants: Voice mobile, Workflow aurora, DeFi routing, AI marketplace, Signal aurora, Workflow split, Agent centered, Code demo, Centered demo, Centered marquee - Pricing: https://pro.beui.dev/components/pricing - Type: block - Description: Premium pricing blocks across sharp, interactive, and soft editions: an aurora plan duo, flowing single card, technical command deck, live pricing ledger, upgrade carousel, usage slider, and animated plans grid. - Variants: Aurora duo, Aurora flow, Visual plans, Pricing command deck, Pricing ledger, Upgrade panel, Usage slider, Plans grid - Footer Sections: https://pro.beui.dev/components/footer-sections - Type: block - Description: Premium footer blocks: a link-rich mega footer with a newsletter form and live status, a marketing CTA footer with a drifting wordmark, and a cursor-spotlight wordmark footer. - Variants: Spotlight footer, Mega footer, CTA footer - Feature Sections: https://pro.beui.dev/components/feature-sections - Type: block - Description: Ten premium feature blocks spanning animated showcases, synced lists, staged tabs, connected benefit stories, and distinct theme-aware bento systems for product storytelling. - Variants: Benefits triptych, Signal grid, Control deck, Voice AI, Feature showcase, Feature list, Feature steps, Feature bento, Feature tabs, Feature stage tabs - Content Sections: https://pro.beui.dev/components/content-sections - Type: block - Description: Premium editorial content blocks that pair strong narrative hierarchy with image-led metrics, capabilities, customer journeys, and supporting calls to action. - Variants: Editorial metrics gallery, Capability showcase, Value grid, Engagement sequence - Trust and Security: https://pro.beui.dev/components/trust-security - Type: block - Description: Three trust-building sections covering recognizable compliance proof, calm security safeguards, and a clear uptime and human-support promise. - Variants: Compliance marks, Security safeguards, Reliability and support - Announcement Banners: https://pro.beui.dev/components/announcement-banners - Type: block - Description: Four animated announcement compositions spanning a gradient marquee strip, a cinematic launch moment, a compact rotating ribbon, and a layered multi-update stack. - Variants: Gradient marquee strip, Shader launch modal, Rotating announcement ribbon, Stacked announcement cards - Use Cases: https://pro.beui.dev/components/use-cases - Type: block - Description: Five people-first use-case sections that help visitors recognize their role, picture a better outcome, and understand where the product fits into an ordinary day. - Variants: Animated story collage, Role stories, Outcome stories, Everyday scenario rail, Cinematic shader spotlight - How It Works: https://pro.beui.dev/components/how-it-works - Type: block - Description: Premium process sections that turn an abstract workflow into a clear, animated story with visible steps and purposeful product motion. - Variants: Centered process cards, Cinematic process grid, Editorial story stack, Guided walkthrough, Progressive card deck - Logo Cloud: https://pro.beui.dev/components/logo-cloud - Type: block - Description: Four premium social-proof compositions spanning a seamless marquee, rolling grid, kinetic vertical field, and staggered logo carousel. - Variants: Logo marquee, Logo grid, Kinetic logo columns, Rolling logo carousel - Calendar: https://pro.beui.dev/components/calendar - Type: block - Description: A production calendar workspace with responsive month and week views, searchable event categories, event details, and inline event creation. - Variants: Calendar planner - Sidebar: https://pro.beui.dev/components/sidebar - Type: block - Description: Production workspace compositions built with beUI's compound animated sidebar, including responsive drawers, live navigation search, compact and off-canvas collapse modes, and accessible focus handling. - Variants: Workspace sidebar, Off-canvas sidebar - Data Table: https://pro.beui.dev/components/data-table - Type: component - Description: Three reusable data table components with virtualization, pagination, responsive mobile cards, filtering, tabs, sorting, selection, and customizable columns. - Variants: Responsive data table, Data table, Paginated data table - Data Tables: https://pro.beui.dev/components/data-tables - Type: block - Description: Four high-performance data table blocks with virtualized rows, fast sorting and filtering, and polished theme-native surfaces for orders, people, portfolios, and service operations. - Variants: Orders table, People directory, Portfolio table, SLA monitoring table - Social Proof: https://pro.beui.dev/components/social-proof - Type: block - Description: Three animated social-proof sections spanning evidence-backed benchmarks, customer outcome stories, and an image-led customer gallery. - Variants: Evidence brief, Customer story gallery, Customer story reel - Stats: https://pro.beui.dev/components/stats - Type: block - Description: Premium stat blocks spanning outcome stories, impact reporting, live telemetry, editorial bands, metric cards, and typographic indexes. - Variants: Feature outcomes, Impact dashboard, Telemetry console, Stats band, Stats cards, Outcome index - Testimonials: https://pro.beui.dev/components/testimonials - Type: block - Description: Premium testimonial blocks across editorial and product styles: a vertical dispatch wall, dual-row marquee, rotating spotlight, masonry grid, and pinned archive. - Variants: Marquee wall, Spotlight, Masonry grid, Archive wall, Vertical dispatch - Image Galleries: https://pro.beui.dev/components/image-galleries - Type: block - Description: Three image-first gallery blocks spanning continuous vertical movement, a reshaping editorial mosaic, and an expanding focus rail. - Variants: Vertical image gallery, Morphing mosaic, Expanding focus rail - Navbar: https://pro.beui.dev/components/navbar - Type: block - Description: Four responsive navbar editions: feature-panel and dropdown morphs, a scroll-expanding pill, and a restrained full-width header with an overlay mobile menu. - Variants: Morphing navbar, Feature morph, Expanding pill, Simple header - Newsletter: https://pro.beui.dev/components/newsletter - Type: block - Description: Premium newsletter signup blocks across editorial and product editions, with animated publication previews, stateful forms, and success morphs. - Variants: Editorial dispatch, Inline signup, Newsletter card - Contact: https://pro.beui.dev/components/contact - Type: block - Description: Premium contact blocks from an animated routing desk to stateful split forms and contact-method grids, designed around clear intent and response states. - Variants: Routing desk, Contact split, Contact cards - Integrations: https://pro.beui.dev/components/integrations - Type: block - Description: Four premium integration blocks for browsing, filtering, inspecting, and connecting the tools in a product workflow. - Variants: Integration directory, Editorial integration grid, Integration orbit, Integration ledger - Crypto Wallet: https://pro.beui.dev/components/crypto-wallet - Type: block - Description: Wallet interfaces for portfolio balances, asset details, and transaction activity with integration-ready callbacks. - Variants: Portfolio overview, Asset detail, Transaction activity - File Manager: https://pro.beui.dev/components/file-manager - Type: block - Description: A file workspace with folders, local uploads, previews, search, and grid or list layouts. - Variants: File workspace - Ecommerce: https://pro.beui.dev/components/ecommerce - Type: block - Description: Polished storefront blocks for browsing products, choosing options, and managing a shopping bag. - Variants: Product grid, Product detail, Shopping cart - Comparison: https://pro.beui.dev/components/comparison - Type: block - Description: Premium comparison blocks that turn complex product decisions into clear, confident choices across every screen. - Variants: Bar comparison, Feature comparison, Workflow comparison, Head-to-head comparison, Tiled matrix, Spotlight comparison - Auth: https://pro.beui.dev/components/auth - Type: page - Description: Premium login and signup pages across centered, split, passwordless, and map-led editions with thoughtful motion and complete form states. - Variants: Split showcase, Centered card, Magic code, Atlas centered, Atlas split - Waitlist Pages: https://pro.beui.dev/components/waitlist-pages - Type: page - Description: Soft, product-led waitlist pages with clear conversion flows, launch timing, social proof, and polished preview compositions. - Variants: Early access, Blueprint launch - Agent Builder: https://pro.beui.dev/components/agent-builder - Type: block - Description: A split agent configuration workspace with instructions, model selection, knowledge sources, tool permissions, and an interactive test conversation. - Variants: Agent workspace - Knowledge Base: https://pro.beui.dev/components/knowledge-base - Type: block - Description: Searchable help centers and AI knowledge workspaces for finding answers and managing assistant context. - Variants: AI knowledge workspace, Searchable help center - Settings Pages: https://pro.beui.dev/components/settings-pages - Type: page - Description: Thoughtful settings pages with organization controls, publishing preferences, account and team controls, and polished save flows. - Variants: Organization settings, Workspace settings - Status Pages: https://pro.beui.dev/components/status-pages - Type: page - Description: Operational status pages with service-level uptime history, incident reporting, clear system health, and update subscriptions. - Variants: Status overview, Incident response - Onboarding: https://pro.beui.dev/components/onboarding - Type: page - Description: Premium onboarding flows: a numbered stepper with grouped emoji chip selectors, a split-screen flow with a live-bound form beside an animated preview mock, and a progress-ring row that morphs into a check-off task modal. - Variants: Stepped onboarding, Split screen, Morphing checklist - About: https://pro.beui.dev/components/about - Type: page - Description: Premium about-page templates: a story page with a grainient collage, animated stat band, values, and team grid, and a journey page with an animated milestone timeline, metrics, and leadership. - Variants: Story page, Journey timeline - Careers: https://pro.beui.dev/components/careers - Type: page - Description: Premium careers-page templates: a roles board with a shared-layout department filter and spring-expanding open-role rows composed with the premium stat band, and a culture page with an editorial hero, gapless perks bento, featured-role spotlight, and the premium team marquee and split CTA. - Variants: Roles board, Culture page - Changelog Pages: https://pro.beui.dev/components/changelog-pages - Type: page - Description: Three approachable changelog pages: an editorial journal, a warm consumer feed, and a sidebar-led release archive with a soft gradient backdrop. - Variants: Sidebar updates, Editorial updates, Simple updates - Blog Pages: https://pro.beui.dev/components/blog-pages - Type: page - Description: A complete Geist blog set with softly rounded publication homes plus a calm long-form article page, all built with restrained theme surfaces and practical reading patterns. - Variants: Blog index, Rounded blog index, Article page - 404 Pages: https://pro.beui.dev/components/not-found-pages - Type: page - Description: Nine animated 404-page templates with distinct visual identities and concise recovery actions. - Variants: Falling blocks, Flip panels, Elastic type, Echo stack, Spotlight reveal, Sliced type, Editorial issue, Terminal trace, Wayfinder - AI Agent Landing: https://pro.beui.dev/components/ai-landing - Type: template - Description: An animated launch site for AI agents and autonomous products. - Price: $49 - Crypto Landing: https://pro.beui.dev/components/crypto-landing - Type: template - Description: A polished product site for wallets, exchanges, and web3 apps. - Price: $49 - Mobile Crypto Landing: https://pro.beui.dev/components/mobile-crypto-landing - Type: template - Description: A premium multi-page launch site for mobile wallets and cross-chain crypto apps. - Price: $49 - Devtool Landing: https://pro.beui.dev/components/devtool-landing - Type: template - Description: A motion-rich launch site for developer tools and agent platforms. - Price: $49 - Analytics Landing: https://pro.beui.dev/components/analytics-landing - Type: template - Description: A sharp, data-led product site for modern analytics platforms. - Price: $59 - Pair AI Workspace: https://pro.beui.dev/components/pair-ai-workspace - Type: template - Description: A complete conversational app UI with projects, knowledge, integrations, and settings. - Price: $69 - AI Workspace: https://pro.beui.dev/components/ai-workspace-landing - Type: template - Description: A cinematic product site for AI workspaces and personal assistants. - Price: $69 - Personal Website: https://pro.beui.dev/components/personal-website - Type: template - Description: A short, animated monochrome website for developers and founders. - Price: $39 - Team: https://pro.beui.dev/components/team - Type: block - Description: Premium team blocks: a responsive member grid with hover-reveal socials and lift, and an interactive expanding-panels gallery that grows the focused member to reveal their bio and links. - Variants: Expanding panels, Spotlight, Team grid, Team marquee - FAQ Blocks: https://pro.beui.dev/components/faq-blocks - Type: block - Description: Five complete FAQ blocks spanning immersive AI shader, restrained numbered, asymmetric stacked, sharp split, and searchable help-center editions. - Variants: Numbered FAQ, AI workspace FAQ, Stacked FAQ, Split FAQ, Searchable FAQ - CTA Sections: https://pro.beui.dev/components/cta-sections - Type: block - Description: Premium call-to-action blocks spanning product windows, kinetic posters, portrait proof, layered shade, liquid, terminal, FAQ, and split editions, each with a distinct composition and motion system. - Variants: Product window CTA, Proof orbit CTA, Shade panel CTA, Liquid CTA, Terminal CTA, FAQ CTA, Split CTA, Kinetic poster