shadcn-ui

Create accessible React UI components for Next.js with Tailwind CSS.

Updated May 6, 2026
One-click install
npx skills add https://github.com/franzosterkamp/card2contact --skill shadcn-ui-franzosterkamp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn-ui
Source: https://github.com/franzosterkamp/card2contact/tree/main/.agents/skills/shadcn-ui
Command: npx skills add https://github.com/franzosterkamp/card2contact --skill shadcn-ui-franzosterkamp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It addresses the need for accessible, customizable, and ready-to-use React UI components consolidated into a single resource.

Core Features & Use Cases

  • Reusable Component Library: Provides a wide range of UI elements such as buttons, modals, forms, and data visualizations.
  • Integration with Next.js & Tailwind: Designed for seamless setup in Next.js projects utilizing Tailwind CSS.
  • Use Case: A developer building an admin dashboard can quickly implement forms, tables, and modals by copying components directly into the project.

Quick Start

Use the shadcn-ui skill to set up a new project with all core components and customization options.

Frequently Asked Questions about shadcn-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible React UI components for a Next.js dashboard?

You can build accessible React UI components for a Next.js dashboard by copying ready-to-use elements like forms, tables, and modals directly into your project. This approach leverages Radix UI primitives for accessibility and Tailwind CSS for styling.

What are accessible React UI components and how do they work with Tailwind CSS?

Accessible React UI components are pre-built interface elements designed for inclusivity, working seamlessly with Tailwind CSS to provide high customization flexibility. They utilize underlying utility libraries and primitives to ensure components are both functional and adaptable.

Can I use these UI components in an existing Next.js and Tailwind CSS project?

Yes, you can use these UI components in an existing Next.js and Tailwind CSS project. They are specifically designed for seamless setup and integration within Next.js frameworks, allowing you to copy components directly into your codebase without friction.

Do I need Radix UI and Tailwind CSS to implement these React components?

Yes, you need Radix UI and Tailwind CSS to implement these React components, as the library depends on these technologies. Radix UI provides the accessible primitives while Tailwind CSS handles the styling and customization.

What is the best way to rapidly develop styled forms and modals for React?

The best way to rapidly develop styled forms and modals for React is by using a reusable component library tailored for Next.js. This allows you to copy customizable, accessible elements directly into your project instead of building them from scratch.

Why do my custom React components lack accessibility support in Next.js?

Custom React components often lack accessibility support in Next.js because they are built without underlying accessible primitives. Utilizing a resource that depends on Radix UI ensures your interface elements meet accessibility standards out of the box.