# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/tools/clamp-fluid-type. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
[tools](/tools)/[css](/tools/category/css)

# Fluid type clamp() calculator

Pick a size at a small viewport and a size at a wide one and get the clamp() that glides between them, as CSS, a Tailwind arbitrary value or an @theme token, read out at five real widths.

Size at the small endpxSize at the wide endpx

Small viewport320px

Wide viewport1280px

Root font size16px

375px wide16.46px

768px wide19.73px

1024px wide21.87px

1440px wide24px

1920px wide24px

preview at this window

Ship the interface, keep the code

CSSTailwind@theme

fluid.csscss

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);

The middle value mixes rem and vw on purpose. With vw alone the size is pinned to the window, so a reader who zooms in gets exactly what they had before. The rem part is what lets the text follow their setting.

[Made something you like?Hero blocks to set it on](/blocks/hero)

## Questions

Why is there a rem part in the middle value?+

A preferred value written in vw alone is pinned to the window, so a reader who zooms in with the browser gets exactly the size they had before, which fails accessibility audits. Adding the rem intercept lets the value scale with their font setting while still following the viewport.

What viewports should I use?+

The two ends where you stop caring: a small phone at around 320 to 375px and the widest layout you design for, often 1280 or 1440px. Between them the size is a straight line; outside them it is clamped, so wider screens never get comically large type.

Does this work for spacing too?+

Yes. clamp() is a length, so the same expression works for padding, gap or a max-width. Paste the CSS into any property, or drop the @theme token into --spacing-fluid and use it as a utility.

## Related tools

[Type scale generatorBuild a modular type scale from a base size and a ratio, see every step set in the real face, and copy it as Tailwind theme variables.](/tools/type-scale)[px to rem converterConvert between px and rem at any root size, both ways, with the sizes you actually use listed out underneath.](/tools/px-rem-converter)[Device viewport sizesThe viewport of every device you are asked to support, in the CSS pixels a media query actually reads, with the Tailwind breakpoint each one lands in.](/tools/device-sizes)

Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · 

## The tools are free. So is most of the library.

2095 blocks and 1076 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

[Browse the blocksBrowse the blocks](/blocks)

No signup for the tools. MIT for free blocks, commercial licence for Pro.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.