Documentation Overview

Welcome to the complete documentation for ShadcnStore! This guide provides links to all available documentation sections.

Getting Started

Perfect starting points for new users:

• Introduction - Overview of ShadcnStore, features, and philosophy
• Installation - Complete installation guide with CLI, manual, and authentication setup
• components.json Reference - Configuration file documentation

Customization

Learn how to customize blocks and themes:

• Theming - CSS variables, color system, and theme customization
• Dark Mode - Implementing dark mode across different frameworks

Development

Advanced topics for developers:

• Framework Integration - Using ShadcnStore with Next.js, Vite, Remix, and more
• TypeScript Support - Type safety, patterns, and best practices

Troubleshooting

• Troubleshooting - Common issues and debugging techniques

Help & Support

Get help when you need it:

• FAQ - Frequently asked questions covering all aspects
• External Links:
  • Official shadcn/ui Documentation
  • Tailwind CSS Documentation
  • React Documentation

Quick Reference

Installation Commands

# Authenticate with license
npx shadcn@latest add "https://shadcnstore.com/r/[component]" --token=YOUR_LICENSE_KEY

# Install specific block
npx shadcn@latest add https://shadcnstore.com/r/[component]

# Install with authentication
npx shadcn@latest add "https://shadcnstore.com/r/[component]?token=YOUR_LICENSE_KEY"

Essential Configuration

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

Theme Variables

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 45.1%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 45.1%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --radius: 0.5rem;
}

Documentation Categories

📚 Learning Path for Beginners

1. Introduction - Start here
2. Installation - Get set up
3. components.json - Configure your project
4. Theming - Customize appearance
5. FAQ - Common questions

Developer Resources

1. TypeScript Support - Type safety
2. Framework Integration - Platform-specific guides
3. Troubleshooting - Debug issues

Design & Customization

1. Theming - Color system and CSS variables
2. Dark Mode - Dark theme implementation

Technical Reference

1. components.json Reference - Configuration options
2. Framework Integration - Setup guides
3. TypeScript Support - Type definitions
4. Troubleshooting - Technical issues

External Resources

Official Documentation

• shadcn/ui - Component library foundation
• Tailwind CSS - Utility-first CSS framework
• Base UI - Unstyled, accessible components

Framework Documentation

• Next.js - React framework
• Vite - Build tool
• Remix - Full-stack web framework
• Astro - Static site generator

Development Tools

• TypeScript - Type safety
• ESLint - Code linting
• Prettier - Code formatting
• VS Code - Code editor

Getting Help

Community Support

• Discord: Join our Discord community for discussions and support
• Twitter - Updates and announcements

Professional Support

For enterprise customers and complex implementations:

• Email: [email protected]
• Custom Implementation - Available for enterprise clients
• Training Sessions - Team training available

Contributing

Help improve the documentation:

1. Submit issues for unclear sections
2. Suggest new documentation topics

---

Next, head to Installation or browse the component docs.

Choose a section above to dive deeper into ShadcnStore's capabilities.