Documentation

Learn how to use and customize shadcn/ui variants.

Introduction

Shadcn Variants is a curated collection of custom variations for shadcn/ui components alongside original components using the same design guidelines from sahscn/ui. This project aims to provide developers with a set of ready-to-use, visually appealing, and easily customizable component variants that extend the base shadcn/ui library. Each component showcase includes an interactive playground, allowing you to experiment with different configurations and preview the resulting code. You can also explore the component source code and documentation to understand how the variants are implemented.

Using the Components

There are three main methods to integrate these components into your project:

  1. Using the Custom CLI Command: Run the dedicated CLI command to automatically install and configure the components.
  2. Copying and Pasting the Code: Follow the steps to manually copy the provided code snippets into your project.
  3. Downloading as a File: Download the component as a file and add it to your project.

Detailed instructions and examples are available on each component page to guide you through the integration process.

Interactive Playground

Explore the capabilities of each variant through our interactive playground, where you can:

  • Dynamically adjust component properties
  • Observe real-time updates reflecting your changes
  • Generate and copy the corresponding code snippets

Contributing

We encourage community contributions to expand the Shadcn Variants collection! If you've developed a unique custom variant, we invite you to submit a pull request to our GitHub repository.

Please ensure your submission includes:

  • The complete component code, incorporating your custom variant
  • A concise description of the variant's purpose and aesthetics
  • Illustrative examples demonstrating its usage