MoonUI

Tabs

Free + Pro

A set of layered sections of content—known as tab panels—that are displayed one at a time. Pro version includes dynamic tab management, advanced animations, state persistence, and more.

Unlock Advanced Tabs Features

Get access to powerful pro features that enhance your tabs component with advanced capabilities, premium styling options, and optimized performance.

  • 8 style variants (pills, underline, cards, gradient, glassmorphism, neon)
  • 6 animation modes (fade, slide, scale, flip, morph)
  • Dynamic tab management (add, remove, reorder)

Pro Features

Unlock advanced capabilities with the Pro version

Premium Style Variants

8 distinctive styles including pills, underline, gradient, glassmorphism, and neon

Advanced Animations

6 animation modes for smooth transitions between tab panels

Dynamic Management

Add, remove, reorder tabs with drag & drop support

Smart Features

State persistence, URL sync, lazy loading, and keyboard shortcuts

Installation

Install via CLI

moonui add tabs

Usage

Basic Usage

Pro Required

Content for tab 1

Pro Usage

PRO
Pro Required

Profile content with smooth animations

Examples

Basic Tabs

Simple tabs with content panels

Account

Make changes to your account here. Click save when you're done.

With Icons

Tabs with icons for better visual hierarchy

John Doe

john@example.com

PRO
Pro Examples

Advanced Animations

PRO

Rich animations with multiple variants

Pro Required

Overview

Get started with our platform

Our platform provides everything you need to build modern applications.

50+

Components

100%

Customizable

A11y

Accessible

Dynamic Tabs

PRO

Add, remove, and reorder tabs dynamically

Pro Required

Dashboard

Overview of your application metrics

Content for Dashboard

State Persistence

PRO

URL sync and localStorage persistence

Pro Required
Saved: settings

Settings

Manage your application settings

This tab state is being persisted to localStorage and synced with URL.