# 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 8](/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 diffPaste two Tailwind class strings and see exactly which classes were added, removed and kept, plus which of the old ones cn() would silently override if the new string were merged on top.](/tools/tailwind-class-diff)[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 8](/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)[Fluid type clamp() calculatorPick 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.](/tools/clamp-fluid-type)[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 10](/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)[Markdown table of contents generatorPaste a Markdown document and get a nested table of contents with GitHub-style anchor links, headings inside code fences ignored, and the depth range and list style under your control.](/tools/markdown-toc)[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 9](/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)[Number base converterConvert between binary, octal, decimal, hex and base 36 with exact BigInt arithmetic, a two's complement view at 8 to 64 bits, and prefixes like 0x and 0b understood on input.](/tools/number-base-converter)[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 5](/tools/category/design) [Aspect ratio calculatorTurn any width and height into a reduced ratio, a decimal and the Tailwind class, resize to a new width while keeping the shape, and copy the aspect-ratio rule that reserves the space before the image loads.](/tools/aspect-ratio)[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.