Fluid tabs
A shared selection pill that travels between variable-width labels with an interruptible spring.
Real SwiftUI, captured on an iPhone 17 Pro simulator. Run the native gallery
Installation
Install the native Swift CLI, then add the component to your app.
hugsy add fluid-tabs
Prefer to copy it yourself? Open the complete Swift file and add it to your iOS app target in Xcode. No package dependency is required.
Usage
@State private var tab = "For you"
HugsyFluidTabs(
tabs: ["For you", "Following", "Saved"],
selection: $tab
)
Bind the selected label to your own content state. Duplicate labels are removed while preserving order. If the current selection no longer exists, the component selects the first available label. Keep labels concise and localize them in your app.
API reference
| Parameter | Type & behavior | Default |
|---|---|---|
tabs | [String]Display labels. Duplicates are removed while preserving order. | Required |
selection | Binding<String>Selected label. Invalid selections reset to the first available tab when labels change. | Required |
Interaction
Switch between labels. The selection pill follows your finger and settles into the next tab.
Accessibility
Native buttons announce their selected state and maintain a minimum height of 44 points. Labels can scroll horizontally. Reduce Motion disables selection interpolation.
Test with VoiceOver, Dynamic Type, and Reduce Motion on a physical device before shipping. The gallery demonstrates the interaction, not every application-specific content state.