Awesome GitHub RepositoriesUtility-First CSS Frameworks

Slidev is a markdown-based presentation framework designed for creating interactive, web-based slide decks. It functions as a static site generator that transforms plain text files into modular UI components, allowing authors to maintain version control while building professional presentations. The engine provides a browser-based runtime that manages slide navigation, animated transitions, and the live execution of code blocks. What distinguishes Slidev is its developer-centric approach to technical presentations. It features built-in support for syntax highlighting, mathematical typesetting

UnoCSS is an atomic CSS engine and utility-first framework that generates styles on-demand based on the specific classes used in your source code. By scanning your project files during the build process, it produces only the CSS necessary for your application, effectively minimizing bundle size and eliminating unused styles. The engine distinguishes itself through a highly modular, configuration-driven architecture that allows for deep customization of design tokens, rules, and presets. It supports advanced styling patterns such as attribute-based styling, tag-based styling, and dynamic varia

Soybean Admin is a type-safe frontend management boilerplate and dashboard template built with Vue 3, Vite, and TypeScript. It provides a pre-configured foundation for creating enterprise administrative interfaces, utilizing the NaiveUI component framework and UnoCSS for utility-first styling. The project distinguishes itself through automated workflow tools, including file-system-based route generation and a command-line interface for automating git commits and project deployments. It implements a comprehensive security model featuring both static and dynamic role-based access control to res

Sage is a WordPress starter theme that provides a foundation for building sites using professional software engineering patterns and modern development workflows. It functions as a theme architecture designed for native compatibility with the visual block-based editor. The project integrates the Laravel Blade templating engine to separate business logic from presentation using reusable components. It incorporates the Tailwind CSS framework for building responsive user interfaces via a utility-first approach and includes a modern frontend build tool to provide asset compilation and hot-reloadi

TW-Elements is a Tailwind CSS component library and responsive UI kit providing a collection of pre-styled elements and templates. It functions as an interactive web element set and a customizable theme system for building website interfaces and landing pages. The project enables rapid frontend prototyping through a library of functional interface pieces, including modals, navigation bars, and forms. It provides a set of design blocks and sections specifically for creating mobile-first layouts. The library covers responsive web design and Tailwind CSS UI development. This includes the implem

Tachyons is a utility-first CSS framework and functional CSS library. It provides a collection of single-purpose classes used to style elements and build layouts without writing custom CSS. The framework centers on a mobile-first responsive design system and a nestable grid architecture that adapts layouts across different screen sizes. It includes accessible color palettes and schemes designed to meet visual contrast and accessibility standards. The system provides tools for utility-first styling, responsive layout management, and visual debugging to resolve alignment and spacing issues.

react-native-reusables este o bibliotecă de componente UI pentru React Native și un sistem de design cross-platform pentru mobil. Oferă o colecție de componente de interfață utilizator accesibile și stilizabile, concepute pentru a menține consistența vizuală pe diferite sisteme de operare mobile. Proiectul funcționează ca o colecție de componente headless UI, prioritizând accesibilitatea și funcționalitatea în detrimentul presetărilor vizuale rigide. Acționează ca un framework Tailwind CSS pentru mobil prin implementarea modelelor CSS utility-first via NativeWind pentru a facilita prototiparea rapidă a interfețelor. Biblioteca acoperă dezvoltarea UI pentru mobil și designul de interfețe cross-platform, utilizând o abstractizare bazată pe primitive și un model de componente bazat pe compoziție pentru a construi ecrane mobile finisate.

NativeWind is a utility-first CSS framework that integrates Tailwind CSS design patterns into React Native applications. It functions as a cross-platform styling system and style mapper that translates CSS-based utility classes into native style objects compatible with mobile platforms. The framework provides a responsive UI engine that implements breakpoints, dark mode management, and platform-specific modifiers. It allows for the definition of custom themes including global colors, fonts, and spacing values to maintain a consistent visual identity across different devices. The system cover

This is a static site generator and blog publishing system built on Next.js that compiles MDX content into HTML at build time. It uses file-based routing to map each page to a URL path automatically, and applies utility-first CSS styling through Tailwind CSS for visual design. The project includes a pre-built blog starter template that can be deployed with a single click to Vercel’s edge network, where it benefits from automatic optimizations and serverless function support. It features built-in analytics instrumentation that collects page view and visitor data without manual setup, and suppo

This project is a production-ready enterprise boilerplate and starter for building high-performance web applications with Next.js. It provides a foundational architecture for large-scale application bootstrapping, combining a TypeScript web starter with a pre-configured project structure and professional toolset. The project distinguishes itself through an integrated suite of operational tools, including CI/CD deployment pipelines, infrastructure-as-code provisioning, and a component-driven UI development sandbox. It incorporates a utility-first styling architecture using Tailwind CSS and a l

The United States Web Design System is a government design system and accessible UI framework. It provides a collection of standardized CSS and JavaScript components, along with a CSS component library, specifically designed for building consistent federal government websites. The system allows for custom CSS theme development through the use of design tokens for colors, spacing, and typography. Users can customize visual themes and compile custom styles to maintain a unified brand identity across multiple web properties. The framework covers responsive interface design and web accessibility

Windi CSS is a utility-first CSS framework that generates only the CSS classes actually used in a project, scanning source files at build time to produce smaller, optimized stylesheets. It provides on-demand style generation through static analysis of HTML and template files, eliminating unused styles for leaner output. The framework offers a plugin-based extension system for adding custom utilities, variants, and design tokens without modifying the core. It includes built-in compatibility for migrating from Tailwind CSS, removing Tailwind-specific dependencies and configuration fields while

Tailwind CSS Typography is a plugin for the Tailwind CSS framework that provides hand-tuned typographic defaults for blocks of vanilla HTML content, such as content from Markdown or a CMS. It applies beautiful prose styles to HTML content using a single class, eliminating the need for custom CSS to style rich text. The plugin distinguishes itself by offering deep customization and control over typography. Users can adjust the overall font size of prose content across five predefined sizes, select from five built-in gray-scale palettes to match a project's color scheme, and seamlessly adapt ty

Tailwind Starter Kit is a copy-paste UI component library built with Tailwind CSS, designed to accelerate front-end development by providing pre-built, reusable interface blocks that can be inserted directly into any project without package managers or build tools. It delivers identical UI components as native code for React, Vue, Angular, and plain HTML, making it a framework-agnostic resource for assembling responsive layouts. The kit structures its UI blocks as plain Tailwind markup that AI code generators can parse and reproduce from natural-language descriptions, making it compatible wit

David AI is a UI development toolkit that combines AI-powered page generation with a library of pre-built, copy-paste-ready components built on Tailwind CSS. At its core, it offers an AI builder that can generate complete landing pages and dashboards from natural language prompts, outputting clean, responsive Tailwind CSS code. The project provides a comprehensive collection of UI components—including buttons, forms, navigation elements, and data displays—that can be assembled into full page sections like hero blocks, pricing tables, and dashboards. The toolkit distinguishes itself through a

Skeleton is a design system and accessible UI component library built on Tailwind CSS. It provides a collection of pre-built interactive components with built-in accessibility and state management, alongside a CSS custom properties theme engine that enables runtime theme switching and dark mode support. The project distinguishes itself through its adaptive design system approach, using CSS custom properties to create themeable tokens that integrate directly with Tailwind's utility-first framework. This allows developers to build visual design systems with customizable colors, fonts, and aesth

Skeleton este un toolkit UI Svelte Tailwind și o bibliotecă de componente adaptabile. Acesta oferă un sistem de design utility-first pentru construirea de interfețe web reactive, concentrându-se pe teme și tipografie consistente pe diverse dimensiuni de ecran. Toolkit-ul combină componente pre-stilizate cu instrumente de layout pentru a susține designul UI responsiv și prototiparea rapidă a frontend-ului. Acesta permite crearea de interfețe utilizator adaptabile printr-un set standardizat de clase utilitare pentru stilizare și layout. Sistemul acoperă capabilități de nivel înalt în dezvoltarea web cu Svelte și stilizarea cu Tailwind CSS, utilizând un sistem de grid flexibil și teme bazate pe variabile CSS.

Astrowind is a high-performance site framework and bootstrapping tool designed for building marketing sites, professional portfolios, and high-conversion landing pages. It utilizes a utility-first CSS architecture and a component-based UI library to assemble responsive websites. The project specializes in conversion rate optimization through targeted templates for lead generation, product sales, subscription captures, and pre-launch teasers. It includes specific infrastructure for static blogging, utilizing markdown-based content modeling and rendering for long-form articles. The framework c

Acest proiect este un plugin Tailwind CSS care oferă o bază normalizată pentru controalele de formular în diferite browsere web. Funcționează ca un reset de stil pentru formulare CSS, eliminând aspectele implicite inconsistente ale browserelor din input-uri, checkbox-uri și butoane radio pentru a stabili o fundație neutră pentru stilizarea de tip utility-first. Sistemul permite o strategie de aplicare bazată pe configurare, unde utilizatorii pot alege dacă resetările de stil se aplică global tuturor elementelor HTML corespondente sau doar celor cu clase specifice. Această flexibilitate permite aplicarea stilizării normalizate a formularelor componentelor non-formular pentru a menține consistența vizuală. Plugin-ul se integrează cu o configurație centrală de temă pentru a mapa valorile de resetare la token-uri de design. Utilizează injectarea de stiluri bazată pe PostCSS pentru a genera reguli CSS în timpul procesului de build, facilitând crearea de componente de formular personalizate folosind clase utilitare atomice.

tailwind-rn este un kit UI mobil utility-first și un framework de integrare care permite utilizarea claselor utilitare Tailwind CSS pentru a stiliza componentele React Native. Funcționează ca un motor de stilizare mobil responsiv care transformă definițiile de stil CSS în obiecte JSON compatibile cu stilizarea nativă a view-urilor mobile. Proiectul oferă un convertor de stil CSS-to-JSON și un motor responsiv care adaptează stilurile pe baza breakpoint-urilor ecranului, preferințelor dark mode și orientării viewport-ului. Acest lucru permite implementarea designului mobil responsiv și a stilizării bazate pe stare fără a scrie manual fișiere de stil. Framework-ul acoperă capabilități mai largi, inclusiv gestionarea temelor personalizate pentru culori și spațiere, stilizarea UI cross-platform pentru uniformitate vizuală și un sistem bazat pe provider pentru distribuirea configurațiilor de temă într-un arbore de componente.