# 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/meta-tags. 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)/[code](/tools/category/code)
# Meta tag generator
Write the title, description and image once and get the full head, the Next.js metadata object, and a preview of the card people will actually see.
Title
Description
Tailwind and shadcn helpers, CSS generators, color maths and converters. No signup, everything runs in your browser.
Canonical URLImage URLSite nameTwitter cardsummary\_large\_image
Preview as
XLinkedInSlack
Free developer tools
head.htmlhtml
Free developer tools
metadata.tsts
export const metadata: Metadata = {
title: "Free developer tools",
description: "Tailwind and shadcn helpers, CSS generators, color maths and converters. No signup, everything runs in your browser.",
alternates: { canonical: "https://ui.beste.co/tools" },
openGraph: {
title: "Free developer tools",
description: "Tailwind and shadcn helpers, CSS generators, color maths and converters. No signup, everything runs in your browser.",
url: "https://ui.beste.co/tools",
siteName: "Beste UI",
images: ["https://images.unsplash.com/photo-1780024269547-074e54a2a91a?q=80&w=2070&auto=format&fit=crop"],
},
twitter: {
card: "summary_large_image",
title: "Free developer tools",
description: "Tailwind and shadcn helpers, CSS generators, color maths and converters. No signup, everything runs in your browser.",
images: ["https://images.unsplash.com/photo-1780024269547-074e54a2a91a?q=80&w=2070&auto=format&fit=crop"],
},
};
[Made something you like?Pages that ship with this markup](/pages)
## Questions
How long should a title and description be?+
Around 60 characters for a title and 155 for a description. Past that they are cut off in results, and the sentence you cared about is the half that disappears.
Do I need both og: and twitter: tags?+
Twitter falls back to Open Graph for most fields, so the only one that truly earns its place is twitter:card. The rest are written here because other readers do consult them.
What size should the image be?+
1200 by 630, and served from an absolute URL. A relative path works on your own page and breaks in every crawler.
I fixed the tags and the preview is still wrong. Why?+
Because every platform caches what it scraped. Facebook and LinkedIn both have a post inspector that refetches on demand, and Slack re-reads after a while. Adding a query string to the image URL forces a new fetch when the file changed but the URL did not.
Do I need a different image for every page?+
Not at first. One good image beats a hundred bad ones, and a dynamic route that draws the title onto a template is the usual middle ground. What matters is that the URL is absolute and the file is under about 5MB, or the crawler gives up.
## Related tools
[llms.txt generatorWrite the file that tells a language model what your site is and which pages matter, in the shape the convention asks for.](/tools/llms-txt)[gitignore generatorBuild a .gitignore from the stacks you actually run, with the lines that matter and none of the historical noise.](/tools/gitignore-generator)[HTTP status codesEvery HTTP status code worth knowing, from 200 and 301 to 429 and 503, with a line on when to reach for it rather than a paraphrase of the RFC.](/tools/http-status-codes)
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.