Topics / #css-in-js

CSS in js projects on GitHub

Writing component-scoped styles directly in JavaScript.

As of , the most-starred CSS in js projects on GitHub are ant-design (99.8K stars), styled-components (41.1K stars) and chakra-ui (40.7K stars). GitHub.Locker tracks 15 CSS in js repositories with 383.7K stars combined. The fastest-growing on October 19 was ant-design, with +20 stars in a day.

15Projects
383.7KStars in total
+39Stars in a day
Browse in the catalog →github.com/topics/css-in-js ↗

Hot right now

Most stars gained in a day · Oct 19

+20

ant-design

ant-design/ant-design · ★ 99.8K

Ant Design is an enterprise-class UI design language and a React component library for building web applications.

+5

chakra-ui

chakra-ui/chakra-ui · ★ 40.7K

Chakra UI is a component system for building SaaS products with speed: a set of accessible React components for creating web apps and design systems.

+5

stylex

facebook/stylex · ★ 10.4K

StyleX is a styling system from Meta — a JavaScript library for defining styles for optimized user interfaces.

+4

mantine

mantinedev/mantine · ★ 31.8K

Mantine is a fully featured React components library: @mantine/core alone ships 100+ components, and companion packages cover forms, charts, notifications, editors and more.

The all-time top

15 projects · by stars

  1. #1 · ant-design/ant-design

    ant-design

    Ant Design is an enterprise-class UI design language and a React component library for building web applications.

    99.8K
  2. #2 · styled-components/styled-components

    styled-components

    A CSS-in-JS library for React: styles are written in JavaScript and turned into styled components, with one API across server components, client components, streaming SSR and React Native.

    41.1K
  3. #3 · chakra-ui/chakra-ui

    chakra-ui

    Chakra UI is a component system for building SaaS products with speed: a set of accessible React components for creating web apps and design systems.

    40.7K
  1. 4

    mantine

    31.8Kmantinedev/mantine · TypeScript

    Mantine is a fully featured React components library: @mantine/core alone ships 100+ components, and companion packages cover forms, charts, notifications, editors and more.

  2. 5

    postcss

    29Kpostcss/postcss · TypeScript

    PostCSS is a Node.js tool for transforming styles with JS plugins: it parses CSS into an Abstract Syntax Tree and gives plugins an API to analyze and modify its rules.

  3. 6

    react-native-web

    22.2Knecolas/react-native-web · JavaScript

    React Native for Web is a set of cross-platform React UI packages; this repository is the development monorepo where the react-native-web package and related projects are built.

  4. 7

    unocss

    19Kunocss/unocss · TypeScript

    UnoCSS is an instant on-demand atomic CSS engine: it generates only the utility classes your code actually uses, so you ship minimal CSS for the web.

  5. 8

    emotion

    18Kemotion-js/emotion · JavaScript

    Emotion is a performant and flexible CSS-in-JS library for JavaScript: you write styles in your JS code instead of separate CSS files. It is one of the most popular libraries in this space.

  6. 9

    tamagui

    14.3Ktamagui/tamagui · TypeScript

    Tamagui is a set of TypeScript libraries for styling React apps: a universal style library, an optimizing compiler, and an optional UI kit that let you share UI code across web and React Native.

  7. 10

    evergreen

    12.4Ksegmentio/evergreen · JavaScript

    Evergreen is Segment's React UI framework — a set of polished, enterprise-grade React components for web apps that work out of the box.

  8. 11

    linaria

    12.4Kcallstack/linaria · TypeScript

    Linaria is a zero-runtime CSS-in-JS library: you write styles in JavaScript or TypeScript, and they are extracted to plain CSS files at build time.

  9. 12

    mdx-deck

    11.5Kjxnblk/mdx-deck · JavaScript

    MDX Deck is a React-based tool for building presentation slide decks by writing Markdown mixed with JSX components (MDX), instead of using a traditional slideshow app.

  10. 13

    frontend-bootcamp

    10.8Kmicrosoft/frontend-bootcamp · TypeScript

    A free two-day Microsoft workshop that teaches frontend development from HTML/CSS/JS basics up through TypeScript, React, and Redux, by having you build a small working web app.

  11. 14

    vanilla-extract

    10.4Kvanilla-extract-css/vanilla-extract · TypeScript

    vanilla-extract lets you write CSS styles in TypeScript (or JavaScript) with locally scoped class names and CSS variables, then compiles everything into static CSS files at build time with zero runtime cost.

  12. 15

    stylex

    10.4Kfacebook/stylex · JavaScript

    StyleX is a styling system from Meta — a JavaScript library for defining styles for optimized user interfaces.

Often tagged together