Tailwind Resources Logo Tailwind Resources
Shadcn Custom Theme screenshot

Shadcn Custom Theme

Author Avatar Theme by Kiliman
Updated: 9 Aug 2023
153 Stars

This tool generate a custom theme similar to the ones created by the [shadcn/ui Themes website](https://ui.shadcn.com/themes). You can specify the primary, secondary, accent, and gray colors. The color name should be one of the default Tailwind color names (e.g. red, green, blue, indigo, etc.)

Github

Overview

The shadcn-custom-theme tool generates a custom theme similar to the ones created by the shadcn/ui Themes website. It allows users to specify primary, secondary, accent, and gray colors for their theme. The primary color is required, while the rest default to Tailwind gray. By using this tool, users can generate CSS variables that can be inserted into their global.css file.

Features

  • Custom Theme Generation: Users can generate a custom theme with specified primary, secondary, accent, and gray colors.
  • Color Specification: Colors can be specified using default Tailwind color names, such as red, green, blue, indigo, etc.
  • Template Customization: Users can provide a TEMPLATE.json file to override the default theme template.

Installation

To install and use the shadcn-custom-theme tool, follow these steps:

  1. Open your command line interface.
  2. Run the following command: npx shadcn-custom-theme primary=COLOR [secondary=COLOR] [accent=COLOR] [gray=color] [template=TEMPLATE.json]
  3. Replace COLOR with the desired colors for primary, secondary, accent, and gray. If no colors are specified for secondary, accent, and gray, they will default to Tailwind gray.
  4. Optionally, if you want to use a custom template, provide a TEMPLATE.json file with the desired color values.
  5. The tool will output the CSS variables that you can copy and paste into your global.css file.

Summary

The shadcn-custom-theme tool allows users to generate custom themes for their websites, similar to the ones created by the shadcn/ui Themes website. Users can specify primary, secondary, accent, and gray colors, and the tool will output the necessary CSS variables for the theme. It also provides the option to customize the theme template by providing a TEMPLATE.json file. Overall, this tool offers a convenient way to generate personalized themes for websites.