Shadcn Schema Extractor

A CLI tool that extracts JSON schemas from shadcn/ui component props interfaces.

Installation

npm install -g shadcn-schema-extractor

Or use directly with npx:

npx shadcn-schema-extractor extract -c button

Usage

Extract Schema from Component

# Extract button component schema
shadcn-schema extract -c button

# Save schema to file
shadcn-schema extract -c button -o button-schema.json

# Keep temporary files for debugging
shadcn-schema extract -c button --no-cleanup

# Use custom temporary directory
shadcn-schema extract -c button --temp-dir ./temp

List Available Components

shadcn-schema list-components

Specifying Component Path and Props Name

You can specify the direct path to the component file and customize the props name:

# Specify the file path and custom props name
shadcn-schema extract -c button -f ./src/components/ui/button.tsx -p CustomButtonProps

This makes the process more flexible when you need to work with specific file paths or custom props names.

Options

• -c, --component <name>: Component name to extract schema from (required)
• -o, --output <path>: Output file path for the schema (optional)
• --no-cleanup: Keep temporary files after extraction (optional)
• --temp-dir <path>: Custom temporary directory (optional)

How it works

1. Creates a temporary Next.js project with TypeScript and Tailwind CSS
2. Initializes shadcn/ui configuration
3. Installs the specified shadcn component
4. Analyzes the component file to extract props interface
5. Generates JSON schema using typescript-json-schema
6. Returns the schema via CLI output
7. Cleans up temporary files

Examples

Extract Button Schema

$ shadcn-schema extract -c button

✓ Component: button
✓ Props Interface:
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
  size?: "default" | "sm" | "lg" | "icon"
  asChild?: boolean
}

✓ JSON Schema:
{
  "type": "object",
  "properties": {
    "variant": {
      "type": "string",
      "enum": ["default", "destructive", "outline", "secondary", "ghost", "link"]
    },
    "size": {
      "type": "string", 
      "enum": ["default", "sm", "lg", "icon"]
    },
    "asChild": {
      "type": "boolean"
    }
  },
  "additionalProperties": true
}

Testing

The project includes a comprehensive test suite covering:

• Schema generation from TypeScript interfaces
• Path resolution and normalization
• CLI argument parsing and validation
• Project setup and cleanup operations
• Error handling and edge cases

Run tests with:

# Run all tests
npm test

# Run tests with coverage
npm run test:coverage

Requirements

• Node.js 18 or higher
• npm or yarn
• Internet connection (for downloading dependencies)

Error Handling

The tool includes comprehensive error handling for:

• Network failures during project setup
• Missing or invalid component names
• TypeScript compilation errors
• File system operations
• Schema generation failures

All errors are reported with descriptive messages and appropriate exit codes.