With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js. Learn more β
Top 23 Tailwindcss Open-Source Projects
-
-
shadcn/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
daisyui
πΌ πΌ πΌ πΌ πΌ βThe most popular, free and open-source Tailwind CSS component library
-
-
headlessui
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
Reactive-Resume
A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!
-
Plausible Analytics
Simple, open source, lightweight (< 1 KB) and privacy-friendly web analytics alternative to Google Analytics.
-
taxonomy
An open source application built using the new router, server components and everything new in Next.js 13.
-
-
-
TW-Elements
ππͺππ collection of Tailwind MIT licensed (free) components, sections and templates π
-
sage
WordPress starter theme with Laravel Blade components and templates, Tailwind CSS, and a modern development workflow
-
-
HyperUI
Free Tailwind CSS components for application UI, ecommerce and marketing with support for dark mode, RTL and Alpine JS π
-
twin.macro
π¦ΉββοΈ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
-
Next-js-Boilerplate
πππ Boilerplate and Starter for Next.js 14+ with App Router and Page Router support, Tailwind CSS 3.4 and TypeScript β‘οΈ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Husky + Lint-Staged + Jest + Testing Library + Cypress + Storybook + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
Project mention: Customer service pages for e-commerce built with Tailwind CSS | dev.to | 2024-04-24Tailwind CSS
Honestly the ergonomics of heavily customizable generic component libraries aren't great. Copy and pasting a simple component to make the specific customizations you want helps reduce JS ecosystem churn and dependency pain. Popularity of libraries like shadcn/ui [1] are good acknowledgements of that.
[1] https://ui.shadcn.com/
Project mention: HTML-first, framework-agnostic implementation of shadcn/UI β franken/UI | news.ycombinator.com | 2024-04-22DaisyUI offers zero-JS components
https://daisyui.com/
I used it for a small form + search result list recently and it works well enough for simple / static stuff.
But I think I'll still be reaching for a JS lib first since I'd miss things like inputs-with-autocomplete too much.
Cal.com is an open-source event-juggling scheduler for everyone, and is free for individuals.
Catalyst is a comprehensive, fully componentized UI kit for modern React projects, built on the next generation of Headless UI. With Catalyst, you can create a custom set of components to use and reuse in your projects.
Project mention: Deploy Full-Stack Next.js T3App with Cognito and Prisma using AWS Lambda | dev.to | 2024-04-15import { unstable_noStore as noStore } from "next/cache"; import Link from "next/link"; import { CreatePost } from "~/app/_components/create-post"; import { getServerAuthSession } from "~/server/auth"; import { api } from "~/trpc/server"; export default async function Home() { noStore(); const hello = await api.post.hello.query({ text: "from tRPC" }); const session = await getServerAuthSession(); return (
Create T3span> App h1>
First Steps βh3>
Just the basics - Everything you need to know to set up your database and authentication. div> Link>Documentation βh3>
Learn more about Create T3 App, the libraries it uses, and how to deploy it.div> Link> div>{hello ? hello.greeting : "Loading tRPC query..."}p>
{session && Logged in as {session.user?.email}span>} p> {session ? "Sign out" : "Sign in"} Link> div> div> div> main> ); } async function CrudShowcase() { const session = await getServerAuthSession(); if (!session?.user) return null; const latestPost = await api.post.getLatest.query(); return (
{latestPost ? (Your most recent post: {latestPost.name}p> ) : (
You have no posts yet.p> )} div> ); }
Project mention: Lenster a decentralized and permissionless social media app | news.ycombinator.com | 2023-05-25
Go to App | Docs
I could do the same exercise with Google Analytics and Google Tag Manager, but luckily I don't need to, since Plausible already did. A piece of advice, rip out Google Analytics and use Plausible instead. It first of all doesn't destroy your website, and secondly it doesn't violate the GDPR - So you can embed it on your site without having to warn your visitors about that they're being spied on by Google.
I am building this app with inspiration from Taxonomy and Acme corp so a lot of the design comes from there.
We can select our favorite button component from the component library list of the project awesome-tailwindcss. Its html is as follows
I'd like to share my latest discovery with you. TW Elements is currently, the most popular 3rd party UI kit for TailwindCSS with over 10k Github stars. It's a huge collection of stunning components made with attention to the smallest detail. Forms, cards, buttons, and hundreds of others. All components have dark mode and very intuitive theming options. The project is supported by an engaged community on GitHub, I recommend you check it out and join one of the many discussions. You will find installation instructions here, and you can track the progress of the project live here. The project was kickstarted by @mdbootstrap, a group of open-source developers behind MDB UI Kit - a high-quality UI kit for Bootstrap, and also behind MDB GO - hosting and deployment platform. I highly recommend you to check it out!
Project mention: Sage β Advanced WordPress Starter Theme with Tailwind CSS and Laravel Blade | news.ycombinator.com | 2024-03-26
There is a (hillariously named) alternative noodle [1] that aims to compete in this space. It is under development but looks polished.
[1] https://noodle.run
I've built a starter in Nextjs 14 with auth: https://github.com/ixartz/Next-js-Boilerplate
TailwindCSS (with Flowbite)
Project mention: Upgrade my blog to Next.js 13.4 with MDX, Prisma, Tailwindcss, Planetscale, Giscus and Contentlayer | /r/nextjs | 2023-07-19Shen Lu's portfolio, inspired by leerob.io.
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
Tailwindcss related posts
- Customer service pages for e-commerce built with Tailwind CSS
- My Failed Student Housing App
- Build Link Shortener with Supabase and Nuxt
- Show HN: Open Source TailwindCSS UI Components
- Embark on a UI Odyssey: Top 5 Spectacular Libraries to Explore
- Tailwind CSS product overview components built for E-commerce websites
- Supabase Bootstrap: the fastest way to launch a new project
-
A note from our sponsor - SurveyJS
surveyjs.io | 25 Apr 2024
Index
What are some of the best open-source Tailwindcss projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Tailwind CSS | 78,166 |
| 2 | shadcn/ui | 56,834 |
| 3 | daisyui | 30,632 |
| 4 | cal.com | 28,546 |
| 5 | headlessui | 24,154 |
| 6 | create-t3-app | 23,295 |
| 7 | hey | 22,319 |
| 8 | Reactive-Resume | 19,917 |
| 9 | Plausible Analytics | 18,286 |
| 10 | taxonomy | 17,520 |
| 11 | tremor | 15,104 |
| 12 | awesome-tailwindcss | 12,705 |
| 13 | TW-Elements | 12,643 |
| 14 | sage | 12,518 |
| 15 | noodle | 11,311 |
| 16 | cv | 8,290 |
| 17 | HyperUI | 8,252 |
| 18 | twin.macro | 7,802 |
| 19 | Next-js-Boilerplate | 7,203 |
| 20 | flowbite | 6,917 |
| 21 | leerob.io | 6,853 |
| 22 | windicss | 6,507 |
| 23 | drawdb | 6,154 |
Sponsored
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com