React React Styling Resources

MyGitHub The MyGitHub component is a pre-styled React component for displaying a GitHub user's projects and other informations. With just one import,

Autoprefixer PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twi

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version = IE6* Demo The best s

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

emotion The Next Generation of CSS-in-JS Emotion 11 has been released 🚀 See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

macaron comptime-css is now called macaron! macaron is a zero-runtime and type-safe CSS-in-JS library made with performance in mind Powered by vanilla

Classnames A simple JavaScript utility for conditionally joining classNames together. Install with npm, Bower, or Yarn: # via npm npm install classnam

sass-loader Loads a Sass/SCSS file and compiles it to CSS. Getting Started To begin, you'll need to install sass-loader: npm install sass-loader sass

JSS A lib for generating Style Sheets with JavaScript. For documentation see our docs. Backers Support us with a monthly donation and help us continue

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

TailwindCSS Radix TailwindCSS plugin that helps styling radix state. Installation yarn yarn add tailwindcss-radix npm npm i tailwindcss-radix Usage Yo

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

Css Generator 😃 Packages used in Project : React Router Dom Framer Motion react-color react-icons react-awesome-button Preview Tools 🔨 Background to

Welcome to a Portfolio Template 👋 This is Avneesh's portfolio, feel free to use it and contribute to it 🏠 Homepage ✨ Demo Using the template To use

Radium yarn add radium # or npm install --save radium Radium is a set of tools to manage inline styles on React elements. It gives you powerful stylin

Starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Jest Styled Components A set of utilities for testing Styled Components with Jest. This package improves the snapshot testing experience and provides

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

React CSS Modules React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global un

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 Looking for v5? The master branch is un

✏️ Griffel CSS-in-JS with ahead-of-time compilation. Griffel (German for stylus/pen) is CSS-in-JS with near-zero runtime, SSR support and styles defin

Windstitch is a 1.2kB, Simple Styling Library that helps you set when a className should be applied to a component.

React Container Query True modularity in styling responsive component. Installation npm i -D react-container-query Disclaimer I am providing code in t

Rainbow Sprinkles 🧁 Dynamic, theme-driven, style props for vanilla-extract Rainbow sprinkles works similarly to @vanilla-extract/sprinkles. Like spri

A sticky view with scroll listener API for parallax style views. Stickyroll Site | Getting started | Live support | Typedoc Are you looking for a Vue.

tailwindcss-classnames Functional typed classnames for TailwindCSS TailwindCSS is a CSS library that has gained a lot of traction. The developer exper

Leverage the CSS Houdini API and the wopian/smooth-corners npm package to create a rounded corner look for your React elements

tslint-react Lint rules related to React & JSX for TSLint. Usage tslint-react has peer dependencies on TSLint and TypeScript. To use these lint rules

Isomorphic CSS style loader for Webpack CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rend

React based authentication page template This is my starter template for Login, Register and Forgot Password using ReactJS with simple form validation

@master/style-element.react Quickly create reusable React elements driven by class names. ~800B 🔴 Traditionally, you would extract a reusable element

Tailwind TS Generator ⚡️ Generate Tailwind type from your own configuration! This package is a Tailwindcss plugin that generates code out of your tail

Site feito com o react, typescript e styled components, que consome a API do tmdb de filmes.

Stail Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS. Why it's needed? First of all, I'm tired fr

styled-content-loader The simplest solution for content loading in React and styled-components. Getting Started npm install styled-components styled-c

🌐 ― React/Next.js/TailwindCSS portfolio

styled-typography Typograpy components for react and styled-components styled-typography is a small set of components, using styled-components, to bet

tsstyled React visual primitives with first-class TypeScript support and a tiny footprint. TL;DR: This library is a styled-components rewrite that is

A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SRR and next-level developer experience. It includes a framework-agnostic implementation

A Terminal Styled Portfolio Website. 🐱‍💻, a terminal style/styled portfolio website made with 3 using react.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

inline-style-prefixer A small, simple and fast vendor prefixer from JavaScript style object. Support Us Support Robin Frischmann's work on Fela and it

Rational Design is a tool for generating type-scales for greater consistency in design systems or web design projects. It’s built with React Hooks, SCSS, Webpack, and npm scripts, and is fully responsive.

React Split Flap Display A React component that mimics a Split-Flap/Solari display, cos I like Solari boards & wanted to practice creating NPM modules

React-Spinner A Simple Spinner and Loader Library Have a look How to use? The NPM package is not released yet. You can clone the project and try out t

15 Puzzle My first Game using React.js This is a classic 15-puzzle. To play you first scramble the tiles and then try to put them back in order. To mo

Aesthetic Start using Aesthetic now! aestheticsuite.dev Aesthetic is an end-to-end, multi-platform styling and design suite, that offers the following

Flexibly styled chat-widget for your react apps. It was mainly created for integration with chat-bots in messengers.

tailwindcss-email-variants A plugin that provides variants for email client targeting hacks used in HTML emails. All variants are based on targeting h

The UI design language and React library for Conversational UI Website：https://chatui.io English | 简体中文 Features 😎 Best Practices: The best practice

Crypto Cafe Project Requirements Crypto Cafe is a React Web App powered by COINGECKO cryptocurrency API. Visitors can browse through the top 50 Crypto

💻 A Disney+ interface with React, TypeScript and consumption of a fake API with json-server

A single-page application based on Homejam's homepage built using React.js homejam-clone.netlify.app This is the frontend of Homejam build with React.

react-native-swag-styles Dynamic Styles for React Native and Expo Web Highlights Dynamic. Based on React Hook. It automatically re-renders when necess