Blocks

Browse all Vritti UI blocks organized by category. Ready-to-use page sections.

Explore our collection of 241+ blocks organized into 18 categories.

Hero Sections

• Hero Centered - A centered hero section with headline, gradient highlight, subtext, and dual CTA buttons.
• Hero Gradient - A hero section with dark gradient background, animated floating orbs, terminal mockup, and CTA buttons.
• Hero Minimal - A minimal hero section with a large heading and a single CTA button.
• Hero Split - A split hero section with text on the left, image placeholder on the right, and stat counters.

Pricing

• Pricing Table Five - A minimal pricing table with horizontal plan layout, billing toggle, and clean feature lists.
• Pricing Table Four - A feature-rich pricing table with plan icons, billing toggle, badge highlights, and feature lists.
• Pricing Table One - A pricing table with monthly/yearly toggle, three-tier plan cards with feature lists and CTA buttons.
• Pricing Table Three - A card-based pricing table with elevated highlighted plan, billing toggle, and optional footer CTA.
• Pricing Table Two - A comparison pricing table with monthly/yearly toggle, plan cards, and feature comparison grid.
• Usage Based Pricing - A usage-based pricing component with slider to select usage tiers and dynamic price calculation.

Authentication

• Auth Forgot Password - A forgot password form with email input and success confirmation state.
• Auth Login - A login form with email/password fields, social login buttons, and forgot password link.
• Auth Register - A registration form with name, email, password with strength indicators, and confirm password.
• Auth Two Factor - A two-factor authentication form with numeric code input, paste support, and resend option.
• Login 01 - Simple login form with email and password
• Login 02 - Login form with social OAuth buttons
• Login 03 - Minimal centered login form
• Login 04 - Login page with side illustration panel
• Login 05 - Login page with background image and card overlay
• Login 06 - Login form with OTP verification
• Login 07 - Two-column login with feature highlights
• Login 08 - Login form with magic link option
• Login 09 - Full-page login with brand sidebar

Testimonials

• Testimonial Avatars - A testimonial section with prominent avatar displays.
• Testimonial Badge - A testimonial section with badges and verification indicators.
• Testimonial Bordered - A testimonial section with bordered card styling.
• Testimonial Cards - A grid of testimonial cards with avatars, quotes, and social links.
• Testimonial Carousel - A dark-themed testimonial carousel with avatars and star ratings.
• Testimonial Centered - A centered testimonial section with a large quote and author details.
• Testimonial Columns - A multi-column testimonial layout with varied card sizes.
• Testimonial Company - A company testimonial section with logo and attribution.
• Testimonial Dark - A dark-themed testimonial section with rating stars.
• Testimonial Featured - A featured testimonial with large quote and author details.
• Testimonial Gradient - A testimonial section with gradient background.
• Testimonial Highlight - A highlighted testimonial with emphasis on key quote.
• Testimonial Masonry - A masonry-style testimonial layout with overlapping cards.
• Testimonial Minimal - A minimal testimonial section with clean styling.
• Testimonial Ratings - A testimonial section with profile images, star ratings, and centered quotes.
• Testimonial Side Image - A testimonial with side image and quote layout.
• Testimonial Simple Grid - A simple testimonial grid with avatar and quote cards.
• Testimonial Slider - A testimonial slider with navigation controls.
• Testimonial Social - A testimonial section with social media integration.
• Testimonial Split - A split-layout testimonial with image and quote sides.
• Testimonial Stats - A testimonial section with star ratings, quotes, and company stats.
• Testimonial Video - A testimonial section with video integration.

Contact

• Contact Form Background - A contact form with background image overlay and card-style form.
• Contact Form Centered - A centered contact form with gradient background and send icon button.
• Contact Form Conversation - A contact section with conversation starters and quick contact form.
• Contact Form Dark - A dark-themed contact form with gradient background and contact details.
• Contact Form Dark Bg - A contact form on a dark background with address and phone information.
• Contact Form Gradient - A contact form with gradient dark background and glassmorphism styling.
• Contact Form Image - A contact form with a side image and contact information details.
• Contact Form Info Grid - A contact section with info cards grid and centered message form.
• Contact Form Map - A contact form with an embedded map and location details.
• Contact Form Minimal - A minimal contact form with clean design and essential fields.
• Contact Form Sidebar - A contact form with sidebar showing address and phone details.
• Contact Form Simple - A simple contact form with name, email, and message fields.
• Contact Form Split Dark - A split contact form with dark sidebar showing contact info and social links.
• Contact Form Two Column - A two-column contact layout with form and contact details side by side.
• Contact Info Cards - A contact information section with icon cards for address, email, and phone.

FAQ

• Faq Accordion - An accordion-style FAQ section with collapsible question panels.
• Faq Cards - A FAQ section with a left-aligned title and card-based question layout.
• Faq Cards Icons - A FAQ section with icon cards in a responsive grid layout.
• Faq Grid - A FAQ section displayed in a responsive grid layout.
• Faq Grid Cta - A FAQ grid section with a call-to-action support card.
• Faq Left Title - A FAQ section with left-aligned title and right-side accordion items.
• Faq List - A FAQ section in a simple list format with accordion items.
• Faq Minimal - A minimal FAQ section with clean accordion styling.
• Faq Simple - A simple FAQ section with question and answer pairs in a clean layout.

Footers

• Footer App Download - A footer with app download buttons and store links.
• Footer Bordered - A footer with bordered sections and clean separation.
• Footer Branded - A branded footer with logo, description, and social media links.
• Footer Centered Links - A centered footer with navigation links and social icons.
• Footer Columns - A footer with multiple link columns and company branding.
• Footer Compact - A compact footer with minimal links and copyright.
• Footer Cta - A footer with call-to-action section and subscription form.
• Footer Dark - A footer with navigation links, email subscription, and dark styling.
• Footer Gradient - A footer with gradient background and modern styling.
• Footer Links - A footer with navigation links, sign-in button, and copyright notice.
• Footer Logo Cloud - A footer with partner logo cloud and navigation.
• Footer Minimal Dark - A minimal dark-themed footer with essential links.
• Footer Multi Column - A multi-column footer with comprehensive navigation links.
• Footer Newsletter - A dark primary-colored footer with language selector, link columns, and newsletter subscription.
• Footer Simple - A simple footer with copyright text and social media icon links.
• Footer Sitemap - A comprehensive sitemap-style footer with organized link sections.
• Footer Social - A footer with newsletter CTA card, navigation links, and social icons.
• Footer Social Grid - A footer with social media grid and contact information.
• Footer Stacked - A stacked footer with centered content blocks.
• Footer With Form - A footer with a newsletter subscription form and link columns.

Blog

• Blog Cards Layout - A blog post grid layout with image cards, tags, and a view more button.
• Blog Cards Simple - Simple blog post cards with images, tags, descriptions, and author avatars.
• Blog Content Cards - Simple blog content cards with images, tags, and author footers.
• Blog Highlighted - A highlighted blog section with featured card and image overlay post cards.
• Blog Highlighted Categories - A highlighted blog section with featured card and category image overlays.
• Blog Large Preview - A large blog post preview with full-width image and author details.
• Blog Post Tags - A blog post grid with tag badges and author attributions.
• Blog Rectangular - A blog grid with rectangular side-by-side image and content layout.

E-Commerce

• Checkout Form - A checkout form with contact, shipping, payment sections, and order summary sidebar.
• Credit Card Display - A credit card display component with dark and light variants.
• Crud Account Settings - A comprehensive account settings form with photo upload, role, and permissions.
• Crud Edit Product - A product editing form with category selection and pricing fields.
• Crud Edit Profile - A staff profile update form with username, email, and password fields.
• Ecommerce Grid - An ecommerce product grid with image cards and promotional banner.
• Ecommerce Product Detail - A product detail page with thumbnail gallery, color selector, and expandable info.
• Ecommerce Video Hero - An ecommerce hero section with YouTube video background and product cards overlay.
• Empty Cart - An empty shopping cart state with illustration and back-to-store button.
• Order Details - An order details page with timeline tracking, shipping info, and order summary.
• Order History - An order history list with status badges and reorder actions.
• Product Description - A product description page with image gallery and detailed specifications.
• Product Description Complex - A detailed product page with image gallery, color/size selectors, and accordion details.
• Product Details Advanced - An advanced product details page with color and size selectors.
• Product Details Minimal - A minimal product details page with clean layout and basic options.
• Product Details Simple - A product details page with image, size selector, color options, and similar items.
• Product Listing Filters - A product listing page with sidebar filters and grid layout.
• Product Overview Dark - A dark-themed product overview with ratings, pricing, tabs, and add-to-cart.
• Product Overview Digital - A digital product overview with version selection, ratings, and purchase options.
• Product Preview Interactive - An interactive product preview overlaid on a room photo with quantity selector.
• Promotional Cards - Promotional product cards with image overlays and call-to-action links.
• Shopping Cart - A shopping cart with product list, quantity selectors, promo code, and order summary.

Billing

• Billing Information - A billing information management section with company cards and edit/delete actions.
• Billing Screen - A comprehensive billing dashboard with plan overview, payment method, and usage summary.
• Billing Settings - A tabbed billing settings component with general notifications, payment methods, invoice preferences, and usage limits.
• Billing Settings Two - An advanced billing settings form with input fields, currency selector, feature toggles, and validation.
• Cancel Subscription Card - A cancellation flow card with plan details, warning section, and two-step confirmation.
• Cancel Subscription Dialog - A dialog-based cancellation flow with plan details, warning section, and two-step confirmation.
• Detailed Usage Table - A detailed usage table showing resource consumption with progress bars and percentage indicators.
• Invoice History - An invoice history table showing past invoices with dates, amounts, and download links.
• Invoice List - An invoice listing section with status badges and download actions.
• Payment Card - A visual credit card display component showing card number, expiry, and cardholder name.
• Payment Details - A payment details form with card information, billing address, and save payment method.
• Payment Details Two - A two-step payment form with card details, card type detection, billing address, and animated transitions.
• Payment Failure - A payment failure notification card with error details and retry options.
• Payment Method - A payment method selection form with credit card and billing address fields.
• Payment Method Selector - Payment Method Selector block.
• Software Purchase - A software purchase checkout form with plan selection and payment details.
• Subscription Management - A subscription management card showing current plan details, billing cycle, and upgrade options.
• Transaction History - A transaction history table with status indicators and date filtering.
• Trial Expiry Card - A trial expiry notification card with countdown, upgrade CTA, and plan comparison.
• Usage Meter - A usage meter component showing resource consumption with progress bars and limits.

Modals

• Command Menu 01 - Command menu dialog with grouped workspace items
• Command Menu 02 - Command menu with keyboard shortcuts and document navigation
• Command Menu 03 - Command menu with documentation search and color palette
• Dialog 01 - Success dialog with centered icon and action button
• Dialog 02 - Success dialog with two-button footer layout
• Dialog 03 - Destructive confirmation dialog with warning icon
• Dialog 04 - Edit profile dialog with input field
• Dialog 05 - Delete workspace alert dialog with password confirmation
• Dialog 06 - Create workspace dialog with privacy toggle
• Dialog 07 - Deactivate 2FA alert dialog with email and password fields
• Dialog 08 - Invite members dialog with member list
• Dialog 09 - Share and collaborate dialog with copy link
• Dialog 10 - Schedule meeting dialog with date and time pickers
• Dialog 11 - Initialize project dialog with multi-step configuration
• Dialog 12 - Add writer dialog with avatar upload and form fields
• Limited Offer Dialog - A limited-time offer dialog with discount badge, feature list, urgency warning, and claim/decline actions.
• Modal Alert - An alert confirmation modal with warning icon and confirmation input.
• Modal Confirmation - A confirmation dialog modal with action buttons.
• Modal Cookie - A cookie consent modal with preference options.
• Modal Delete - A delete confirmation modal with warning state.
• Modal Feedback - A feedback collection modal with rating and text input.
• Modal Form - A modal with an embedded form for data collection.
• Modal Invite - A team invite modal with email input, member list, and permission controls.
• Modal Newsletter - A newsletter subscription modal with email input.
• Modal Notification - A notification modal with icon and message display.
• Modal Pricing - A pricing plan selection modal with tier comparison.
• Modal Profile - An edit profile modal with form fields, technology preferences, and notification settings.
• Modal Settings - A quick settings modal with toggles and preferences.
• Modal Share - A content sharing modal with social media links.
• Modal Success - A success state modal with checkmark animation.

Account

• Account 2fa - A two-factor authentication settings panel with multiple 2FA method options.
• Account Avatar Upload - A profile picture upload panel with avatar preview and availability status toggle.
• Account Basic Info - A personal information form with fields for name, profession, contact, and preferences.
• Account Integrations - A third-party integrations management panel with toggle controls and verification.
• Account Notifications - A notification preferences table with email, push, and SMS toggle switches.
• Account Password - A change password form with requirements checklist and security best practices.
• Account Sessions - An active sessions management panel showing device locations and browser details.

Navigation

• Breadcrumb Animated - An animated breadcrumb navigation with smooth transitions between path segments.
• Command Palette - A keyboard-driven command palette with search, categories, and keyboard navigation.
• Navbar Gradient - A floating gradient navbar with animated hover effects and responsive mobile menu.
• Sidebar Dashboard - A collapsible dashboard sidebar with icon navigation, sections, and active state indicators.
• Tabs Underline - A horizontal tab navigation with a smooth animated underline indicator and tab content panels.

Cards

• Feature Cards Bento - A bento grid layout of feature cards with varying sizes, icons, and gradient accents.
• Notification Cards - A notification feed with different notification types, timestamps, and swipe-to-dismiss.
• Pricing Cards - Tiered pricing cards with highlighted popular plan, feature lists, and animated hover effects.
• Stats Cards - Animated statistics cards with counting animations and trend indicators.
• Team Cards Grid - A responsive team members grid with animated hover effects showing roles and social links.

Gallery

• Gallery Carousel - A full-width image carousel with thumbnail strip navigation and smooth slide transitions.
• Gallery Grid Filter - A filterable grid gallery with category tabs and animated layout transitions.
• Gallery Masonry - A responsive masonry photo gallery with lightbox preview and smooth hover animations.

Features

• Features Alternating - Alternating left-right feature sections with illustrations and scroll-triggered animations.
• Features Icon Grid - A responsive grid of feature items with icons, titles, and descriptions with staggered animations.

Call to Action

• Cta Gradient - A bold gradient call-to-action banner with animated background and dual action buttons.
• Cta Newsletter - A newsletter subscription section with email input, animated submit button, and social proof.

Special

• Ai 01 - AI chat input with expandable textarea and attachment dropdown
• Ai 02 - AI prompt input with model selector and suggestion buttons
• Ai 03 - AI chat input with model, agent, and performance dropdowns
• Ai 04 - AI prompt builder with file attachments and drag-and-drop
• Ai 05 - AI chat conversation with message history and prompt input
• Ai Chat Streaming - An AI chat interface with streaming responses, provider selection, and thinking process display.
• Ai Image Generator - An AI image generator with provider selection, prompt input, and built-in image editor.
• Ai Video Generator - An AI video generation agent with provider selection, progress tracking, and video preview.
• File Upload 01 - File upload card with drag-and-drop and progress tracking
• File Upload 02 - Simple workspace setup form with file input
• File Upload 03 - Cloud storage setup with dropzone file upload
• File Upload 04 - File upload with drag-and-drop and progress bar
• File Upload 05 - Minimal file upload with completed state display
• File Upload 06 - File upload manager with active and completed upload lists
• Form Layout 01 - Notification settings form with radio group
• Form Layout 02 - Personal information form with grid layout
• Form Layout 03 - Settings page with profile and password sections
• Form Layout 04 - Account settings form with avatar upload
• Form Layout 05 - Multi-section settings form with toggles and selects
• Grid List 01 - Integration cards grid with enable toggles
• Grid List 02 - Pricing feature comparison grid
• Grid List 03 - Team member cards grid with roles and actions
• Onboarding 01 - Multi-step onboarding wizard with progress indicator
• Stats 01 - Simple stat card with label and value
• Stats 02 - Stat card with trend indicator
• Stats 03 - Stat card with icon and description
• Stats 04 - Stat card with change percentage badge
• Stats 05 - Stat card with spark line chart
• Stats 06 - Stat cards row with category icons
• Stats 07 - Stat cards with mini bar charts
• Stats 08 - Stat cards with progress bars
• Stats 09 - Compact stat badges row
• Stats 10 - Analytics dashboard with area chart
• Stats 11 - Revenue dashboard with bar chart and metrics
• Stats 12 - Stats grid with donut charts
• Stats 13 - KPI cards with trend arrows
• Stats 14 - Stat cards with circular progress indicators
• Stats 15 - Simple inline stat display
• Table 01 - Data table with sorting and pagination
• Table 02 - Data table with row selection and filters
• Table 03 - Data table with inline editing
• Table 04 - Data table with expandable rows
• Table 05 - Data table with column visibility and search
• Web3 Dashboard - A Web3 dashboard with portfolio overview and transaction history.
• Web3 Nft Gallery - A Web3 NFT gallery with card display and collection details.
• Web3 Staking - A Web3 staking interface with APY display and reward tracking.
• Web3 Token Swap - A Web3 token swap interface with exchange rate display.
• Web3 Wallet - A Web3 wallet connection interface with provider selection.