• Nextbase Starter Kits
Components
    • Button With Border Beam
    • Button With Flip
    • Button With Gooey
    • Button With Liquid
    • Button With Loader
    • Button With Magnetic
    • Button With Morph
    • Button With Particles
    • Button With Pulse
    • Button With Shimmer
    • Button With Shine
    • Button With Slide Text
Blocks
  • Blog Index Five
  • Blog Index Four
  • Blog Index One
  • Blog Index Seven
  • Blog Index Six
  • Blog Index Three
  • Blog Index Two
  • Careers Agency Culture Carousel Five
  • Careers Enterprise Mega Filters Six
  • Careers Fulfillment Planner Four
  • Careers Marketplace Success Eight
  • Careers Nonprofit Story Arc Seven
  • Careers Product Led Hub One
  • Careers Remote Map Three
  • Careers Retail Walkin Ten
  • Careers Story Chapter Journey Two
  • Careers Support Skills Nine
  • Cta Commerce Sticky Progress Bar Three
  • Cta Demo Inline Lead Form Two
  • Cta Persona Segmented Dual Cards Five
  • Cta Product Led Hero Stack One
  • Cta Social Proof Carousel Four
  • Dashboard Header Collaborative Workspace Presence Two
  • Dashboard Header Commerce Analytics Revenue Four
  • Dashboard Header Compliance Healthcare Five
  • Dashboard Header Executive Analytics Summary One
  • Dashboard Header Operations Command Strip Three
  • Data Table Audience Segmentation Card Fallback Ten
  • Data Table Compliance Evidence Review Eight
  • Data Table Customer Health Score Five
  • Data Table Ecommerce Orders Fulfillment Timeline Seven
  • Data Table Enterprise Analytics Benchmark One
  • Data Table Experiment Results Split View Nine
  • Data Table Financial Reconciliation Ledger Four
  • Data Table Inventory Replenishment Three
  • Data Table Issue Tracking Multiview Filters Six
  • Data Table Operations Command Center Two
  • Discord Banner Community Growth One
  • Discord Banner Documentation Support Two
  • Discord Banner Event Spotlight Four
  • Discord Banner Incident Response Three
  • Doc Article Api Deep Dive Language Tabs Two
  • Doc Article Community Inline Feedback Drawer Seven
  • Doc Article Compliance Reference Inline Citations Six
  • Doc Article Guided Tutorial Step Checklist Four
  • Doc Article Knowledge Base Sticky Sidebar One
  • Doc Article Product Adoption Embedded Ctas Eight
  • Doc Article Release Notes Timeline Highlights Three
  • Doc Article Troubleshooting Decision Paths Five
  • Docs Nav Context Aware Support Six
  • Docs Nav Foundational Left Sidebar One
  • Docs Nav Knowledge Base Regionalization Seven
  • Docs Nav Multi Product Favorites Five
  • Docs Nav Role Based Quick Actions Three
  • Docs Nav Versioned Api Sidebar Two
  • Docs Nav Workflow Tutorial Progress Four
  • Empty State Customer Support Knowledge Base Four
  • Empty State Ecommerce Wishlist Curation Three
  • Empty State Guided Workspace Setup One
  • Empty State Story Driven Marketing Campaign Two
  • Empty State Subscription Analytics Progressive Disclosure Five
  • Error Page Brand Story Sixteen
  • Error Page Checkout Recovery Six
  • Error Page Content Discovery Fifteen
  • Error Page Contextual Workspace Eight
  • Error Page Docs Command Search Five
  • Error Page Docs Search First Nine
  • Error Page Ecommerce Discovery Three
  • Error Page Geo Routed Localized Twelve
  • Error Page Guided Conversion Recovery Seven
  • Error Page Incident Aware Status Fourteen
  • Error Page Marketing 404 Hero One
  • Error Page Merchandising Rebound Ten
  • Error Page Mobile App Shell Eleven
  • Error Page Saas Incident Recovery Two
  • Error Page Support Triage Thirteen
  • Error Page Workspace Redirector Four
  • Event List Calendar Rsvp Hybrid Four
  • Event List Community Tiered Highlights Five
  • Event List Conference Agenda Timeline Three
  • Event List Filterable Saas Directory One
  • Event List On Demand Toggle Six
  • Event List Webinar Spotlight Countdown Two
  • Example Gallery Component Playground Two
  • Example Gallery Filterable Case Study One
  • Example Gallery Immersive Media Four
  • Example Gallery Segmented Use Case Three
  • Faq Developer Code Samples Six
  • Faq Hr Timeline Seven
  • Faq Inapp Drawer Eight
  • Faq Marketing Category Rail One
  • Faq Onboarding Video Five
  • Faq Pricing Context Bar Three
  • Faq Returns Visual Stepper Four
  • Faq Saas Command Palette Two
  • Feature Commerce Comparison Upsell Four
  • Feature Guided Workflow Timeline Three
  • Feature Launch Marketing Grid One
  • Feature Persona Switcher Two
  • Feature Testimonial Spotlight Five
  • Feedback Form Exit Intent Dialog Two
  • Feedback Form Inline Sentiment Bar One
  • Feedback Form Persistent Sidebar Three
  • Feedback Form Post Interaction Micro Four
  • Filters Bar Analytics Workspace One
  • Filters Bar Content Library Five
  • Filters Bar Crm Pipeline Three
  • Filters Bar Marketplace Listing Two
  • Filters Bar Support Triage Four
  • Footer Content Publisher Knowledge Four
  • Footer Customer Success Portal Eight
  • Footer Direct To Consumer Ecommerce Mega Six
  • Footer Enterprise Marketplace Procurement Five
  • Footer Enterprise Saas Compliance Hub One
  • Footer Event Marketing Microsite Nine
  • Footer Marketing Landing Page Storytelling Three
  • Footer Premium Lifestyle Brand Story Ten
  • Footer Product Led Growth Saas Conversion Two
  • Footer Subscription Box Retention Seven
  • Form Block Checkout Address Delivery Three
  • Form Block Customer Support Ticket Four
  • Form Block High Intent Lead Capture One
  • Form Block Progressive Saas Onboarding Two
  • Form Block Subscription Upgrade Five
  • Gallery Device Mockup Showcase Five
  • Gallery Ecommerce Carousel Three
  • Gallery Editorial Lightbox Four
  • Gallery Immersive Marketing Mosaic One
  • Gallery Saas Release Timeline Two
  • Hero B2b Resource Eight
  • Hero Ecommerce Product Grid Five
  • Hero Event Countdown Eleven
  • Hero Immersive Video Four
  • Hero Lifestyle Story Six
  • Hero Marketing Product Render One
  • Hero Minimalist Mobile First Twelve
  • Hero Persona Segmented Tabs Seven
  • Hero Pricing Focused Ten
  • Hero Saas Dashboard Metric Chips Two
  • Hero Saas Inline Signup Three
  • Hero Social Proof Nine
  • Hero Video Ai Copilot Demo Seven
  • Hero Video Commerce Try On Carousel Five
  • Hero Video Community Spotlight Mosaic Eight
  • Hero Video Device Frame Feature Reel Three
  • Hero Video Event Highlight Countdown Six
  • Hero Video Immersive Background Loop Two
  • Hero Video Product Walkthrough Pip One
  • Hero Video Scroll Triggered Story Four
  • Integration Detail Compliance First Five
  • Integration Detail Guided Setup Checklist Two
  • Integration Detail Health Dashboard Four
  • Integration Detail Joint Solution Playbook Six
  • Integration Detail Marketplace Profile Three
  • Integration Detail Narrative Proof Pillars One
  • Integration List Category Filtered Grid One
  • Integration List Journey Timeline Three
  • Integration List Partner Marketplace Four
  • Integration List Use Case Tabbed Gallery Two
  • Language Switcher Bottom Sheet Locale Picker Four
  • Language Switcher Command Palette Two
  • Language Switcher Footer Region Select Three
  • Language Switcher Navbar Dropdown One
  • Loading State Bulk Import Processing Ten
  • Loading State Collaborative Kanban Board Eight
  • Loading State Data Rich Saas Dashboard One
  • Loading State Ecommerce Product Grid Three
  • Loading State Guided Profile Setup Nine
  • Loading State Insight Dashboard Chart Six
  • Loading State Knowledge Base Article Sticky Toc Four
  • Loading State Messaging Inbox Thread Seven
  • Loading State Multi Step Checkout Five
  • Loading State Product Marketing Hero Two
  • Logos Continuous Gradient Marquee Two
  • Logos Enterprise Credibility Grid One
  • Logos Enterprise Proof Grid Seven
  • Logos Gradient Dual Marquee Eight
  • Logos Live Partner Ticker Twelve
  • Logos Press Mentions Mosaic Three
  • Logos Press Mosaic Excerpts Nine
  • Logos Real Time Partner Ticker Six
  • Logos Segmented Client Carousel Eleven
  • Logos Segmented Client Carousel Five
  • Logos Trust Metrics Hybrid Board Four
  • Logos Trust Metrics Split Board Ten
  • Maintenance Page Account Maintenance Hub Four
  • Maintenance Page Multi Service Health Three
  • Maintenance Page Rolling Update Five
  • Maintenance Page Scheduled Countdown Two
  • Maintenance Page Transparent Downtime One
  • Modal Dialog Admin Bulk Edit Confirmation Five
  • Modal Dialog Billing Authentication 3ds Six
  • Modal Dialog Marketing Lead Capture Spotlight One
  • Modal Dialog Onboarding Education Coachmark Three
  • Modal Dialog Saas Workflow Approval Two
  • Modal Dialog Transactional Cart Upgrade Four
  • Multi Step Form Compliance Kyc Identity Verification Three
  • Multi Step Form Ecommerce Checkout Wizard With Sticky Summary Two
  • Multi Step Form Educational Course Enrollment Track Selector Four
  • Multi Step Form Internal Workflow Approval Gate Conditional Substeps Five
  • Multi Step Form Saas Onboarding Stepper With Persona Branching One
  • Notifications Panel Focused Inbox Panel Three
  • Notifications Panel Incident Command Side Sheet Two
  • Notifications Panel Mentions Approvals Hub Five
  • Notifications Panel Operations Timeline Feed Four
  • Notifications Panel Priority Snapshot Dropdown One
  • Notifications Panel Product Updates Digest Drawer Six
  • Onboarding Flow Activation Checklist Command Center Two
  • Onboarding Flow Dashboard Aligned Guided Stepper One
  • Onboarding Flow Modal Driven Quickstart Overlay Four
  • Onboarding Flow Progressive Profile Completion Timeline Three
  • Pagination Controls Activity Bottom Bar Five
  • Pagination Controls Ecommerce Progressive Three
  • Pagination Controls Editorial Hybrid One
  • Pagination Controls Funnel Stage Wizard Six
  • Pagination Controls Knowledge Command Palette Four
  • Pagination Controls Saas Sticky Footer Two
  • Press Mentions Category Tabs Three
  • Press Mentions Continuous Marquee Two
  • Press Mentions Editorial Grid One
  • Press Mentions Featured Story Four
  • Press Mentions Metrics Logos Six
  • Press Mentions Newsroom Table Eight
  • Press Mentions Persona Carousel Seven
  • Press Mentions Timeline Ribbon Five
  • Pricing Conversion Focused Saas Tier Grid One
  • Pricing Ecommerce Subscription Matrix Four
  • Pricing Enterprise Solution Bundles Three
  • Pricing Regional Catalog Location Detection Five
  • Pricing Usage Based Configurable Calculator Two
  • Product Card Bundle Comparison Five
  • Product Card Customer Story Six
  • Product Card Integration Marketplace Four
  • Product Card Launch Spotlight One
  • Product Card Mobile App Adoption Eight
  • Product Card Quick Shop Three
  • Product Card Trial Vs Paid Seven
  • Product Card Usage Analytics Two
  • Product Highlight Customer Proof Reel Four
  • Product Highlight Personalized Guided Cta Five
  • Resource Library Ai Recommendation Command Seven
  • Resource Library Customer Success Playbook Five
  • Resource Library High Intent Hero Filters One
  • Resource Library Learning Path Cohort Three
  • Resource Library Partner Enablement Asset Locker Six
  • Resource Library Persona Segmented Saas Vault Two
  • Resource Library Webinar Event Replay Timeline Four
  • Roadmap Preview Customer Impact Milestone Rail Two
  • Roadmap Preview Release Train Timeline One
  • Roadmap Preview Strategic Theme Swimlanes Three
  • Search Results Commerce Faceted Grid Three
  • Search Results High Intent Marketing Grid One
  • Search Results Knowledge Preview Drawer Five
  • Search Results Marketplace Map List Four
  • Search Results Media Compare Gallery Seven
  • Search Results Resilient States Eight
  • Search Results Saas Data Table Two
  • Search Results Workspace Saved Views Six
  • Settings Section Automation Integration Keys Six
  • Settings Section Billing Usage Split Three
  • Settings Section Mobile First Quick Settings Drawer Eight
  • Settings Section Multi Tenant Overview One
  • Settings Section Notification Pipeline Composer Seven
  • Settings Section Personal Preferences Two
  • Settings Section Security Access Control Four
  • Settings Section Team Role Administration Five
  • Sidebar App Shell Commerce Operations Dual Rails Six
  • Sidebar App Shell Developer Platform Nested Navigation Three
  • Sidebar App Shell Multi Workspace Analytics One
  • Sidebar App Shell Product Project Favorited Spaces Five
  • Sidebar App Shell Revenue Operations Quick Actions Two
  • Sidebar App Shell Support Agent Context Drawer Four
  • Stat Card Community Momentum Scoreboard Five
  • Stat Card Conversion Funnel Performance Strip Three
  • Stat Card Customer Sentiment Support Load Cards Seven
  • Stat Card Executive Kpi Snapshot Deck One
  • Stat Card Experiment Campaign Lift Panel Eight
  • Stat Card Incident Response Metrics Rail Six
  • Stat Card Product Growth Pulse Row Two
  • Stat Card Revenue Cash Flow Vital Signs Four
  • Subscription Plan Account Center Summary Sidebar One
  • Subscription Plan Ecommerce Catalog Four
  • Subscription Plan Fintech Compliance Checklist Six
  • Subscription Plan Landing Spotlight Three
  • Subscription Plan Team Seat Management Five
  • Subscription Plan Usage Metered Calculator Two
  • Tab Nav Content Hub Two
  • Tab Nav Dashboard One
  • Tab Nav Knowledge Base Five
  • Tab Nav Pricing Four
  • Tab Nav Settings Three
  • Table Block Marketing One
  • Table Block Marketing Two
  • Table Block Saas One
  • Table Block Saas Two
  • Team Culture Spotlight One
  • Team Directory One
  • Team Map One
  • Team Pods One
  • Team Support Carousel One
  • Team Timeline One
  • Testimonial Wall Ecommerce One
  • Testimonial Wall Marketing One
  • Testimonial Wall Marketing Three
  • Testimonial Wall Marketing Two
  • Testimonial Wall Saas One
  • Testimonial Wall Saas Two
  • Theme Toggle Command Palette Switcher Three
  • Theme Toggle Documentation Floating Toggle Reading Mode Six
  • Theme Toggle Ecommerce Product Preview Stage Lighting Seven
  • Theme Toggle Marketing Navbar High Visibility One
  • Theme Toggle Mobile First Quick Settings Bottom Sheet Eight
  • Theme Toggle Onboarding Personalization Step Five
  • Theme Toggle Preferences Modal Live Preview Four
  • Theme Toggle Workspace Utility Cluster Two
  • Toast Alerts Collaboration Mention Three
  • Toast Alerts Ecommerce Order Confirmation Two
  • Toast Alerts Editorial Publishing Undo Seven
  • Toast Alerts Marketing Promotion Countdown Six
  • Toast Alerts Onboarding Checklist Completion Five
  • Toast Alerts Saas Usage Threshold One
  • Toast Alerts Security Compliance Alert Four
  • Toast Alerts Support Sla Breach Escalation Eight
  • Trust Signals Compliance Trust Grid Security Cta Three
  • Trust Signals Customer Journey Timeline Trust Milestones Seven
  • Trust Signals Kpi Forward Logo Wall One
  • Trust Signals Localized Trust Stack Global Audiences Eight
  • Trust Signals Partner Ecosystem Strip Roi Snapshot Four
  • Trust Signals Proof Stack Customer Story Spotlight Five
  • Trust Signals Security Assurance Sidebar Pricing Flow Six
  • Trust Signals Testimonial Carousel Nps Snapshot Two
  • Tutorial Stepper Compliance Kyc Verification Eight
  • Tutorial Stepper Data Migration Timeline Nine
  • Tutorial Stepper Developer Code Preview Three
  • Tutorial Stepper Ecommerce Product Customizer Four
  • Tutorial Stepper Feature Tour Overlay Seven
  • Tutorial Stepper Integration Setup Wizard Live Summary Two
  • Tutorial Stepper Learning Path Gamification Six
  • Tutorial Stepper Saas Onboarding Checklist One
  • Tutorial Stepper Support Troubleshooting Decision Five
  • Join Discord
Nextbase Starter KitsShowcase
Join Discord

Component examples

Button with Loader

A button with a loader that shows when the button is clicked.

Basic success state transition demonstrating idle → loading → success → idle flow.

Success Flow

Error state transition demonstrating idle → loading → error → idle flow with shake animation.

Error Flow

Loading state with custom text demonstrating spinner with descriptive loading message.

With Loading Text

Using custom icons in config array to customize success and error state icons.

Custom Icons

Complex flow demonstrating multiple loading states before reaching success state.

Multiple States