# 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. 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 --- # Free developer tools A growing set of free tools for people who build interfaces: Tailwind and shadcn helpers, CSS generators, color maths, converters and encoders. No signup, no ads, everything runs in your browser. ## Tailwind & shadcn [View all 7](/tools/category/tailwind) [CSS to TailwindTurn CSS declarations into Tailwind v4 utilities, with the spacing scale worked out and arbitrary values where there is no named class.](/tools/css-to-tailwind)[CVA variant builderWrite variants as one line each and get the cva() call, the defaults and the VariantProps type, in the shape shadcn components use.](/tools/cva-builder)[shadcn registry.json builderFill in a form and get a valid registry item and registry.json, with the file types inferred and the rules the shadcn CLI enforces checked as you type.](/tools/shadcn-registry)[Tailwind class merge playgroundSee exactly what cn() keeps and what it throws away when a caller's className meets a component's own classes, with the losing classes listed.](/tools/tailwind-class-merge)[Tailwind class sorterPut a class list back in order: layout first, then the box, then what is inside it, with variants after the base classes they modify.](/tools/tailwind-class-sorter)[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)[Tailwind v3 config to v4Paste a tailwind.config.js and get the v4 CSS it becomes: an @theme block with the right variable namespaces, and a note for every part that needs a decision.](/tools/tailwind-config-migrator) ## CSS generators [View all 7](/tools/category/css) [Border radius generatorSet each corner on its own, read the shorthand as it collapses, and copy it as CSS, a Tailwind arbitrary value or a theme token.](/tools/border-radius)[Box shadow generatorBuild a layered box-shadow the way real interfaces use it, a tight edge under a wide soft lift, then copy it as CSS, a Tailwind class or a theme token.](/tools/box-shadow)[Clip path generatorCut a real photo into a hexagon, circle, chevron or inset, tune the amount, then copy the clip-path as CSS or as a Tailwind arbitrary value.](/tools/clip-path)[CSS filter playgroundStack blur, brightness, contrast, saturation and the rest over a real photograph, and copy the result as filter, as backdrop-filter or as a Tailwind class.](/tools/css-filter)[CSS gradient generatorBuild a linear, radial or conic gradient by dragging its stops, then copy it as plain CSS, as a Tailwind arbitrary value, or as a theme variable.](/tools/css-gradient)[Cubic bezier easing editorDrag the curve, watch it race a linear square, and copy the easing as CSS, as a Tailwind arbitrary value or as a theme token.](/tools/cubic-bezier)[Glassmorphism generatorBuild a frosted panel over a real backdrop: tint, blur, saturation, border and radius, copied as CSS or as a full set of Tailwind utilities.](/tools/glassmorphism) ## Color [View all 6](/tools/category/color) [Color blindness simulatorSee a palette the way readers with protanopia, deuteranopia, tritanopia or achromatopsia see it, and get told which pairs collapse into each other.](/tools/color-blindness)[Color contrast checkerCheck a text and background pair against every WCAG 2 threshold at once, with a live sample in both sizes and the ratio as you adjust the colors.](/tools/contrast-checker)[Color converterPaste a color in any notation and read it back in all of them, including OKLCH, Lab and Display P3, each one a click from your clipboard.](/tools/color-converter)[Color mixerBlend two colors across as many steps as you need, in OKLCH or sRGB, and copy the ramp as color-mix() declarations or as plain hex.](/tools/color-mixer)[Color palette generatorBuild a palette from one color using the classic hue relationships, each hue shown at five lightness steps and exported as @theme variables.](/tools/color-palette)[OKLCH gradient comparisonPut the same two colors through both interpolation spaces side by side, see where sRGB loses its chroma, and copy the gradient that keeps it.](/tools/oklch-gradient) ## Converters & codegen [View all 16](/tools/category/converters) [CSS to JS objectConvert CSS rules or a bare declaration list into JavaScript style objects, camelCased and quoted, ready for a style prop or a CSS-in-JS file.](/tools/css-to-js)[CSV to JSONRead a CSV into JSON records, including quoted fields holding separators or line breaks, with numbers and booleans converted or kept as text.](/tools/csv-to-json)[curl to fetchPaste a curl command and get the fetch or axios call it stands for, with headers, JSON bodies and basic auth carried across.](/tools/curl-to-fetch)[HTML to JSXPaste HTML and get JSX React accepts: class becomes className, inline styles become objects, comments and void elements are handled.](/tools/html-to-jsx)[HTML to MarkdownTurn a page or a fragment into clean Markdown: headings, lists, tables, code blocks and links, with the script tags left behind.](/tools/html-to-markdown)[JSON diffCompare two JSON documents by what they hold rather than how they are written, and get every added, removed and changed path.](/tools/json-diff)[JSON to CSVTurn an array of objects into a spreadsheet-ready CSV, with nested objects flattened into dotted columns and quoting handled by the rules.](/tools/json-to-csv)[JSON to Go structTurn a JSON payload into a Go struct with json tags, gofmt-aligned columns and omitempty where the sample says a field is optional.](/tools/json-to-go)[JSON to Python dataclassGenerate Python dataclasses from a JSON payload, with nested objects lifted into their own classes and snake\_case field names.](/tools/json-to-python)[JSON to TypeScriptPaste a JSON payload and get a TypeScript interface, with optional fields worked out from the records that disagree.](/tools/json-to-typescript)[JSON to YAMLConvert JSON into readable YAML: quotes only where they are needed, block scalars for multi-line strings, and sequences written the way people write them.](/tools/json-to-yaml)[JSON to Zod schemaPaste a JSON payload and get a Zod v4 schema with the inferred TypeScript type, ready for a form resolver or an API route.](/tools/json-to-zod)[Query string to JSONRead a URL's parameters as JSON, or build a query string from an object, with repeated keys handled as the arrays they are.](/tools/query-string)[SVG to JSX componentTurn an SVG into a typed React component that forwards props, with hard-coded fills swapped for currentColor so the icon takes the text color.](/tools/svg-to-jsx)[XML to JSONConvert XML, an RSS feed or an SVG into JSON, with attributes kept as @name and repeated siblings collected into arrays.](/tools/xml-to-json)[YAML to JSONRead a YAML config into JSON: nested maps, sequences, block scalars, inline collections and comments, with the ambiguous parts refused rather than guessed.](/tools/yaml-to-json) ## Text [View all 9](/tools/category/text) [Case converterTurn any text into every case at once, with the words found properly so XMLHttpRequest and user\_id both come out right.](/tools/case-converter)[Find and replaceReplace across a whole block of text, literally or by regular expression, with the capture groups available in the replacement.](/tools/find-replace)[Line toolsSort A to Z, deduplicate, reverse, shuffle, trim or number a list of lines in one pass, then copy the result without opening a spreadsheet.](/tools/line-tools)[Lorem ipsum generatorGenerate placeholder paragraphs, sentences, words or list items, with the classic opening line if you want it.](/tools/lorem-ipsum)[Markdown table generatorPaste rows from a spreadsheet, a CSV or any delimited text and get a padded Markdown table back, with the header and alignment row written for you.](/tools/markdown-table)[Slug generatorTurn titles into URL slugs in bulk, with accents folded to their Latin letters rather than dropped, and an optional length limit that cuts on a word.](/tools/slugify)[Text diffCompare two versions of text or code line by line, see exactly what was added and what was removed, and copy the result as a unified diff patch.](/tools/text-diff)[Unicode inspectorBreak text into characters and read each one's code points, byte length and escapes, with the invisible characters called out.](/tools/unicode-inspector)[Word counterCount words, characters, sentences and paragraphs as you type, with reading and speaking time, and characters counted the way a person counts them.](/tools/word-counter) ## Encoding & security [View all 8](/tools/category/encoding) [Base64 encoder and decoderEncode text to base64 or decode it back, with UTF-8 handled correctly and a URL-safe variant for tokens and query strings.](/tools/base64)[Hash generatorHash any text with MD5, SHA-1, SHA-256, SHA-384 and SHA-512 at once, in hex or base64, computed in your browser.](/tools/hash-generator)[HMAC generatorSign a message with a shared secret and read the HMAC in hex or base64, with the Web Crypto code to verify it on the other side.](/tools/hmac-generator)[HTML entity encoderEscape markup so it renders as text, or decode entities back, with an option to escape every non-ASCII character for older pipelines.](/tools/html-entities)[JWT decoderPaste a JSON Web Token and read its header, payload and expiry. Decoding only, in your browser, with no secret asked for and nothing sent anywhere.](/tools/jwt-decoder)[Password generatorGenerate passwords from your browser's cryptographic random source, with the character sets you choose and the entropy shown as you change them.](/tools/password-generator)[URL encoder and decoderPercent-encode a value or decode one back, choosing between a single query value and a whole URL, with the parts listed out when the input is a URL.](/tools/url-encoder)[UUID generatorGenerate UUID v4, time-sortable UUID v7 or Nano IDs in bulk, from your browser's own cryptographic random source.](/tools/uuid-generator) ## Time [View all 3](/tools/category/time) [Cron expression editorRead a cron expression in a sentence, see the next six times it fires in your own zone, and start from a preset if the fields are the part you never remember.](/tools/cron-expression)[Time zone converterPick a time in one zone and read it in all the others at once, with the offsets shown and daylight saving handled by the browser's own database.](/tools/timezone-converter)[Unix timestamp converterTurn a Unix timestamp into ISO, UTC and your own time zone at once, or paste a date and read the epoch back. Seconds and milliseconds both.](/tools/timestamp-converter) ## Code & project [View all 6](/tools/category/code) [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)[JSON formatter and validatorFormat, validate, sort or minify JSON. Unquoted keys, trailing commas and comments are accepted, so a pasted console log works as well as a strict file.](/tools/json-formatter)[Meta tag generatorWrite 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.](/tools/meta-tags)[Regex testerTest a JavaScript regular expression against real text, see every match highlighted in place, and read the capture groups out one by one.](/tools/regex-tester)[SQL formatterTurn a one-line query into something reviewable: clauses on their own lines, joins indented under them, keywords in capitals.](/tools/sql-formatter) ## Design reference [View all 4](/tools/category/design) [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)[Icon searchSearch Lucide and Hugeicons by name, preview every match at the size you will ship it at, and copy the import and the JSX tag each set expects.](/tools/icon-search)[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)[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) ## AI [View all 1](/tools/category/ai) [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) ## 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.