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 TypeScript Tailwindcss 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.
-
-
headlessui
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
-
-
-
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!
-
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.
-
taxonomy
An open source application built using the new router, server components and everything new in Next.js 13.
-
-
-
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
-
-
-
next-enterprise
💼 An enterprise-grade Next.js boilerplate for high-performance, maintainable apps. Packed with features like Tailwind CSS, TypeScript, ESLint, Prettier, testing tools, and more to accelerate your development.
-
platforms
A full-stack Next.js app with multi-tenancy and custom domain support. Built with Next.js App Router and the Vercel Domains API.
-
-
preline
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
-
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.
With better CSS approaches like TailwindCSS and Vanilla Extract (which we're heavily using) it's much easier to maintain the UI and make sure it doesn't change unexpectedly. No more conflicting CSS classes, much less CSS specificity issues and much less CSS code in general.
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/
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 am building this app with inspiration from Taxonomy and Acme corp so a lot of the design comes from there.
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
Project mention: 5 Open-Source Next.js Projects Rocking 2024 (Learn the Patterns!) 🚀 | dev.to | 2024-04-05Github Repository: Here
Project mention: Free Next.js Boilerplate for ⚡️High-Performance⚡️ Enterprise Apps | dev.to | 2023-05-18The next-enterprise is an open-source template developed by Blazity that provides a robust set of features for building enterprise projects. It offers high-performance, maintainable and enjoyable web app development, making it an excellent choice for developers who want to streamline their workflow.
I am trying to add subdomains to my project where I am trying to have [slug].domainname.com and then also just the regular dominname.com, I structured my code app router to be app, then api, [subdomain], and home. then i created middleware based on the platforms template code https://github.com/vercel/platforms/tree/main Heres the middleware: import { NextRequest, NextResponse } from "next/server"; export const config = { matcher: [ /* * Match all paths except for: * 1. /api routes * 2. /_next (Next.js internals) * 3. /_static (inside /public) * 4. all root files inside /public (e.g. /favicon.ico) */ "/((?!api/|_next/|_static/|_vercel|[\\w-]+\\.\\w+).*)", ], }; export default function middleware(req) { const url = req.nextUrl;
Project mention: 5 Open-Source Next.js Projects Rocking 2024 (Learn the Patterns!) 🚀 | dev.to | 2024-04-05Github Repository: Here
We're locking on this specific version of Tailwind CSS to prevent this bug — it should be addressed in NativeWind v4, but more on that later.
clsx is a tiny utility for constructing className strings conditionally, I use it in conjunction with tailwind-merge which merges Tailwind CSS classes without style conflicts.
Project mention: Show HN: Preline UI v2.0 – open-source Tailwind Components Library | news.ycombinator.com | 2024-01-11
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).
TypeScript Tailwindcss related posts
- Show HN: Open Source TailwindCSS UI Components
- Embark on a UI Odyssey: Top 5 Spectacular Libraries to Explore
- Supabase Bootstrap: the fastest way to launch a new project
- ChatCrafters - Chat with AI powered personas
- Show HN: Shadcn website blocks you can copy/paste
- Morphic: An AI-powered answer engine with a generative UI
- Morphic: Open-source AI-powered answer engine
-
A note from our sponsor - SurveyJS
surveyjs.io | 23 Apr 2024
Index
What are some of the best open-source Tailwindcss projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Tailwind CSS | 78,166 |
| 2 | shadcn/ui | 56,834 |
| 3 | cal.com | 28,546 |
| 4 | headlessui | 24,154 |
| 5 | create-t3-app | 23,295 |
| 6 | hey | 22,319 |
| 7 | Reactive-Resume | 19,917 |
| 8 | taxonomy | 17,462 |
| 9 | tremor | 15,104 |
| 10 | noodle | 11,311 |
| 11 | cv | 8,290 |
| 12 | twin.macro | 7,798 |
| 13 | Next-js-Boilerplate | 7,100 |
| 14 | windicss | 6,507 |
| 15 | formbricks | 5,444 |
| 16 | next-enterprise | 5,431 |
| 17 | platforms | 5,176 |
| 18 | typebot.io | 4,783 |
| 19 | precedent | 4,466 |
| 20 | tape | 4,385 |
| 21 | nativewind | 4,158 |
| 22 | tailwind-merge | 3,991 |
| 23 | preline | 3,641 |
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