---
title: "Glass Pricing Tabs — Framer component · Best of Framer"
description: "$12.00 · Framer component · by ulz song · Navigation. Glass Pricing Tabs puts your plans behind a billing switch: press Monthly or Yearly and every figure counts up to its new number…"
canonical: "https://framer.elliotli.dev/component/glass-pricing-tabs"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Glass Pricing Tabs

# Glass Pricing Tabs

Billing toggle with plan cards

[View on Framer](https://framer.com/marketplace/components/glass-pricing-tabs/?via=elliot-li)

![Glass Pricing Tabs preview image 1](https://framer.elliotli.dev/og/component/glass-pricing-tabs/b6e1780ee9d1f357/1600x1200.jpg)

## Summary

Glass Pricing Tabs puts your plans behind a billing switch: press Monthly or Yearly and every figure counts up to its new number, with a save badge on the term that earns it.

## Description

Glass Pricing Tabs puts your plans behind a billing switch: press Monthly or Yearly and every figure counts up to its new number, with a save badge on the term that earns it.

Each plan sits on a frosted card with a blurred backdrop, a hairline edge and a highlight sheen, and the plan you feature keeps an accent border and a label you write.

The tabs answer the arrow keys and read as a real tab list, the section lands complete on the Framer canvas at the first frame, and reduced motion gets the new figures at once.

Key features

\- \*\*Two or three billing tabs.\*\* Label each term, add a suffix like /mo, and a save badge where it belongs.

\- \*\*Prices that count up.\*\* A tab press rolls every figure to its new number in pure CSS.

\- \*\*Frosted plan cards.\*\* A blurred backdrop, a hairline edge and a highlight sheen, blur set in pixels.

\- \*\*One plan out front.\*\* Mark a plan featured for an accent border and a label you write.

\- \*\*Everything on the card.\*\* Name, description, a price per tab, up to six features and a button with its own link.

\- \*\*Keyboard tabs.\*\* Arrow keys, Home and End move between terms, announced as a real tab list.

\- \*\*Columns you set.\*\* Auto, two, three or four across, and a single column on a phone.

\- \*\*Styled by you.\*\* Five colours, radius, gap, text size, max width, alignment and every label.

What you control

• Tabs as an array: label, price suffix and a save badge for the longer term

• Plans as an array: name, description, a price per tab, features one per line, button label, link and a featured flag

• Columns, card gap, radius, max width, alignment, text size and glass blur

• Five colours, count-up length, the save badge, the featured label and the accessibility labels

One pricing section per page, up to four plans and three billing tabs, with a backdrop glow you can switch off when the section sits on your own gradient.

## Rank history [How rankings work →](/terms#rankings)

-   All · #7409

## Details

- **Author**: ulz song
- **Price**: $12.00
- **Published**: 2026-09-07
- **Updated**: 2026-09-08
- **Added**: 2026-09-07
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation