# 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/css-to-js. 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)/[converters](/tools/category/converters) # CSS to JS object Convert 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. Shape Objectstyle prop CSScss0 Load sampleClear JavaScriptts The result appears here Copy outputDownload ## Questions What happens to vendor prefixes?+ A leading dash is dropped and the rest is camelCased with a capital first letter, so -webkit-backdrop-filter becomes WebkitBackdropFilter. That is the spelling React and every CSS-in-JS library expect. Are custom properties supported?+ Yes, and they keep their double dash as a quoted key, because --card-shadow is not a valid identifier and camelCasing it would break the variable. Can I paste just declarations?+ Yes. Input with no braces is read as a declaration list, which is what you get from a style attribute or from copying a rule out of dev tools, and you can output it as a ready style prop. ## Related tools [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)[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)[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) 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.