# Tabs

Tab panels with card, editable, and positioned variants.

Personal Information

Manage your personal information, display name, and avatar. Changes are saved automatically across all your connected devices.

Preferences

Configure application preferences, notification settings, and keyboard shortcuts. These settings apply to your current workspace.

Billing Details

View your current plan, payment history, and update billing information. Your next invoice is scheduled for the first of next month.

```yaml
- id: basic_tabs
  type: Tabs
  properties:
    tabs:
      - key: profile
        title: Profile
      - key: settings
        title: Settings
      - key: billing
        title: Billing
  slots:
    profile:
      blocks:
        - id: basic_profile_title
          type: Title
          properties:
            content: Personal Information
            level: 4
        - id: basic_profile_content
          type: Paragraph
          properties:
            content: Manage your personal information, display name, and avatar. Changes are
              saved automatically across all your connected devices.
    settings:
      blocks:
        - id: basic_settings_title
          type: Title
          properties:
            content: Preferences
            level: 4
        - id: basic_settings_content
          type: Paragraph
          properties:
            content: Configure application preferences, notification settings, and keyboard
              shortcuts. These settings apply to your current workspace.
    billing:
      blocks:
        - id: basic_billing_title
          type: Title
          properties:
            content: Billing Details
            level: 4
        - id: basic_billing_content
          type: Paragraph
          properties:
            content: View your current plan, payment history, and update billing
              information. Your next invoice is scheduled for the first of next
              month.
```

Dashboard overview showing key metrics and recent activity for your project.

Conversion funnel progress for the current quarter.

Generate and download reports for weekly, monthly, and quarterly performance summaries. Select a date range to get started.

Export your data in CSV, JSON, or PDF format. Scheduled exports run daily at midnight UTC.

```yaml
- id: card_tabs
  type: Tabs
  properties:
    tabType: card
    tabs:
      - key: overview
        title: Overview
      - key: analytics
        title: Analytics
      - key: reports
        title: Reports
      - key: exports
        title: Exports
  slots:
    overview:
      blocks:
        - id: card_overview_row
          type: Box
          layout:
            gap: 16
          blocks:
            - id: card_stat_users
              type: Statistic
              layout:
                flex: 1 1 0
              properties:
                title: Active Users
                value: 1284
            - id: card_stat_sessions
              type: Statistic
              layout:
                flex: 1 1 0
              properties:
                title: Sessions Today
                value: 3567
            - id: card_stat_revenue
              type: Statistic
              layout:
                flex: 1 1 0
              properties:
                title: Revenue
                value: 48250
                prefix: $
        - id: card_overview_content
          type: Paragraph
          properties:
            content: Dashboard overview showing key metrics and recent activity for your
              project.
    analytics:
      blocks:
        - id: card_analytics_progress_label
          type: Paragraph
          properties:
            content: Conversion funnel progress for the current quarter.
        - id: card_analytics_progress
          type: Progress
          properties:
            percent: 72
            status: active
    reports:
      blocks:
        - id: card_reports_content
          type: Paragraph
          properties:
            content: Generate and download reports for weekly, monthly, and quarterly
              performance summaries. Select a date range to get started.
    exports:
      blocks:
        - id: card_exports_content
          type: Paragraph
          properties:
            content: Export your data in CSV, JSON, or PDF format. Scheduled exports run
              daily at midnight UTC.
```

**Top (default):**

Tabs positioned at the top are the most common layout, suitable for primary navigation within a section.

This is the second tab in the top-positioned layout.

This is the third tab in the top-positioned layout.

**Bottom:**

You have 12 unread messages. The most recent is from the engineering team regarding deployment schedules.

Your last sent message was a project status update to the stakeholders group.

You have 3 saved drafts including the quarterly review document and team feedback form.

**Start:**

General application settings including workspace name, default language, and timezone configuration.

Two-factor authentication, session management, and login history for your account.

Connect with third-party services like Slack, GitHub, Jira, and Google Workspace.

Manage API keys for programmatic access. Create, revoke, and monitor usage of your tokens.

**End:**

Premium wireless headphones with active noise cancellation, 30-hour battery life, and comfortable over-ear design.

4.7 out of 5 stars based on 2,340 reviews. Customers praise the sound quality and battery life.

Free standard shipping (3-5 business days). Express shipping available for $9.99 (1-2 business days).

```yaml
- id: pos_top_label
  type: Markdown
  properties:
    content: "**Top (default):**"
- id: pos_top_tabs
  type: Tabs
  properties:
    tabPlacement: top
    tabs:
      - key: pos_top_first
        title: First
      - key: pos_top_second
        title: Second
      - key: pos_top_third
        title: Third
  slots:
    pos_top_first:
      blocks:
        - id: pos_top_first_content
          type: Paragraph
          properties:
            content: Tabs positioned at the top are the most common layout, suitable for
              primary navigation within a section.
    pos_top_second:
      blocks:
        - id: pos_top_second_content
          type: Paragraph
          properties:
            content: This is the second tab in the top-positioned layout.
    pos_top_third:
      blocks:
        - id: pos_top_third_content
          type: Paragraph
          properties:
            content: This is the third tab in the top-positioned layout.
- id: pos_bottom_label
  type: Markdown
  properties:
    content: "**Bottom:**"
- id: pos_bottom_tabs
  type: Tabs
  properties:
    tabPlacement: bottom
    tabs:
      - key: pos_bot_inbox
        title: Inbox
      - key: pos_bot_sent
        title: Sent
      - key: pos_bot_drafts
        title: Drafts
  slots:
    pos_bot_inbox:
      blocks:
        - id: pos_bot_inbox_content
          type: Paragraph
          properties:
            content: You have 12 unread messages. The most recent is from the engineering
              team regarding deployment schedules.
    pos_bot_sent:
      blocks:
        - id: pos_bot_sent_content
          type: Paragraph
          properties:
            content: Your last sent message was a project status update to the stakeholders
              group.
    pos_bot_drafts:
      blocks:
        - id: pos_bot_drafts_content
          type: Paragraph
          properties:
            content: You have 3 saved drafts including the quarterly review document and
              team feedback form.
- id: pos_start_label
  type: Markdown
  properties:
    content: "**Start:**"
- id: pos_left_tabs
  type: Tabs
  properties:
    tabPlacement: start
    tabs:
      - key: pos_left_general
        title: General
      - key: pos_left_security
        title: Security
      - key: pos_left_integrations
        title: Integrations
      - key: pos_left_api
        title: API Keys
  slots:
    pos_left_general:
      blocks:
        - id: pos_left_general_content
          type: Paragraph
          properties:
            content: General application settings including workspace name, default
              language, and timezone configuration.
    pos_left_security:
      blocks:
        - id: pos_left_security_content
          type: Paragraph
          properties:
            content: Two-factor authentication, session management, and login history for
              your account.
    pos_left_integrations:
      blocks:
        - id: pos_left_integrations_content
          type: Paragraph
          properties:
            content: Connect with third-party services like Slack, GitHub, Jira, and Google
              Workspace.
    pos_left_api:
      blocks:
        - id: pos_left_api_content
          type: Paragraph
          properties:
            content: Manage API keys for programmatic access. Create, revoke, and monitor
              usage of your tokens.
- id: pos_end_label
  type: Markdown
  properties:
    content: "**End:**"
- id: pos_right_tabs
  type: Tabs
  properties:
    tabPlacement: end
    tabs:
      - key: pos_right_desc
        title: Description
      - key: pos_right_reviews
        title: Reviews
      - key: pos_right_shipping
        title: Shipping
  slots:
    pos_right_desc:
      blocks:
        - id: pos_right_desc_content
          type: Paragraph
          properties:
            content: Premium wireless headphones with active noise cancellation, 30-hour
              battery life, and comfortable over-ear design.
    pos_right_reviews:
      blocks:
        - id: pos_right_reviews_content
          type: Paragraph
          properties:
            content: 4.7 out of 5 stars based on 2,340 reviews. Customers praise the sound
              quality and battery life.
    pos_right_shipping:
      blocks:
        - id: pos_right_shipping_content
          type: Paragraph
          properties:
            content: Free standard shipping (3-5 business days). Express shipping available
              for $9.99 (1-2 business days).
```

Billed every month. Cancel any time.

Billed once a year with two months free.

```yaml
- id: centered_tabs
  type: Tabs
  properties:
    centered: true
    tabBarGutter: 40
    indicator:
      size: 24
      align: center
    tabs:
      - key: centered_monthly
        title: Monthly
      - key: centered_yearly
        title: Yearly
  slots:
    centered_monthly:
      blocks:
        - id: centered_monthly_content
          type: Paragraph
          properties:
            content: Billed every month. Cancel any time.
    centered_yearly:
      blocks:
        - id: centered_yearly_content
          type: Paragraph
          properties:
            content: Billed once a year with two months free.
```

**Small:**

Compact tabs for dense interfaces where screen space is at a premium. Ideal for side panels and secondary navigation.

Technical specifications displayed in a compact view.

Internal notes and comments in small tab format.

**Default:**

Standard-sized tabs for most use cases. Provides a balanced reading experience and comfortable click targets.

Technical specifications displayed in standard tab format.

Internal notes and comments in default tab format.

**Large:**

Large tabs for prominent navigation areas and primary page sections. Gives a spacious, easy-to-read layout.

Technical specifications displayed with large, prominent tab headers.

Internal notes and comments with large tab format for emphasis.

```yaml
- id: size_small_label
  type: Markdown
  properties:
    content: "**Small:**"
- id: size_small_tabs
  type: Tabs
  properties:
    size: small
    tabs:
      - key: sm_details
        title: Details
      - key: sm_specs
        title: Specifications
      - key: sm_notes
        title: Notes
  slots:
    sm_details:
      blocks:
        - id: sm_details_content
          type: Paragraph
          properties:
            content: Compact tabs for dense interfaces where screen space is at a premium.
              Ideal for side panels and secondary navigation.
    sm_specs:
      blocks:
        - id: sm_specs_content
          type: Paragraph
          properties:
            content: Technical specifications displayed in a compact view.
    sm_notes:
      blocks:
        - id: sm_notes_content
          type: Paragraph
          properties:
            content: Internal notes and comments in small tab format.
- id: size_default_label
  type: Markdown
  properties:
    content: "**Default:**"
- id: size_default_tabs
  type: Tabs
  properties:
    size: default
    tabs:
      - key: def_details
        title: Details
      - key: def_specs
        title: Specifications
      - key: def_notes
        title: Notes
  slots:
    def_details:
      blocks:
        - id: def_details_content
          type: Paragraph
          properties:
            content: Standard-sized tabs for most use cases. Provides a balanced reading
              experience and comfortable click targets.
    def_specs:
      blocks:
        - id: def_specs_content
          type: Paragraph
          properties:
            content: Technical specifications displayed in standard tab format.
    def_notes:
      blocks:
        - id: def_notes_content
          type: Paragraph
          properties:
            content: Internal notes and comments in default tab format.
- id: size_large_label
  type: Markdown
  properties:
    content: "**Large:**"
- id: size_large_tabs
  type: Tabs
  properties:
    size: large
    tabs:
      - key: lg_details
        title: Details
      - key: lg_specs
        title: Specifications
      - key: lg_notes
        title: Notes
  slots:
    lg_details:
      blocks:
        - id: lg_details_content
          type: Paragraph
          properties:
            content: Large tabs for prominent navigation areas and primary page sections.
              Gives a spacious, easy-to-read layout.
    lg_specs:
      blocks:
        - id: lg_specs_content
          type: Paragraph
          properties:
            content: Technical specifications displayed with large, prominent tab headers.
    lg_notes:
      blocks:
        - id: lg_notes_content
          type: Paragraph
          properties:
            content: Internal notes and comments with large tab format for emphasis.
```

**Small card:**

Small card tabs are compact and fit well in tight layouts or secondary navigation areas.

Second tab of the small card variant.

Third tab of the small card variant.

**Default card:**

Default card tabs provide a standard raised panel appearance, commonly used for content organization.

Second tab of the default card variant.

Third tab of the default card variant.

**Large card:**

Large card tabs have more padding and larger font, making them ideal for primary dashboard navigation.

Second tab of the large card variant.

Third tab of the large card variant.

```yaml
- id: card_sm_label
  type: Markdown
  properties:
    content: "**Small card:**"
- id: card_small_tabs
  type: Tabs
  properties:
    tabType: card
    size: small
    tabs:
      - key: csm_tab1
        title: Tab 1
      - key: csm_tab2
        title: Tab 2
      - key: csm_tab3
        title: Tab 3
  slots:
    csm_tab1:
      blocks:
        - id: csm_tab1_content
          type: Paragraph
          properties:
            content: Small card tabs are compact and fit well in tight layouts or secondary
              navigation areas.
    csm_tab2:
      blocks:
        - id: csm_tab2_content
          type: Paragraph
          properties:
            content: Second tab of the small card variant.
    csm_tab3:
      blocks:
        - id: csm_tab3_content
          type: Paragraph
          properties:
            content: Third tab of the small card variant.
- id: card_def_label
  type: Markdown
  properties:
    content: "**Default card:**"
- id: card_default_tabs
  type: Tabs
  properties:
    tabType: card
    size: default
    tabs:
      - key: cdf_tab1
        title: Tab 1
      - key: cdf_tab2
        title: Tab 2
      - key: cdf_tab3
        title: Tab 3
  slots:
    cdf_tab1:
      blocks:
        - id: cdf_tab1_content
          type: Paragraph
          properties:
            content: Default card tabs provide a standard raised panel appearance, commonly
              used for content organization.
    cdf_tab2:
      blocks:
        - id: cdf_tab2_content
          type: Paragraph
          properties:
            content: Second tab of the default card variant.
    cdf_tab3:
      blocks:
        - id: cdf_tab3_content
          type: Paragraph
          properties:
            content: Third tab of the default card variant.
- id: card_lg_label
  type: Markdown
  properties:
    content: "**Large card:**"
- id: card_large_tabs
  type: Tabs
  properties:
    tabType: card
    size: large
    tabs:
      - key: clg_tab1
        title: Tab 1
      - key: clg_tab2
        title: Tab 2
      - key: clg_tab3
        title: Tab 3
  slots:
    clg_tab1:
      blocks:
        - id: clg_tab1_content
          type: Paragraph
          properties:
            content: Large card tabs have more padding and larger font, making them ideal
              for primary dashboard navigation.
    clg_tab2:
      blocks:
        - id: clg_tab2_content
          type: Paragraph
          properties:
            content: Second tab of the large card variant.
    clg_tab3:
      blocks:
        - id: clg_tab3_content
          type: Paragraph
          properties:
            content: Third tab of the large card variant.
```

Welcome to the dashboard. Here you can view recent activity, quick statistics, and announcements from your team.

Application configuration, theme settings, and advanced options. Changes take effect immediately.

Monthly target progress at 85%. On track for completion by end of quarter.

```yaml
- id: icon_tabs
  type: Tabs
  properties:
    tabs:
      - key: icon_home
        title: Home
        icon: home
      - key: icon_users
        title: Users
        icon: users
      - key: icon_settings
        title: Settings
        icon: settings
      - key: icon_chart
        title: Analytics
        icon: chart
  slots:
    icon_home:
      blocks:
        - id: icon_home_content
          type: Paragraph
          properties:
            content: Welcome to the dashboard. Here you can view recent activity, quick
              statistics, and announcements from your team.
    icon_users:
      blocks:
        - id: icon_users_desc
          type: Descriptions
          properties:
            bordered: true
            size: small
            items:
              - label: Total Members
                value: "24"
              - label: Active Now
                value: "8"
              - label: Pending Invites
                value: "3"
    icon_settings:
      blocks:
        - id: icon_settings_content
          type: Paragraph
          properties:
            content: Application configuration, theme settings, and advanced options.
              Changes take effect immediately.
    icon_chart:
      blocks:
        - id: icon_chart_progress
          type: Progress
          properties:
            percent: 85
            status: active
        - id: icon_chart_note
          type: Paragraph
          properties:
            content: Monthly target progress at 85%. On track for completion by end of
              quarter.
```

> 3 Deprecation Warnings

```yaml
- id: custom_icon_tabs
  type: Tabs
  properties:
    tabs:
      - key: ci_success
        title: Passed
        icon:
          name: check-circle
          color: "#52c41a"
      - key: ci_warning
        title: Warnings
        icon:
          name: warning
          color: "#faad14"
      - key: ci_error
        title: Failed
        icon:
          name: close-circle
          color: "#ff4d4f"
  slots:
    ci_success:
      blocks:
        - id: ci_success_result
          type: Result
          properties:
            status: success
            title: All Tests Passed
            subTitle: 142 tests completed successfully in 4.2 seconds.
    ci_warning:
      blocks:
        - id: ci_warning_alert
          type: Alert
          properties:
            message: 3 Deprecation Warnings
            description: Some test suites use deprecated assertion methods. Please update to
              the latest API.
            type: warning
            showIcon: true
    ci_error:
      blocks:
        - id: ci_error_result
          type: Result
          properties:
            status: error
            title: 2 Tests Failed
            subTitle: Check the error log below for details on the failing assertions.
```

This tab is accessible and contains normal content. Users can freely navigate to this section.

This content is not yet available. The tab is disabled to indicate an upcoming feature.

> Beta Feature

This section requires an upgraded subscription plan to access.

```yaml
- id: disabled_tabs
  type: Tabs
  properties:
    tabs:
      - key: dis_active
        title: Active
      - key: dis_coming_soon
        title: Coming Soon
        disabled: true
      - key: dis_beta
        title: Beta
      - key: dis_locked
        title: Locked
        disabled: true
  slots:
    dis_active:
      blocks:
        - id: dis_active_content
          type: Paragraph
          properties:
            content: This tab is accessible and contains normal content. Users can freely
              navigate to this section.
    dis_coming_soon:
      blocks:
        - id: dis_coming_soon_content
          type: Paragraph
          properties:
            content: This content is not yet available. The tab is disabled to indicate an
              upcoming feature.
    dis_beta:
      blocks:
        - id: dis_beta_alert
          type: Alert
          properties:
            message: Beta Feature
            description: This feature is currently in beta. Some functionality may be
              incomplete or change without notice.
            type: info
            showIcon: true
    dis_locked:
      blocks:
        - id: dis_locked_content
          type: Paragraph
          properties:
            content: This section requires an upgraded subscription plan to access.
```

This is the first tab. It is not active by default because defaultActiveKey is set to the second tab.

> This tab is active by default

This is the third tab with regular content.

```yaml
- id: default_key_tabs
  type: Tabs
  properties:
    defaultActiveKey: dk_second
    tabs:
      - key: dk_first
        title: First
      - key: dk_second
        title: Second (Default)
      - key: dk_third
        title: Third
  slots:
    dk_first:
      blocks:
        - id: dk_first_content
          type: Paragraph
          properties:
            content: This is the first tab. It is not active by default because
              defaultActiveKey is set to the second tab.
    dk_second:
      blocks:
        - id: dk_second_content
          type: Alert
          properties:
            message: This tab is active by default
            description: The defaultActiveKey property is set to "dk_second", so this tab is
              shown when the component first renders.
            type: success
            showIcon: true
    dk_third:
      blocks:
        - id: dk_third_content
          type: Paragraph
          properties:
            content: This is the third tab with regular content.
```

Browse your uploaded documents. Supported formats include PDF, DOCX, TXT, and Markdown files. Use the Upload button in the tab bar to add new files.

View your image gallery. Supports JPEG, PNG, SVG, and WebP formats up to 10MB each.

Your video library. Supports MP4, WebM, and MOV formats. Maximum file size is 500MB.

```yaml
- id: extra_tabs
  type: Tabs
  properties:
    extraAreaKey: extra_area
    tabs:
      - key: extra_documents
        title: Documents
      - key: extra_images
        title: Images
      - key: extra_videos
        title: Videos
  slots:
    extra_area:
      blocks:
        - id: extra_area_button
          type: Button
          layout:
            flex: 0 0 auto
          properties:
            title: Upload
            icon: upload
            color: primary
            variant: solid
            size: small
    extra_documents:
      blocks:
        - id: extra_documents_content
          type: Paragraph
          properties:
            content: Browse your uploaded documents. Supported formats include PDF, DOCX,
              TXT, and Markdown files. Use the Upload button in the tab bar to
              add new files.
    extra_images:
      blocks:
        - id: extra_images_content
          type: Paragraph
          properties:
            content: View your image gallery. Supports JPEG, PNG, SVG, and WebP formats up
              to 10MB each.
    extra_videos:
      blocks:
        - id: extra_videos_content
          type: Paragraph
          properties:
            content: Your video library. Supports MP4, WebM, and MOV formats. Maximum file
              size is 500MB.
```

Quarterly target progress

> 2 open positions

Recent Activity

10:42 AM - Sarah merged pull request #247 into main branch.

09:15 AM - James deployed v2.4.1 to production environment.

Yesterday - Alex created 3 new issues in the backlog tracker.

```yaml
- id: rich_tabs
  type: Tabs
  properties:
    tabs:
      - key: rich_dashboard
        title: Dashboard
        icon: Gauge
      - key: rich_team
        title: Team
        icon: users
      - key: rich_activity
        title: Activity
        icon: history
  slots:
    rich_dashboard:
      blocks:
        - id: rich_dash_stats
          type: Box
          layout:
            gap: 16
          blocks:
            - id: rich_stat_1
              type: Statistic
              layout:
                flex: 1 1 0
              properties:
                title: Total Revenue
                value: 126560
                prefix: $
                precision: 2
            - id: rich_stat_2
              type: Statistic
              layout:
                flex: 1 1 0
              properties:
                title: Active Users
                value: 8846
            - id: rich_stat_3
              type: Statistic
              layout:
                flex: 1 1 0
              properties:
                title: Completion Rate
                value: 93.2
                suffix: "%"
        - id: rich_dash_divider
          type: Divider
        - id: rich_dash_progress_label
          type: Paragraph
          properties:
            content: Quarterly target progress
        - id: rich_dash_progress
          type: Progress
          properties:
            percent: 78
            status: active
    rich_team:
      blocks:
        - id: rich_team_desc
          type: Descriptions
          properties:
            bordered: true
            column: 2
            items:
              - label: Engineering
                value: 12 members
              - label: Design
                value: 5 members
              - label: Product
                value: 4 members
              - label: QA
                value: 3 members
        - id: rich_team_divider
          type: Divider
        - id: rich_team_note
          type: Alert
          properties:
            message: 2 open positions
            description: Senior Backend Engineer and Product Designer roles are currently
              hiring.
            type: info
            showIcon: true
    rich_activity:
      blocks:
        - id: rich_activity_title
          type: Title
          properties:
            content: Recent Activity
            level: 5
        - id: rich_activity_item_1
          type: Paragraph
          properties:
            content: "10:42 AM - Sarah merged pull request #247 into main branch."
        - id: rich_activity_divider_1
          type: Divider
          properties:
            dashed: true
        - id: rich_activity_item_2
          type: Paragraph
          properties:
            content: 09:15 AM - James deployed v2.4.1 to production environment.
        - id: rich_activity_divider_2
          type: Divider
          properties:
            dashed: true
        - id: rich_activity_item_3
          type: Paragraph
          properties:
            content: Yesterday - Alex created 3 new issues in the backlog tracker.
```

January report - Q1 kickoff with team planning sessions and annual goal setting. Revenue target set at $1.2M.

February report - Sprint planning completed. 3 new team members onboarded. Infrastructure migration started.

March report - Q1 close. Revenue hit 108% of target. Product launch scheduled for April.

April report - Product v2.0 launched successfully. 500 new signups in the first week.

May report - Customer feedback collected and prioritized. Feature roadmap updated for Q3.

June report - Q2 close. Revenue exceeded targets by 15%. Team offsite and retrospective completed.

July report - H2 planning underway. Engineering team focused on performance optimizations.

August report - Beta testing for v3.0 started with 50 partner organizations.

September report - Q3 close. Beta feedback incorporated. Security audit completed with no critical findings.

October report - v3.0 released to general availability. Conference presentation at TechSummit.

November report - Black Friday promotion drove 200% increase in signups. Support team scaled up.

December report - Year-end review. Annual revenue target exceeded by 22%. Holiday code freeze in effect.

```yaml
- id: scroll_tabs
  type: Tabs
  properties:
    tabs:
      - key: scroll_jan
        title: January
      - key: scroll_feb
        title: February
      - key: scroll_mar
        title: March
      - key: scroll_apr
        title: April
      - key: scroll_may
        title: May
      - key: scroll_jun
        title: June
      - key: scroll_jul
        title: July
      - key: scroll_aug
        title: August
      - key: scroll_sep
        title: September
      - key: scroll_oct
        title: October
      - key: scroll_nov
        title: November
      - key: scroll_dec
        title: December
  slots:
    scroll_jan:
      blocks:
        - id: scroll_jan_content
          type: Paragraph
          properties:
            content: January report - Q1 kickoff with team planning sessions and annual goal
              setting. Revenue target set at $1.2M.
    scroll_feb:
      blocks:
        - id: scroll_feb_content
          type: Paragraph
          properties:
            content: February report - Sprint planning completed. 3 new team members
              onboarded. Infrastructure migration started.
    scroll_mar:
      blocks:
        - id: scroll_mar_content
          type: Paragraph
          properties:
            content: March report - Q1 close. Revenue hit 108% of target. Product launch
              scheduled for April.
    scroll_apr:
      blocks:
        - id: scroll_apr_content
          type: Paragraph
          properties:
            content: April report - Product v2.0 launched successfully. 500 new signups in
              the first week.
    scroll_may:
      blocks:
        - id: scroll_may_content
          type: Paragraph
          properties:
            content: May report - Customer feedback collected and prioritized. Feature
              roadmap updated for Q3.
    scroll_jun:
      blocks:
        - id: scroll_jun_content
          type: Paragraph
          properties:
            content: June report - Q2 close. Revenue exceeded targets by 15%. Team offsite
              and retrospective completed.
    scroll_jul:
      blocks:
        - id: scroll_jul_content
          type: Paragraph
          properties:
            content: July report - H2 planning underway. Engineering team focused on
              performance optimizations.
    scroll_aug:
      blocks:
        - id: scroll_aug_content
          type: Paragraph
          properties:
            content: August report - Beta testing for v3.0 started with 50 partner
              organizations.
    scroll_sep:
      blocks:
        - id: scroll_sep_content
          type: Paragraph
          properties:
            content: September report - Q3 close. Beta feedback incorporated. Security audit
              completed with no critical findings.
    scroll_oct:
      blocks:
        - id: scroll_oct_content
          type: Paragraph
          properties:
            content: October report - v3.0 released to general availability. Conference
              presentation at TechSummit.
    scroll_nov:
      blocks:
        - id: scroll_nov_content
          type: Paragraph
          properties:
            content: November report - Black Friday promotion drove 200% increase in
              signups. Support team scaled up.
    scroll_dec:
      blocks:
        - id: scroll_dec_content
          type: Paragraph
          properties:
            content: December report - Year-end review. Annual revenue target exceeded by
              22%. Holiday code freeze in effect.
```

Configure which events trigger notifications. Choose between email, push, or in-app delivery for each category.

Customize your visual preferences including theme mode, accent color, font size, and compact layout options.

> Privacy Settings

```yaml
- id: left_card_tabs
  type: Tabs
  properties:
    tabType: card
    tabPlacement: start
    tabs:
      - key: lc_account
        title: Account
      - key: lc_notifications
        title: Notifications
      - key: lc_appearance
        title: Appearance
      - key: lc_privacy
        title: Privacy
  slots:
    lc_account:
      blocks:
        - id: lc_account_desc
          type: Descriptions
          properties:
            bordered: true
            column: 1
            items:
              - label: Username
                value: johndoe
              - label: Email
                value: john@example.com
              - label: Role
                value: Administrator
              - label: Member Since
                value: March 2024
    lc_notifications:
      blocks:
        - id: lc_notif_content
          type: Paragraph
          properties:
            content: Configure which events trigger notifications. Choose between email,
              push, or in-app delivery for each category.
    lc_appearance:
      blocks:
        - id: lc_appearance_content
          type: Paragraph
          properties:
            content: Customize your visual preferences including theme mode, accent color,
              font size, and compact layout options.
    lc_privacy:
      blocks:
        - id: lc_privacy_alert
          type: Alert
          properties:
            message: Privacy Settings
            description: Your profile is currently set to public. Other workspace members
              can see your name, avatar, and activity status.
            type: warning
            showIcon: true
```

Tab content switches instantly without any transition animation. This can be useful for performance-sensitive interfaces or when animation feels distracting.

The animated property is set to false, disabling both the ink bar animation and the content transition.

Compare this with the other tab examples on this page to see the difference in transition behavior.

```yaml
- id: no_anim_tabs
  type: Tabs
  properties:
    animated: false
    tabs:
      - key: na_tab1
        title: No Animation 1
      - key: na_tab2
        title: No Animation 2
      - key: na_tab3
        title: No Animation 3
  slots:
    na_tab1:
      blocks:
        - id: na_tab1_content
          type: Paragraph
          properties:
            content: Tab content switches instantly without any transition animation. This
              can be useful for performance-sensitive interfaces or when
              animation feels distracting.
    na_tab2:
      blocks:
        - id: na_tab2_content
          type: Paragraph
          properties:
            content: The animated property is set to false, disabling both the ink bar
              animation and the content transition.
    na_tab3:
      blocks:
        - id: na_tab3_content
          type: Paragraph
          properties:
            content: Compare this with the other tab examples on this page to see the
              difference in transition behavior.
```

This example demonstrates CSS customization using the style property. The element has a light gray background with rounded corners, and the tab bar has extra bottom margin.

The tabBar, tabPane, and element CSS keys can be individually targeted. Each accepts standard CSS properties as an object.

Use style.element to control the outer wrapper, style.tabBar for the navigation strip, and style.tabPane for each content panel.

Dark-themed tabs using CSS overrides. Suitable for code editors, terminal views, or developer tool interfaces.

Output panel with matching dark theme. The element and tabBar CSS keys are styled together for a cohesive look.

Log viewer panel. Monospaced fonts and dark backgrounds reduce eye strain during extended debugging sessions.

```yaml
- id: css_tabs
  type: Tabs
  properties:
    tabs:
      - key: css_overview
        title: Overview
      - key: css_details
        title: Details
      - key: css_contact
        title: Contact
  style:
    .element:
      padding: 16px
      borderRadius: 8px
    .tabBar:
      marginBottom: 24px
    .tabPane:
      padding: 12px
  slots:
    css_overview:
      blocks:
        - id: css_overview_content
          type: Paragraph
          properties:
            content: This example demonstrates CSS customization using the style property.
              The element has a light gray background with rounded corners, and
              the tab bar has extra bottom margin.
    css_details:
      blocks:
        - id: css_details_content
          type: Paragraph
          properties:
            content: The tabBar, tabPane, and element CSS keys can be individually targeted.
              Each accepts standard CSS properties as an object.
    css_contact:
      blocks:
        - id: css_contact_content
          type: Paragraph
          properties:
            content: Use style.element to control the outer wrapper, style.tabBar for the
              navigation strip, and style.tabPane for each content panel.
- id: css_dark_tabs
  type: Tabs
  properties:
    tabs:
      - key: cssd_code
        title: Code
      - key: cssd_output
        title: Output
      - key: cssd_logs
        title: Logs
  style:
    .element:
      background: "#1e1e2e"
      padding: 16px
      borderRadius: 8px
      color: "#cdd6f4"
    .tabBar:
      color: "#cdd6f4"
  slots:
    cssd_code:
      blocks:
        - id: cssd_code_content
          type: Paragraph
          properties:
            content: Dark-themed tabs using CSS overrides. Suitable for code editors,
              terminal views, or developer tool interfaces.
          style:
            .element:
              color: "#cdd6f4"
    cssd_output:
      blocks:
        - id: cssd_output_content
          type: Paragraph
          properties:
            content: Output panel with matching dark theme. The element and tabBar CSS keys
              are styled together for a cohesive look.
          style:
            .element:
              color: "#cdd6f4"
    cssd_logs:
      blocks:
        - id: cssd_logs_content
          type: Paragraph
          properties:
            content: Log viewer panel. Monospaced fonts and dark backgrounds reduce eye
              strain during extended debugging sessions.
          style:
            .element:
              color: "#cdd6f4"
              fontFamily: monospace
```

**Custom ink bar and text colors:**

The ink bar and selected tab text are green, overriding the default blue. Use inkBarColor, itemSelectedColor, itemHoverColor, and itemActiveColor tokens.

The garden planner helps you organize plant spacing, sunlight needs, and watering schedules throughout the growing season.

Track your harvest yields by week and compare against previous seasons to optimize your gardening strategy.

**Custom card tab appearance:**

Card tabs with a warm amber background and custom height. The cardBg, cardHeight, cardPadding, and cardGutter tokens control the card-type appearance.

Your saved favorite recipes. Browse your curated collection of breakfast, lunch, and dinner ideas.

Recently viewed recipes from the past 30 days. Quick access to dishes you have been exploring.

**Custom spacing and font size:**

Wider spacing between tabs using horizontalItemGutter token set to 48px (default is 32px). The title font size is increased to 16px with a purple accent color.

Chapter listing with spaced-out tab headers. The increased gutter gives each tab more visual breathing room.

Supplementary materials and reference tables. The larger font size makes the tab labels easier to read at a glance.

**Custom vertical tab tokens:**

Vertical tabs with custom padding and pink accent. The verticalItemPadding and verticalItemMargin tokens control spacing in left/right tab layouts.

Development phase with code reviews, testing, and continuous integration. The pink accent differentiates this tab set from others on the page.

Deployment pipeline configuration. Preview environments, staging, and production release management.

```yaml
- id: theme_custom_colors
  type: Markdown
  properties:
    content: "**Custom ink bar and text colors:**"
- id: theme_color_tabs
  type: Tabs
  properties:
    theme:
      inkBarColor: "#52c41a"
      itemSelectedColor: "#52c41a"
      itemHoverColor: "#73d13d"
      itemActiveColor: "#389e0d"
    tabs:
      - key: tc_plants
        title: Plants
      - key: tc_garden
        title: Garden
      - key: tc_harvest
        title: Harvest
  slots:
    tc_plants:
      blocks:
        - id: tc_plants_content
          type: Paragraph
          properties:
            content: The ink bar and selected tab text are green, overriding the default
              blue. Use inkBarColor, itemSelectedColor, itemHoverColor, and
              itemActiveColor tokens.
    tc_garden:
      blocks:
        - id: tc_garden_content
          type: Paragraph
          properties:
            content: The garden planner helps you organize plant spacing, sunlight needs,
              and watering schedules throughout the growing season.
    tc_harvest:
      blocks:
        - id: tc_harvest_content
          type: Paragraph
          properties:
            content: Track your harvest yields by week and compare against previous seasons
              to optimize your gardening strategy.
- id: theme_card_label
  type: Markdown
  properties:
    content: "**Custom card tab appearance:**"
- id: theme_card_tabs
  type: Tabs
  properties:
    tabType: card
    theme:
      cardHeight: 48
      cardPadding: 12px 24px
      cardGutter: 4
      itemSelectedColor: "#d46b08"
      itemColor: "#874d00"
    tabs:
      - key: tcd_recipes
        title: Recipes
      - key: tcd_favorites
        title: Favorites
      - key: tcd_recent
        title: Recent
  slots:
    tcd_recipes:
      blocks:
        - id: tcd_recipes_content
          type: Paragraph
          properties:
            content: Card tabs with a warm amber background and custom height. The cardBg,
              cardHeight, cardPadding, and cardGutter tokens control the
              card-type appearance.
    tcd_favorites:
      blocks:
        - id: tcd_favorites_content
          type: Paragraph
          properties:
            content: Your saved favorite recipes. Browse your curated collection of
              breakfast, lunch, and dinner ideas.
    tcd_recent:
      blocks:
        - id: tcd_recent_content
          type: Paragraph
          properties:
            content: Recently viewed recipes from the past 30 days. Quick access to dishes
              you have been exploring.
- id: theme_spacing_label
  type: Markdown
  properties:
    content: "**Custom spacing and font size:**"
- id: theme_spacing_tabs
  type: Tabs
  properties:
    theme:
      horizontalItemGutter: 48
      horizontalItemPadding: 16px 0
      titleFontSize: 16
      inkBarColor: "#722ed1"
      itemSelectedColor: "#722ed1"
      itemHoverColor: "#9254de"
    tabs:
      - key: ts_intro
        title: Introduction
      - key: ts_chapters
        title: Chapters
      - key: ts_appendix
        title: Appendix
  slots:
    ts_intro:
      blocks:
        - id: ts_intro_content
          type: Paragraph
          properties:
            content: Wider spacing between tabs using horizontalItemGutter token set to 48px
              (default is 32px). The title font size is increased to 16px with a
              purple accent color.
    ts_chapters:
      blocks:
        - id: ts_chapters_content
          type: Paragraph
          properties:
            content: Chapter listing with spaced-out tab headers. The increased gutter gives
              each tab more visual breathing room.
    ts_appendix:
      blocks:
        - id: ts_appendix_content
          type: Paragraph
          properties:
            content: Supplementary materials and reference tables. The larger font size
              makes the tab labels easier to read at a glance.
- id: theme_vertical_label
  type: Markdown
  properties:
    content: "**Custom vertical tab tokens:**"
- id: theme_vertical_tabs
  type: Tabs
  properties:
    tabPlacement: start
    theme:
      verticalItemPadding: 12px 32px
      verticalItemMargin: 8px 0 0 0
      inkBarColor: "#eb2f96"
      itemSelectedColor: "#eb2f96"
      itemHoverColor: "#f759ab"
      titleFontSize: 15
    tabs:
      - key: tv_design
        title: Design
      - key: tv_develop
        title: Develop
      - key: tv_deploy
        title: Deploy
  slots:
    tv_design:
      blocks:
        - id: tv_design_content
          type: Paragraph
          properties:
            content: Vertical tabs with custom padding and pink accent. The
              verticalItemPadding and verticalItemMargin tokens control spacing
              in left/right tab layouts.
    tv_develop:
      blocks:
        - id: tv_develop_content
          type: Paragraph
          properties:
            content: Development phase with code reviews, testing, and continuous
              integration. The pink accent differentiates this tab set from
              others on the page.
    tv_deploy:
      blocks:
        - id: tv_deploy_content
          type: Paragraph
          properties:
            content: Deployment pipeline configuration. Preview environments, staging, and
              production release management.
```

Tab titles support HTML content. The first tab title uses bold text via the b tag. This is useful for emphasizing key tabs.

The second tab simulates a notification badge using a superscript element with red color. A lightweight alternative to separate badge components.

The third tab uses an inline span with green color to indicate active status directly in the tab title.

```yaml
- id: html_tabs
  type: Tabs
  properties:
    tabs:
      - key: html_bold
        title: <b>Important</b>
      - key: html_badge
        title: 'Messages <sup style="color: #ff4d4f; font-size: 10px;">3</sup>'
      - key: html_colored
        title: '<span style="color: #52c41a;">Active</span>'
  slots:
    html_bold:
      blocks:
        - id: html_bold_content
          type: Paragraph
          properties:
            content: Tab titles support HTML content. The first tab title uses bold text via
              the b tag. This is useful for emphasizing key tabs.
    html_badge:
      blocks:
        - id: html_badge_content
          type: Paragraph
          properties:
            content: The second tab simulates a notification badge using a superscript
              element with red color. A lightweight alternative to separate
              badge components.
    html_colored:
      blocks:
        - id: html_colored_content
          type: Paragraph
          properties:
            content: The third tab uses an inline span with green color to indicate active
              status directly in the tab title.
```

Press Cmd+1 (Mac) or Ctrl+1 (Windows) to jump to this tab.

Press Cmd+2 (Mac) or Ctrl+2 (Windows) to jump to this tab.

Press Cmd+3 (Mac) or Ctrl+3 (Windows) to jump to this tab.

```yaml
- id: shortcut_tabs
  type: Tabs
  properties:
    tabs:
      - key: overview
        title: Overview
        shortcut: mod+1
      - key: details
        title: Details
        shortcut: mod+2
      - key: history
        title: History
        shortcut: mod+3
  events:
    onChange:
      - id: shortcut_tab_msg
        type: DisplayMessage
        params:
          content:
            _string.concat:
              - "Switched to: "
              - _event: activeKey
          status: info
  slots:
    overview:
      blocks:
        - id: shortcut_overview_content
          type: Paragraph
          properties:
            content: Press Cmd+1 (Mac) or Ctrl+1 (Windows) to jump to this tab.
    details:
      blocks:
        - id: shortcut_details_content
          type: Paragraph
          properties:
            content: Press Cmd+2 (Mac) or Ctrl+2 (Windows) to jump to this tab.
    history:
      blocks:
        - id: shortcut_history_content
          type: Paragraph
          properties:
            content: Press Cmd+3 (Mac) or Ctrl+3 (Windows) to jump to this tab.
```

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `animated` | boolean | `true` | Whether to change tabs with animation. Only works while tabPlacement is top or bottom. |
| `centered` | boolean | `false` | Center the tabs in the tab bar. |
| `defaultActiveKey` | string | - | Initial active TabPane's key, if activeKey is not set. |
| `destroyOnHidden` | boolean | `false` | Unmount the content of inactive tabs. Blocks in a hidden tab keep their state values. |
| `indicator` | object | - | Size and alignment of the active tab indicator (ink bar). |
| `indicator.size` | number | - | Length of the indicator in pixels. Defaults to the width of the tab. |
| `indicator.align` | string | `"center"` | Alignment of the indicator along the tab when size is set. Enum: `start`, `center`, `end`. |
| `tabBarGutter` | number | - | Gap between tabs in pixels. |
| `size` | string | `"default"` | Size of the tabs. Enum: `default`, `small`, `large`. |
| `tabPlacement` | string | `"top"` | Position of the tabs. Enum: `top`, `end`, `bottom`, `start`. |
| `tabType` | string | `"line"` | Type of tabs. Enum: `line`, `card`. |
| `tabs` | array | - |  |
| `tabs.$.title` | string | - | Title of the tab - supports html. |
| `tabs.$.key` | string | - | Area key of the tab. |
| `tabs.$.eventName` | string | - | Block-level event name to trigger when this tab becomes active, in addition to onChange. Declare an event with this name under `events:`. The event receives `{ key }` of the now-active tab. |
| `tabs.$.disabled` | boolean | `false` | Disable the tab if true. |
| `tabs.$.icon` | string \| object | - | Icon name (a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`) or properties of an Icon block to customize icon to show in tab title. |
| `tabs.$.icon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
| `tabs.$.icon.color` | string | - | Icon color. |
| `tabs.$.icon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
| `tabs.$.icon.rotate` | number | - | Number of degrees to rotate the icon. |
| `tabs.$.icon.spin` | boolean | - | Continuously spin the icon with animation. |
| `tabs.$.icon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
| `tabs.$.icon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
| `tabs.$.icon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
| `tabs.$.icon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
| `tabs.$.shortcut` | string | - | Keyboard shortcut to switch to this tab. Use "mod" for Cmd/Ctrl. |
| `extraAreaKey` | string | - | Area key for the extra area blocks. |
| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design tabs tokens](https://ant.design/components/tabs#design-token). |
| `theme.cardBg` | string | `"rgba(0, 0, 0, 0.02)"` | Background color of card-type tab. |
| `theme.cardGutter` | number | `2` | Gap between card-type tabs. |
| `theme.cardHeight` | number | `40` | Height of card-type tab. |
| `theme.cardHeightSM` | number | `32` | Height of small card-type tab. |
| `theme.cardHeightLG` | number | `48` | Height of large card-type tab. |
| `theme.cardPadding` | string | `"8px 16px"` | Padding of card-type tab. |
| `theme.cardPaddingLG` | string | `"11px 16px"` | Padding of large card-type tab. |
| `theme.cardPaddingSM` | string | `"4px 8px"` | Padding of small card-type tab. |
| `theme.horizontalItemGutter` | number | `32` | Gap between horizontal tabs. |
| `theme.horizontalItemMargin` | string | - | Horizontal margin of tab item. |
| `theme.horizontalItemPadding` | string | `"12px 0"` | Padding of horizontal tab item. |
| `theme.horizontalItemPaddingLG` | string | `"16px 0"` | Padding of large horizontal tab item. |
| `theme.horizontalItemPaddingSM` | string | `"8px 0"` | Padding of small horizontal tab item. |
| `theme.horizontalMargin` | string | `"0 0 16px 0"` | Margin of horizontal tab bar. |
| `theme.inkBarColor` | string | `"#1677ff"` | Color of the active tab indicator bar. |
| `theme.itemActiveColor` | string | `"#0958d9"` | Text color of active (mousedown) tab. |
| `theme.itemColor` | string | `"rgba(0, 0, 0, 0.88)"` | Text color of tab. |
| `theme.itemHoverColor` | string | `"#4096ff"` | Text color of hovered tab. |
| `theme.itemSelectedColor` | string | `"#1677ff"` | Text color of selected tab. |
| `theme.titleFontSize` | number | `14` | Font size of tab title. |
| `theme.titleFontSizeLG` | number | `16` | Font size of large tab title. |
| `theme.titleFontSizeSM` | number | `14` | Font size of small tab title. |
| `theme.verticalItemMargin` | string | `"16px 0 0 0"` | Margin of vertical tab item. |
| `theme.verticalItemPadding` | string | `"8px 24px"` | Padding of vertical tab item. |
| `theme.zIndexPopup` | number | `1050` | Z-index of tab dropdown popup. |

| Event | Event Data | Description |
| --- | --- | --- |
| `onChange` | `{ activeKey }` | Trigger action on any tab change. |
| `onTabSelect` | `{ key }` | Documentation reference — not a fixed event name. When a tab becomes active, the `eventName` string declared on that `tabs[]` entry is triggered (in addition to onChange). Declare your named events under `events:` (e.g. `onProfileTab`, `onBillingTab`). |

| Key | Target |
| --- | --- |
| `/block` | Outer block wrapper (always available). |
| `/element` | The Tabs element. |
| `/icon` | The icon in the Tabs. |
| `/tabBar` | The Tabs tab bar. |
| `/tabPane` | The Tabs tab pane. |
| `/inkBar` | The Tabs ink bar. |
| `/item` | Each tab in the tab bar. |
| `/popup` | The dropdown that lists tabs that overflow the tab bar. |

Slot keys are user-defined in your config and resolved at build time — not generated at runtime. The block typically pairs slots with an array property (`tabs`, `panels`, `slides`) listed in the Properties table; see the examples above for the expected shape.