TailwindPlus Component Browser

This skill provides access to the TailwindPlus UI component library with 657+ professional components.

Setup Required

Before using this skill, you need to specify the location of your TailwindPlus JSON data file. Tell Claude the path to your tailwindplus-components-*.json file and Claude will use it in the commands.

Example: "My TailwindPlus data is at ~/data/tailwindplus-components-2026-01-08.json"

Available Commands

All commands require the JSON data file path as the first argument.

Get Component Info

./info.sh <json_file>

Returns metadata about the TailwindPlus data file.

List All Components

./list_components.sh <json_file>

Returns all component names organized by category.

Search Components

./search_components.sh <json_file> "hero"
./search_components.sh <json_file> "pricing table"

Search for components by keyword (case-insensitive, supports multi-word).

Get Component Code

./get_component.sh <json_file> "Application UI.Forms.Input Groups.Simple" -f html -v 4 -m light
./get_component.sh <json_file> "Ecommerce.Components.Product Overviews.With image gallery and expandable details" -f react -v 4 -m none

Required Parameters:

json_file: Path to the TailwindPlus JSON data file
full_name: The complete dotted path (e.g., "Application UI.Forms.Input Groups.Simple")
-f, --framework: html, react, or vue
-v, --version: 3 or 4 (Tailwind CSS version)
-m, --mode: Theme mode

Mode Requirements (CRITICAL):

Application UI and Marketing components: use light, dark, or system
eCommerce components: use none only

Component Categories

Application UI - Forms, navigation, data display, overlays, layout components
Marketing - Hero sections, features, pricing, testimonials, CTAs, footers
Ecommerce - Product lists, shopping carts, checkout forms, order history

Framework Options

html - Pure HTML with Tailwind CSS classes
react - React/JSX components
vue - Vue.js components

Usage Examples

When user asks for a component:

First search to find available components
Get the exact component code with proper parameters

Example workflow for finding a button component:

# Step 1: Search
./search_components.sh <json_file> "button"
# Step 2: Get the component
./get_component.sh <json_file> "Application UI.Elements.Buttons.Primary" -f react -v 4 -m light