shadcn

Name: shadcn
Availability: InStock
Author: hasnaxyz

Build shadcn/ui catalogs and React registries for json-render.

Updated Jun 24, 2026

Search Tags:#react #catalog #tailwind #ui components #shadcn #radix ui #json-render

Ready to run

npx skills add https://github.com/hasnaxyz/open-render --skill shadcn-hasnaxyz

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/hasnaxyz/open-render/tree/main/skills/shadcn
Command: npx skills add https://github.com/hasnaxyz/open-render --skill shadcn-hasnaxyz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill lets you add shadcn/ui's standard components to json-render without hand-wiring every schema and implementation, making it easier to build safe, consistent generated UIs.

Core Features & Use Cases

Catalog definitions: Use the server-safe /catalog entry point to register component schemas for prompts and generation.
React implementations: Use the main package to bind those same components to React renderers.
Selective composition: Pick only the UI primitives your app needs instead of exposing everything.
Use case: Build a dashboard, onboarding flow, or form-driven app with shared layouts, inputs, overlays, and feedback states.

Quick Start

Ask me to add the shadcn components you need to a json-render catalog and matching React registry for your app.

Frequently Asked Questions about shadcn

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

FAQPage Schema

How do I use shadcn/ui components with json-render for React UI generation?▼

To use shadcn/ui components with json-render, you register component schemas via a server-safe /catalog entry point and bind them to React renderers through the main package, requiring explicit selection paired with Tailwind styling.

Can I selectively import specific UI primitives instead of the entire shadcn/ui catalog?▼

Yes, you can pick only the UI primitives your app needs instead of exposing everything. This selective composition requires explicit component selection paired with matching catalog and implementation imports for your React application.

How do I build a generated dashboard or form-driven app using Tailwind and React?▼

You build generated dashboards or form-driven apps by registering standard layout, navigation, content, feedback, and input components in a json-render catalog, utilizing built-in form action handling with validation timing for safe UI generation.

Does this approach require hand-wiring component schemas for every generated UI element?▼

No, it eliminates hand-wiring every schema and implementation. The Skill adds shadcn/ui's standard components to json-render automatically, making it easier to build safe, consistent generated UIs without manual schema configuration.

What's the best way to handle form actions and validation timing in generated React UIs?▼

The best way to handle form actions is using the built-in form action handling with validation timing provided by the shadcn/ui and json-render integration, ensuring safe and consistent feedback states for input components in your React application.