skills.rest
jakubkrzysztofsikora
jakubkrzysztofsikoraCOMMUNITY
Explore all skills by this author →
GitHub

21st-ui

Browse, inspect, and install React UI components from the 21st.dev registry.

1|Updated Feb 25, 2026
Search Tags:#react#tailwind css#svg#ui components#shadcn#logos#21st.dev
One-click install
npx skills add https://github.com/jakubkrzysztofsikora/C4 --skill 21st-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 21st-ui
Source: https://github.com/jakubkrzysztofsikora/C4/tree/main/.claude/skills/21st-ui
Command: npx skills add https://github.com/jakubkrzysztofsikora/C4 --skill 21st-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python3, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of finding, inspecting, and integrating high-quality React UI components and brand logos into your projects, saving significant development and design time.

Core Features & Use Cases

  • Component Discovery: Browse and search a vast registry of shadcn/ui-compatible React components from 21st.dev.
  • Logo Search: Find and download SVG brand logos from SVGL.app for use in your UI.
  • Direct Installation: Use the shadcn-cli to directly install components into your project.
  • Use Case: You're building a new Next.js application and need a visually appealing "bento grid" layout and the logo for "Stripe" to include in your footer. This Skill can find both and provide the exact commands to add them to your project.

Quick Start

Use the 21st-ui skill to find and install the 'bento-grid' component from the 'magicui' author.

Frequently Asked Questions about 21st-ui

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

FAQPage Schema
How do I install React UI components from the 21st.dev registry into my project?▼

The Skill installs React UI components from the 21st.dev registry using the shadcn CLI and Python scripts for API interaction, requiring no external API keys for component discovery and installation.

Can I search for and download SVG brand logos for my Tailwind CSS application?▼

Yes, you can search for and download SVG brand logos via the SVGL API, retrieving vector assets for use in your React and Tailwind CSS application interfaces without needing API keys.

Does this component discovery process require any external API keys?▼

No, the component discovery and SVG logo search process requires no external API keys, utilizing Python scripts to handle registry interaction and SVGL API calls directly.

What is the best way to find shadcn/ui-compatible components for a Next.js application?▼

Browsing the 21st.dev registry through this Skill is the best way to find shadcn/ui-compatible components, allowing you to inspect elements like bento grids before direct installation.

Do I need Python to install 21st.dev components using the shadcn CLI?▼

Yes, Python3 is required as a dependency because the Skill utilizes Python scripts to handle the underlying registry interaction and SVGL API calls for component and logo retrieval.

Related Skills

Explore More Design & Creative Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
Tahasaif3Tahasaif3

shadcn

Provide Radix UI-based components styled with Tailwind CSS for React interfaces.

Community
Intermediate
jubalmjubalm
1

shadcn/ui Customization & Theming

Configure CSS variable-based theming for shadcn/ui components with Tailwind.

Community
Advanced
douincdouinc
1

figma-logos-svgl

Fetch brand SVG logos from SVGL and insert them into Figma designs.

Official
Intermediate