A Tailwind Plus alternative built on shadcn/ui, with Figma
Looking for a Tailwind Plus alternative for a React project? shadcncraft brings together shadcn/ui components, blocks, and a matching Figma kit.
Explore the blocks or compare plans.
What changed with Tailwind Plus?
On September 9, 2026, Tailwind Labs announced it was joining Shopify and closing new customer signups for its commercial products, including Tailwind Plus: “we’re closing sign ups for new customers”. Existing customers retain access. Tailwind CSS and the team's other open-source projects remain MIT-licensed and maintained by the team with Shopify's support. Read the announcement from Tailwind Labs.
Who should consider shadcncraft?
Choosing a UI kit for a new React or Next.js project? shadcncraft is a fit for teams that want ready-made layouts, editable component code, and a Figma kit that follows the same system.
Designers can start in Figma. Developers can start with the React registry. Teams working in both can choose a combined bundle.
What is shadcncraft?
shadcncraft is a hand-designed Figma kit and React component registry built on shadcn/ui and Tailwind CSS. Paid bundles are a one-time purchase with lifetime updates.
The system supports eight shadcn styles and two component bases: Radix UI and Base UI. Choose a style for the visual treatment and a base for the underlying components. Check each item’s preview for supported options. See the current plan inclusions and base and style workflow.
Start with the free starter kit to explore the Figma structure and a curated set of React components and blocks before buying.
- Start with layouts. Browse blocks for marketing, applications, e-commerce, and AI interfaces.
- Design in Figma. Use a kit structured to match the React components.
- Work with your AI editor. Agent skills and the shadcn MCP workflow help your editor use the registry's components and tokens.
Explore how shadcncraft builds on shadcn/ui, the Figma kit, and agent skills.
How installation works
Follow the registry installation guide to initialize shadcn/ui, configure the @shadcncraft registry in components.json, and set up your license for Pro items. Then install a block into your project:
$ pnpm dlx shadcn@latest add @shadcncraft/header-1
The component files become part of your project. Connect them to your data, adjust the layout, and customize the styling. The registry uses your project’s style configuration when you use the style-aware URL in the installation guide.
Bundles and pricing
Single-seat prices in USD, checked against the live pricing page on September 14, 2026. Each paid bundle includes lifetime updates.
| Bundle | Price | Starting point |
|---|---|---|
| Base Figma | $119 | The official shadcn/ui set in Figma. |
| Pro Figma | $299 | The Figma kit with Pro components, blocks, and pages. |
| Pro React | $249 | Pro React components and blocks from the registry. Figma kit sold separately. |
| Pro Figma + React | $499 | The Figma kit and React registry together. |
See pricing for current inclusions and Team or Enterprise options.
Questions before you choose
Do existing Tailwind Plus customers need to switch?
Existing customers keep access, according to Tailwind Labs' announcement. Evaluate a different system when it fits the needs of your next project.
Is this an automatic migration?
No. Adopting shadcncraft means selecting components and blocks for your project, then integrating them with your application's data and behavior. Start with a representative screen to assess the fit.
Is shadcncraft a subscription?
No. The paid plans are a one-time purchase with lifetime access and updates to the bundle you choose. See the pricing page.
Can I try it before buying?
Yes. The free starter kit includes a Figma kit and a selection of React components and blocks.
Where can I check pricing and what’s included?
The pricing page lists the current plans and inclusions. Review the license for usage terms before choosing a plan.
Try it on your next screen
Pick a block, explore its preview, and follow the registry installation guide to get started. If you work in Figma, explore the matching kit.
