shadcn/ui
Tailwind CSS
![SurveyJS Logo](https://cdn-b.libhunt.com/images/promo-campaign-images/000/000/030/main.png?1674177924)
shadcn/ui | Tailwind CSS | |
---|---|---|
165 | 1,298 | |
60,675 | 79,776 | |
5.4% | 1.8% | |
9.1 | 9.4 | |
4 days ago | 3 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
shadcn/ui
-
Shadcn UI: Must-Have Tools & Resources
A curated list of awesome things related to shadcn/ui
-
Tailwind CSS vs. Shadcn: Which Should You Choose for Your Next Project?
A component library called Shadcn provides pre-made, usable components. Consider it as a toolbox full of interchangeable construction pieces that you can add to your project, such as buttons, cards, and modals.
-
shadcn-ui/ui codebase analysis: examples route explained.
This is how you are able to see the Mail example with out any change in the URL when you visit ui.shadcn.com, it just directly loads MailPage component. Interesting.
- Shadcn/ui codebase analysis: site-header.tsx explained.
-
Shadcn-ui codebase analysis: How is the hero section built on ui.shadcn.com website?
I wanted to find out how the hero section is developed on ui.shadcn.com, so I looked at its source code. Because shadcn-ui is built using app router, the files I was interested in were Layout.tsx and page.tsx.
-
Shadcn-ui codebase analysis: Perfect Next.js dark mode in 2 lines of code with next-themes.
So I wanted to figure out how ui.shadcn.com implemented dark mode on their website. I looked at its source code. These things usually lie in providers.
- “Mail” example in shadcn-ui/ui manages state using Jotai.
-
app/(app) route group in shadcn-ui/ui
You can tell shadcn-ui/ui is built using app router by looking at its folder structure inside apps/www.
-
Mysterious /sink route in ui.shadcn.com
All these folders in the above image are pages that can be navigated to via the header on https://ui.shadcn.com/ website. However, I could not find the header link that points to /sink in the header
-
OpenAI Assistant with NextJS
I assume you know how to create a NextJS project. In this project, I use NextJS with Shadcn UI.
Tailwind CSS
-
Tailwind CSS vs. Radix UI: Which One Should You Choose for Your Next Project?
With Tailwind CSS, you can create unique designs without ever leaving your HTML thanks to its utility-first CSS framework, which offers low-level utility classes.
-
Building a serverless connected BBQ as SaaS - Part 2 - User Creation
Let us now start creating our dashboard, that we will continue building on in this series. The dashboard is a react app created with create-react-app. For styling we will use Tailwind CSS.
-
Create A YouTube Homepage Clone in Tailwind CSS and ReactJS
Creating a clone of the YouTube homepage can be both enjoyable and helpful for enhancing your front-end development skills. This project offers a chance to work on a familiar design while getting practical experience with commonly used tools like Tailwind CSS and React.js. It also helps you understand how modern web applications are structured and styled.
-
Tailwind CSS vs. Shadcn: Which Should You Choose for Your Next Project?
Tailwind is a CSS framework that prioritizes utility.
-
How I shipped an event registration site in just 1 week with Nuxt, Directus, OpenAI, and TailwindCSS
styling - Nuxt UI and Tailwind CSS
-
4 Free Tailwind CSS Badge Components [Open-Source]
I prepared a list of open-source badge components coded with Tailwind CSS and Material Tailwind.
-
Playing around with Hotwire ⚡️
I won't take credit for the re-design though. If you're using the Tailwind CSS Library you should checkout Tailwind UI. It's helped me scaffold a few components and pages quite easily, without having a designer onboard.
-
React with Tailwind CSS Skeleton Loader Example
Tailwind CSS (tailwindcss.com)
-
Styling your Dart Jaspr website with Tailwind CSS and DaisyUI
The key difference with Flutter lies in the usage of CSS. Mobile developers are not very used to this type of styling. Tailwind CSS has emerged as a leader in the CSS libraries space, offering a pragmatic approach to styling websites without sacrificing flexibility or design freedom.
-
Introducing Rocketicons: The Perfect Companion for React and Tailwind CSS Developers
And thus, Rocketicons was born. The first tool we’ve published to address these challenges. Rocketicons is an icon library designed specifically for Tailwind CSS and fully compatible with React Native. And it's just the beginning. Our mission is to empower developers like you to effortlessly share codebases across platforms, boosting productivity while ensuring consistency. We're also working on solutions for the other problems we've identified, so stay tuned for more tools to come!
What are some alternatives?
daisyui - 🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library
flowbite - Open-source UI component library and front-end development framework based on Tailwind CSS
nextui - 🚀 Beautiful, fast and modern React UI library.
antd - An enterprise-class UI design language and React UI library
material-ui-docs - ⚠️ Please don't submit PRs here as they will be closed. To edit the docs or source code, please use the main repository:
unocss - The instant on-demand atomic CSS engine.
windicss - Next generation utility-first CSS framework.
mantine - A fully featured React components library
emotion - 👩🎤 CSS-in-JS library designed for high performance style composition
Material UI - Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
![SurveyJS Logo](https://cdn-b.libhunt.com/images/promo-campaign-images/000/000/030/main.png?1674177924)