Skip to content
SPECIFICTION
Get listed

react-md vs Shadcn Studio Figma UI Kit

react-md

react-md.dev

Shadcn Studio Figma UI Kit

shadcnstudio.com

Side by side

Figurereact-mdShadcn Studio Figma UI Kit
Price fromFreeFree
Free planYesYes
Free trial——
Open source——
WebYesYes
Plans published15
Spec score · UI Kit Libraries7.2 (#22)7.7 (#12)
IntegrationsInstallation instructions show usage with npm, pnpm, and yarn, and reference Next.js for font setup.The Figma kit page identifies Figma, Claude, v0, and Gemini as AI-ready workflow tools.
Productreact-md is an accessible React component library styled with Sass/SCSS.Shadcn Studio offers a Figma UI kit and design system for designing with shadcn/ui components, blocks, and templates.
ThemesThe default theme uses #2196f3 and #ff9100 as its primary and secondary colors.The kit offers 20+ customizable themes with light and dark modes.

Plans

react-md

  • react-mdFree

react-md pricing →

Shadcn Studio Figma UI Kit

  • CommunityFree
  • Basic$99, paid once
  • Pro$199, paid once
  • Team$449, paid once
  • Enterprise$849, paid once

Shadcn Studio Figma UI Kit pricing →

In their own words

react-md

react-md is a free React component library for web interfaces, styled with Sass and SCSS. It provides more than 100 components, over 60 hooks, and 40 utilities, including building blocks for fixed headers, navigation panels, and main content areas. Styles follow Material Design and can be configured during compilation with Sass variables or at runtime with Sass functions and mixins. Customized colors are automatically updated to meet a minimum contrast ratio. More complex widgets follow W3C ARIA authoring practices for screen-reader access and keyboard movement. The default theme uses #2196f3 and #ff9100 as primary and secondary colors, with Roboto as the default font. Icons can come from custom icons, SVG components in @react-md/material-icons, or Material Symbols. Installation requires React and ReactDOM v19 or above, plus @react-md/core and sass. Documentation covers npm, pnpm, yarn, and font setup through Fontsource, Google Fonts CDN, or Next.js.

Visit react-md.dev

Shadcn Studio Figma UI Kit

Shadcn Studio Figma UI Kit is a design system for building interfaces with shadcn/ui components, blocks and templates. Its Figma kit contains 1000+ customizable component variants and 20+ themes with light and dark modes. The maker says one file supports web, tablet and mobile layouts. Figma Slots let users customize sections while retaining their structure, and a drag-and-drop builder assembles pages from prepared sections and themes. A Figma plugin can generate shadcn/ui code, provide CLI commands or open results in v0.dev. Users can import and export Figma variables in OKLCH, HEX, RGB and HSL formats compatible with Tailwind CSS 4 and shadcn/ui themes. The page identifies Figma, Claude, v0 and Gemini as workflow tools. A free Community plan offers limited resources and community support. Paid plans are one-time purchases: Basic costs $99.00, Pro $199.00, Team $449.00 and Enterprise $849.00. Paid access includes lifetime access and monthly additions of components, blocks and templates. The Basic license is for one individual and prohibits sharing access or redistributing resources separately from an end product.

Visit shadcnstudio.com