> ## Documentation Index
> Fetch the complete documentation index at: https://design.slingshotai.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> This site documents Sundial 2.0, the design system of the Ash mobile app (Flutter). For implementing UI: use the Design System pages — color/typography tokens (foundations/*), Flutter theming (theming/*), and component APIs (components/*) — as your reference; every value there mirrors the Dart source in lib/design_system/. The Philosophy pages (philosophy/*) are design rationale written for humans: consult them when making design decisions, not for API lookups. Golden rules: never hardcode colors or text styles — read tokens via context.colorTheme and context.textTheme; prefer the 2.0 semantic names (contentPrimary, surfaceComponent, accentSolid…) over legacy contrast*/surface* getters and over SundialRef primitives; the accent is a single pale lavender solid that takes dark content — never use accent fills as text, icons, or borders (use contentAccent / borderSelected); brand surfaces are mode-invariant and pair with the contentOnBrand* inks; check lib/design_system/components/ before building custom widgets.

# StyledTabBar

> Pill-shaped segmented tab bar with a sliding indicator

A pill-shaped segmented control wrapping Material's `TabBar`: a rounded `surfaceElevated` track with a `surfaceBg` indicator that slides between tabs. Source: [`styled_tab_bar.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/styled_tab_bar.dart).

```dart theme={null}
StyledTabBar(
  tabs: const ['Conversations', 'Insights'],
  selectedIndex: selectedTab,
  onChanged: (index) => setSelectedTab(index),
)
```

## API

| Parameter | Type | Notes |
| - | - | - |
| `tabs` | `List<String>` | **required** — tab labels |
| `selectedIndex` | `int` | **required** — controlled selection |
| `onChanged` | `ValueChanged<int>` | **required** — fires on user taps |

This is a **controlled component**: it doesn't own selection state. Internally (it's a `HookWidget`) a `useTabController` plus two `useEffect`s keep things in sync — one animates the controller when `selectedIndex` changes externally, the other listens to the controller and calls `onChanged` when the user taps (skipping intermediate `indexIsChanging` frames).

## Visual anatomy

* Track: `surfaceElevated`, radius 32, 4 px padding
* Indicator: `surfaceBg`, radius 24, soft black-26 shadow, sized to the tab
* Labels: `buttonMedium` / `contrastBold` for **both** states — selection is communicated by the indicator, not label color
* 40 px tab height; no splash/overlay (selection is the feedback)

## Tokens consumed

`surfaceElevated`, `surfaceBg`, `contrastBold`; typography `buttonMedium`.

> [!NOTE]
>
> One of only two hook-based widgets in the design system (the other is app-level `CarouselListView`) — components stay `StatelessWidget` unless they genuinely need local state. See [Conventions](https://design.slingshotai.com/patterns/conventions.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.