shadcn-tailwindBuild UIs with Tailwind CSS v4 and shadcn/ui. Covers CSS variables with OKLCH colors, component variants with CVA, responsive design, dark mode, and Tailwind...
Install via ClawdBot CLI:
clawdbot install tenequm/shadcn-tailwindGrade Limited — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://www.apache.org/licenses/Audited Apr 17, 2026 · audit v1.0
Generated May 5, 2026
Build a responsive, data-rich dashboard for internal analytics using shadcn/ui components and Tailwind v4 utility classes. Leverage semantic color tokens for dark mode support and container queries for adaptive layouts.
Develop a dynamic product listing page with variant buttons, responsive grid layouts, and accessible form controls. Use CSS variables to manage theme colors and ensure fast animations via targeted transitions.
Create a modern landing page with dark/light mode toggle, responsive typography, and interactive components like modals and toggles. Utilize CVA for consistent button variants across CTAs.
Implement a secure, accessible patient dashboard with form inputs and data tables. Enforce color contrast using OKLCH-based semantic tokens and respect user reduced-motion preferences.
Build a reusable component library with Radix UI primitives, shadcn/ui styling patterns, and CSS-first configuration. Use @theme inline for dynamic theming and document variants via CVA.
Offer the shadcn/ui patterns and Tailwind config as open source, while selling premium component sets, full-page templates, or custom theme packages for subscription or one-time fees.
Provide UI/UX consulting services to businesses that want to adopt shadcn/tailwind for their products, including migration from v3, theme setup, and component customization.
Host a marketplace where developers sell proprietary shadcn/ui-compatible components, with a revenue share model. Offer a free tier for basic components and subscription for premium collections.
💬 Integration Tip
When integrating shadcn-tailwind into an existing project, migrate any tailwind.config.js to CSS-first @theme directives and replace old plugins with @plugin imports to ensure compatibility with Tailwind v4.
Scored Apr 19, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.