Shadcn Tailwind4 Turborepo

screenshot of Shadcn Tailwind4 Turborepo

POC on how to use shadcn with multiple themes in tailwind v4

Overview

The Shadcn/ui with TailwindCSS v4 project represents a modern approach to web design, allowing developers to efficiently build applications with a unified codebase. This monorepo structure is beneficial for managing multiple projects, as it organizes both the web and documentation components under one umbrella, making it easier to maintain and update.

This project stands out with its use of TailwindCSS v4, which provides a sleek and responsive design experience. The inclusion of Shadcn components adds a ready-to-use UI element library, enabling developers to focus more on functionality than aesthetic design. Overall, this setup is an excellent choice for anyone looking to enhance their web development workflow while maintaining versatility in theming.

Features

  • Monorepo Structure: Allows for centralized management of both web and documentation projects, streamlining development processes.
  • TailwindCSS v4 Integration: Utilizes the latest version of TailwindCSS for superior styling and responsiveness, enabling easy customization.
  • Shadcn Components: Provides a library of pre-built components that can be easily integrated, saving time on UI development.
  • Theme Package: Defines various themes, allowing developers to switch styles effortlessly based on project requirements.
  • Parent App Control: The architecture allows the parent application to determine the active theme, providing flexibility for end-user experiences.
  • Efficient Deployment: Simplifies the deployment process for both web and docs, ensuring that updates can be pushed seamlessly.
  • Documentation Support: The inclusion of a dedicated documentation project helps users understand how to best use the features available.
typescript
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.