Logo
Neura
Back to Home

Getting Started

Introduction
Installation
Usage
Dark Mode
Theming
Layouts

Components

Atoms

Form Elements

Field
Label
Description
Fieldset
Form
Input
Textarea
Select
Autocomplete
Calendar
Date Picker
Rich Editor
Checkbox
Radio
Switch
OTP
Dropzone
Tags Input

Layout

Container
Grid
Stack
Box
Card
Divider
Spacer

Navigation

Navlist
Link

Feedback

Alert
Callout
Toast
Dialog
Modal
Popover

Content

Text
Heading
Brand
Lottie
Skeleton

Data Display

Table
Chart
Kanban
Image Gallery
Tabs
Accordion
Badge
Avatar

Actions

Button
Command Palette
Composer
Context Menu
Dropdown

Utilities

Theme Switcher
Wizard

Tabs

Tab component for organizing content into separate views that users can switch between

Basic Usage

The most basic tabs component with list, triggers, and content:

Overview

This is the overview content. It provides a general introduction to the topic.

Features

Here are the key features that make this product stand out from the competition.

Pricing

Choose the plan that best fits your needs and budget. 

<neura::tabs defaultTab="overview">
    <neura::tabs.list>
        <neura::tabs.trigger value="overview">Overview</neura::tabs.trigger>
        <neura::tabs.trigger value="features">Features</neura::tabs.trigger>
        <neura::tabs.trigger value="pricing">Pricing</neura::tabs.trigger>
    </neura::tabs.list>

    <neura::tabs.content value="overview">
        Content for overview tab
    </neura::tabs.content>

    <neura::tabs.content value="features">
        Content for features tab
    </neura::tabs.content>

    <neura::tabs.content value="pricing">
        Content for pricing tab
    </neura::tabs.content>
</neura::tabs>

Variants

The tabs component supports two variants: line (default) and pills:

Line Variant (Default)

Content for Tab 1 with line variant.

Content for Tab 2 with line variant.

Content for Tab 3 with line variant.

Pills Variant

Content for Pill 1 with pills variant.

Content for Pill 2 with pills variant.

Content for Pill 3 with pills variant.

<neura::tabs variant="pills">
    <neura::tabs.list variant="pills">
        <neura::tabs.trigger value="tab1" variant="pills">Tab 1</neura::tabs.trigger>
    </neura::tabs.list>
    ...
</neura::tabs>

With Livewire

The tabs component automatically synchronizes state with Livewire via @entangle if an activeTab property exists in the Livewire component:

Overview

Current active tab: None

Settings

Current active tab: None

Profile

Current active tab: None 

<neura::tabs>
    <neura::tabs.list>
        <neura::tabs.trigger value="overview">Overview</neura::tabs.trigger>
    </neura::tabs.list>
    ...
</neura::tabs>

// In your Livewire component:
public $activeTab = null;

With Icons

Add icons to tabs to improve visual understanding:

Welcome home!

Your messages appear here.

Configure your settings here.

<neura::tabs.trigger value="home" class="gap-2">
    <neura::icon name="home" class="size-4" />
    Home
</neura::tabs.trigger>

Rich Content

Tabs can contain rich content with complex components:

Product Overview

This product offers exceptional value with a comprehensive set of features.

Product Details

  • Feature 1: High performance
  • Feature 2: Easy to use
  • Feature 3: Scalable architecture

Customer Reviews

"Excellent product! Highly recommended." - John D.

"Great value for money." - Jane S.

Use Cases

Product Details Page

Product description content.

Product specifications content.

Shipping information content.

Settings Panel

Account settings content.

Notification settings content.

Privacy settings content.

Best Practices

Do

  • Use clear and descriptive labels for tabs
  • Organize content logically by categories
  • Limit the number of tabs (3-5 maximum recommended)
  • Use defaultTab to set the default active tab
  • Add icons to improve navigation

Don't

  • Don't create too many tabs (max 5-7)
  • Don't use overly long labels
  • Don't put too much content in a single tab
  • Don't forget to sync state with Livewire if necessary

Properties

Component Property Type Default Description
tabs variant string 'line' Tab style: 'line' or 'pills'
defaultTab string|null null Default active tab (otherwise the first one)
tabs.list variant string 'line' List style: 'line' or 'pills'
tabs.trigger value string required Unique tab identifier (must match the content)
variant string 'line' Trigger style: 'line' or 'pills'
tabs.content value string required Unique identifier that matches the trigger