Orchard Features Connect Pricing
Sign in

Features

Getting started Design Backend
Components Effects
Components
Navigation
Adaptive Tab Bar Elastic Tab Bar

Elastic Tab Bar

Web

A liquid glass tab bar with an elastic active capsule. Your agent can add two to eight tabs with your labels and icons, size the bar for mobile or desktop, and connect each tab to your product's existing views.

Get started

How to use

  1. 1

    Connect Orchard

    Connect Orchard MCP to your coding agent once.

  2. 2

    Ask your agent

    "Add Elastic Tab Bar to this app navigation."

    "Use Home, Search, and Profile, and make this Elastic Tab Bar wider on desktop."

    "Connect this Elastic Tab Bar to the existing views and keep it full size while the page scrolls."

  3. 3

    Done

    Your agent connects each tab to your product's real view state while preserving drag, end resistance, spring, keyboard, focus, responsive, and reduced-motion behavior.

Design pricing

Design is free on every plan and does not count toward metered usage.

© 2026 Orchard
PrivacyTermsContact