Expokit
AboutDocsComponentsChartsBlocksPricing
Sign inGet started
OverviewGlassProGlass ButtonProGlass Nav BarProGlass Search BarProGlass Segmented ControlProGlass SheetProGlass Tab BarProNative bottom tabs (Liquid Glass)
Glass Segmented Control
Sponsor ExpoKit

Free stays free. Tip once — keep shipping.

Support
About
Docs
IntroductionWhat ExpoKit is and how it worksInstallationAdd ExpoKit to an Expo appThemingColours, radius and dark modeCLIinit, add, login and updateAI assistants (MCP)Cursor, Claude, Antigravity and moreRun on your phoneTry components in Expo GoChangelogWhat shipped recently
npx @expokit/cli@latest initQuick start
Components
Liquid Glass8 iOS 26 glass pieces3DNew14 tilt, flip and stack
Inputs 12
  • CalendarNew
  • Date PickerNew
  • Floating Input
  • OTP Input
  • Password Input
  • +7 more
Selection 7
  • Checkbox
  • Chip Group
  • Color SwatchPro
  • Radio Group
  • RatingPro
  • +2 more
Buttons 7
  • Button
  • Floating Action ButtonPro
  • Like ButtonPro
  • Morph ButtonPro
  • Shimmer ButtonPro
  • +2 more
Feedback 5
  • Alert
  • Progress
  • Skeleton
  • Spinner
  • Toast
Overlays 4
  • Action SheetNew
  • Bottom Sheet
  • Dialog
  • DrawerNew
Display 9
  • Accordion
  • Avatar
  • Badge
  • Card
  • CarouselPro
  • +4 more
Navigation 3
  • Bottom NavNew
  • Progress StepsNew
  • Tabs
Motion 2
  • Number TickerPro
  • Text Animation
70 components · 347 live variantsAll components
Charts

Cartesian

  • Area Chart
  • Bar Chart
  • Line Chart
  • Combo Chart

Circular

  • Pie & Donut
  • Radial Chart
  • Radar Chart
  • Polar AreaPro

3D & Pixel

  • Isometric BarsPro
  • Pixel BarsPro

Specialty

  • TreemapPro
  • WaterfallPro
  • BulletPro
  • TimelinePro
  • Gauge
  • Candlestick
  • Heatmap
  • Funnel

Classic

  • Sparkline
  • Progress Rings
  • MultiLine (classic)
  • StackedBar (classic)
  • Ranking Bars (classic)

Guides

  • Usage & config
  • Patterns & effects
  • Show / hide anything
  • Chart theming
  • Interactions
23 charts, built on the open-source expo-charts engineAll charts
Blocks

Screens

ChatProAn AI assistant chat screenCheckoutProA premium checkoutDashboardProA finance / analytics home screenInboxProA messaging inboxOnboardingProA minimal swipeable welcome flowProfileProAccount profile for any appSearch ResultsProA clean, monochrome search screenSettingsProAn iOS-style grouped settings screenSign InProOne configurable sign-in flow modelled on top mobile apps
9 complete screens — drop one in, wire your dataSee them on devices All blocks
Pricing
DocsGlassGlass Segmented Control

Glass Segmented Control

A glass segmented control whose thumb stretches toward the new segment like a drop.

Pro<GlassSegmentedControl />4 variantsiOS · Android · Expo Go
9:41

Sunday 18 October

9:41

Installation#

One command copies the source into your app — you own the code and can change anything.

Usage#

Colours, radius and light / dark come from useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.

Props#

PropTypeDefault
options

Equal-width segments; icon is a node shown before the label.

(string | { value, label, icon? })[]—
value / onChange

Controlled selection (or use defaultValue). Fires on tap and on release after a drag.

string / (value) => void—
defaultValue

Initial selection when uncontrolled.

stringfirst segment
size

32 / 40pt tall.

'sm' | 'md''md'
scheme

Force light or dark glass and ink, e.g. over a photo.

'light' | 'dark'kit theme
accent

Selection colour: fills the thumb; the label switches to black or white to stay readable.

stringglass ink (black / white)
haptics

Selection tick on change and while dragging across segments.

booleantrue
accessibilityLabel

Label for the whole control (tablist; each segment is a tab with selected state).

string—
style

Style for the glass track.

StyleProp<ViewStyle>—

Behaviour & accessibility#

Touch
Tap a segment, or press the thumb and drag it across. It follows your finger and snaps to the nearest segment on release.
Motion
The thumb springs to the new segment, stretching in the direction of travel before it settles. It lifts slightly while you drag it.
Reduced motion
The thumb slides over in a short timing with no stretch, and does not lift when dragged.
Haptics
A selection tick on change and each time a drag crosses into another segment.
Screen readers
The control is a tablist and each segment a tab with its label and selected state.
Platforms
Built on Glass: real Liquid Glass on iOS 26, blurred or frosted glass elsewhere.

Source#

PreviousGlass Search BarNextGlass Sheet

Did you like the content?

9:41

Sunday 18 October

9:41

Pro component Pro

Sign in with a Pro account to try it live, copy the source and install it with the CLI.

Sign in See pricing

The install command is part of ExpoKit Pro Pro

Sign in with a Pro account to try it live, see the source and install it with the CLI.

See pricingSign in

The usage example is part of ExpoKit Pro Pro

Sign in with a Pro account to try it live, see the source and install it with the CLI.

See pricingSign in

The source is part of ExpoKit Pro Pro

Sign in with a Pro account to try it live, see the source and install it with the CLI.

See pricingSign in