skills.rest
pch007
pch007COMMUNITY
Explore all skills by this author →
GitHub

shadcn

Provide shadcn/ui React components and a server-safe catalog for json-render.

1|Updated Jun 19, 2026
Search Tags:#react#tailwind#shadcn#ui-components#radix-ui#json-render#ui-catalog
One-click install
npx skills add https://github.com/pch007/json-render --skill shadcn-pch007
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/pch007/json-render/tree/main/skills/shadcn
Command: npx skills add https://github.com/pch007/json-render --skill shadcn-pch007

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pre-built shadcn/ui components for json-render streamline UI composition by providing ready-to-use catalog and React implementations, reducing setup time and ensuring design consistency across projects.

Core Features & Use Cases

  • Two entry points: a server-safe catalog (@json-render/shadcn/catalog) and a React component library (@json-render/shadcn), enabling separation of concerns between data-driven prompts and UI rendering.
  • Simple integration pattern: import catalogs to define available components, then register corresponding React components to render at runtime.
  • Rich component catalog spanning layout, navigation, content, and interactive primitives built on Radix UI + Tailwind CSS for rapid, consistent UIs.

Quick Start

Install and import the catalog and components from @json-render/shadcn, then wire the catalog to your registry to start using the predefined UI components.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I use shadcn components with json-render to build React UIs faster?▼

Using json-render to render shadcn components requires importing a server-safe catalog to define available elements, then registering the corresponding React components for runtime rendering. This integration pattern separates data-driven prompts from UI rendering using Radix UI and Tailwind CSS.

What is a server-safe shadcn catalog for json-render?▼

A server-safe shadcn catalog is an importable entry point exposing available UI primitives without requiring client-side React execution. It enables data-driven component composition separately from the React component library that handles runtime rendering.

Can I use Radix UI and Tailwind CSS components in a modular registry?▼

Yes, Radix UI and Tailwind CSS components can populate a modular registry. This Skill exposes a rich catalog spanning layout, navigation, content, and interactive primitives to satisfy modular catalog and registry requirements for React projects.

Does json-render work with existing Tailwind CSS component libraries?▼

json-render integrates with Tailwind CSS component libraries by mapping a server-safe catalog of available components to registered React implementations. You wire predefined shadcn/ui components into your existing registry to achieve consistent UI assembly.

What components are included in the shadcn catalog for React?▼

The shadcn React catalog includes a rich span of layout, navigation, content, and interactive primitives. Built on Radix UI and Tailwind CSS, these ready-to-use elements provide rapid and consistent UI development across projects.

Related Skills

Explore More Software Engineering Skills→
jorgeasaurusjorgeasaurus
12

ckm:ui-styling

Create accessible React interfaces with Radix UI components and Tailwind CSS.

Community
Advanced
pch007pch007
1

react

Convert JSON specs into React component trees with @json-render/react.

Community
Advanced
locnbk2002locnbk2002
1

ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
hasnahasna

shadcn

Integrates reusable UI components into your Tailwind and React projects via the managed screen reader.

Official
Intermediate