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 noneRequired Parameters:
json_file: Path to the TailwindPlus JSON data filefull_name: The complete dotted path (e.g., "Application UI.Forms.Input Groups.Simple")-f, --framework:html,react, orvue-v, --version:3or4(Tailwind CSS version)-m, --mode: Theme mode
Mode Requirements (CRITICAL):
- Application UI and Marketing components: use
light,dark, orsystem - eCommerce components: use
noneonly
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 classesreact- React/JSX componentsvue- 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