DatastarUI

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Basic Tabs
A simple tabs component with account and password sections.
Account
Make changes to your account here. Click save when you're done.
Password
Change your password here. After saving, you'll be logged out.
Interactive Tabs with Datastar
Demonstrates Datastar reactivity within tab content.

Current count

Current settings:

Theme:

Notifications:

Auto-save:

Vertical Tabs
Tabs can also be arranged vertically.

General Settings

Manage your general account settings and preferences.

Security Settings

Configure your security preferences and two-factor authentication.

Integrations

Connect your account with third-party services.

GitHub

Connect your GitHub account

Slack

Get notifications in Slack

Support

Get help and contact our support team.

Documentation

Browse our comprehensive documentation

Contact Support

Get in touch with our support team

Variant System Demo
Demonstrates the shadcn-like variant pattern with base classes and conditional styling using Datastar.

Standard Variant (New York v4 Style)

Overview Content

This tab uses the standard New York v4 variant with base classes from tabsTriggerVariantsBase() and conditional active state classes applied via data-class.

Analytics Content

Notice how the active state styling is applied reactively using Datastar signals.

Reports Content

The variant system separates base styling from state-dependent styling.

Custom Variant (With Additional Classes)

Design Phase

Custom classes are merged with base variant classes. The blue color is added via the Class prop.

Development Phase

Each tab can have its own custom styling while maintaining the base variant behavior.

Deployment Phase

The variant system uses utils.TwMerge() to properly combine classes.

How the Variant System Works

1. Base Classes: Applied via tabsTriggerVariantsBase(props.Class)

2. Conditional Classes: Applied via data-class when tab is active

3. Custom Classes: Merged with base classes using utils.TwMerge()

4. State Management: Datastar signals control active state reactively