Themecn
A real-time theme generator for shadcn/ui. Create and preview beautiful themes instantly.
Overview
ThemeCN is an innovative tool that transforms your design workflow, particularly tailored for shadcn/ui. It enables designers and developers alike to craft stunning themes with ease, providing a powerful, intuitive interface that simplifies the entire process. With immediate visual feedback, you can experiment with color schemes, typography, and layouts without the hassle of constant adjustments and guesswork.
The platform brings forth a range of features that cater to both seasoned designers and beginners looking to explore their creativity. From real-time previews to user-friendly customization options, ThemeCN is designed to enhance your development experience while ensuring that your themes are both visually appealing and functional.
Features
- Intuitive Theme Creation: Create beautiful themes using a straightforward, visual interface that simplifies the design process.
- Real-time Preview: Instantly see your changes as you customize colors and typography, eliminating the guesswork often associated with theme development.
- Harmony Colors: Generate harmonious color palettes effortlessly with just one click, making color selection a breeze.
- Responsive Design: Preview your theme across various screen sizes to ensure consistent aesthetics on all devices.
- Shareable URLs: Easily share your customized themes with others via unique URLs, facilitating collaboration and feedback.
- Dark Mode Support: Seamlessly toggle between light and dark themes, allowing for versatile design options that cater to user preferences.
- shadcn/ui CLI Support: Integrate your themes into your shadcn/ui projects smoothly using the command-line interface.
- Import Themes: Quickly import existing Tailwind (v3/v4) globals.css files to visualize and adapt your themes in real time.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- TanStack
TanStack is a collection of high-quality, framework-agnostic libraries including TanStack Query for data fetching, TanStack Router for routing, TanStack Table for tables, and more. These tools provide powerful, type-safe solutions for common web development challenges.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- cmdk
cmdk is a fast, composable command menu component for React. It provides the foundation for building command palettes, search interfaces, and keyboard-navigable menus similar to those found in applications like VS Code, Linear, and Raycast.
- Shadcn UI
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Recharts
Recharts is a powerful and easy-to-use React library for building customizable and interactive charts. Built on D3.js, it offers a wide range of pre-built chart types, such as line, bar, pie, and scatter charts, all of which can be composed with a declarative syntax.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Zod
Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.
- Zustand
Zustand is a lightweight state management library for React that provides a simple and intuitive API for managing state in your application. It allows developers to easily create and manage global state, and provides a powerful set of tools for optimizing performance and improving developer productivity. Zustand is designed to be easy to use and easy to learn, making it a popular choice for developers of all skill levels.