# 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/type-scale. 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)/[design](/tools/category/design)

# Type scale generator

Build 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.

Base size16px

RatioMajor third, 1.25

Steps7

text-4xl48.828px · 3.052rem · 1.25

Ship the interface, keep the code

text-3xl39.063px · 2.441rem · 1.32

Ship the interface, keep the code

text-2xl31.25px · 1.953rem · 1.39

Ship the interface, keep the code

text-xl25px · 1.563rem · 1.46

Ship the interface, keep the code

text-lg20px · 1.25rem · 1.53

Ship the interface, keep the code

text-base16px · 1rem · 1.6

Ship the interface, keep the code

text-sm12.8px · 0.8rem · 1.67

Ship the interface, keep the code

theme.csscss

@theme {
  --text-sm: 0.8rem;
  --text-sm--line-height: 1.67;
  --text-base: 1rem;
  --text-base--line-height: 1.6;
  --text-lg: 1.25rem;
  --text-lg--line-height: 1.53;
  --text-xl: 1.563rem;
  --text-xl--line-height: 1.46;
  --text-2xl: 1.953rem;
  --text-2xl--line-height: 1.39;
  --text-3xl: 2.441rem;
  --text-3xl--line-height: 1.32;
  --text-4xl: 3.052rem;
  --text-4xl--line-height: 1.25;
}

[Made something you like?Blocks set on a scale like this](/blocks)

## Questions

Which ratio should I pick?+

1.2 or 1.25 for an interface, where most sizes sit close together and the headings must not shout. 1.5 and up for editorial pages, where a large heading is the point.

Why does the line height shrink as the size grows?+

Because leading is relative to the size. A heading set at body leading looks unfinished, so each step tightens a little; the scale here does it for you and you can override any of them.

How do I use the output?+

Paste the @theme block into your CSS entry file. Tailwind v4 reads text sizes and their line heights from those variables, so text-2xl picks up both at once.

## Related tools

[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)[Tailwind color scale generatorTurn one hex color into a full 50 to 950 Tailwind scale in OKLCH, with the @theme block and the shadcn tokens ready to paste.](/tools/tailwind-color-scale)[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.

1935 blocks and 989 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.