All Projects β†’ gregberge β†’ Xstyled

gregberge / Xstyled

Licence: mit
A utility-first CSS-in-JS framework built for React. πŸ’…πŸ‘©β€πŸŽ€βš‘οΈ

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Xstyled

Twin.macro
πŸ¦Ήβ€β™‚οΈ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: ✭ 5,137 (+179.95%)
Mutual labels:  styled-components, tailwindcss, css-in-js, emotion
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+13.3%)
Mutual labels:  styled-components, css-in-js, emotion, styled-system
Styled-Responsive-Media-Queries
Responsive Media Queries for Emotion styled or styled-components β€” Standard size from Chrome DevTools.
Stars: ✭ 33 (-98.2%)
Mutual labels:  styled-components, emotion, css-in-js
benefit
✨ Utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles
Stars: ✭ 51 (-97.22%)
Mutual labels:  emotion, css-in-js, tailwindcss
Tailwind Styled Component
Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering
Stars: ✭ 57 (-96.89%)
Mutual labels:  styled-components, tailwindcss, css-in-js
Styled Ppx
Typed styled components in Reason, OCaml and ReScript
Stars: ✭ 236 (-87.14%)
Mutual labels:  styled-components, css-in-js, emotion
rebass
βš›οΈ React primitive UI components built with styled-system.
Stars: ✭ 7,844 (+327.47%)
Mutual labels:  styled-components, emotion, styled-system
satchel
The little bag of CSS-in-JS superpowers
Stars: ✭ 14 (-99.24%)
Mutual labels:  styled-components, emotion, css-in-js
Goober
πŸ₯œ goober, a less than 1KB πŸŽ‰ css-in-js alternative with a familiar API
Stars: ✭ 2,317 (+26.27%)
Mutual labels:  styled-components, css-in-js, emotion
Onno
Responsive style props for building themed design systems
Stars: ✭ 95 (-94.82%)
Mutual labels:  styled-components, css-in-js, emotion
Design System Utils
πŸ‘©β€πŸŽ¨ Access your design tokens with ease
Stars: ✭ 465 (-74.66%)
Mutual labels:  styled-components, css-in-js, emotion
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: ✭ 761 (-58.53%)
Mutual labels:  styled-components, css-in-js, emotion
Styled Components Vs Emotion
a short doc comparing the popular CSS-in-JS libraries styled-components and emotion
Stars: ✭ 204 (-88.88%)
Mutual labels:  styled-components, css-in-js, emotion
tsstyled
A small, fast, and simple CSS-in-JS solution for React.
Stars: ✭ 52 (-97.17%)
Mutual labels:  styled-components, emotion, css-in-js
Filbert Js
A lightweight(~1kb) css-in-js framework
Stars: ✭ 167 (-90.9%)
Mutual labels:  styled-components, css-in-js, emotion
Horror
😱 React HTML elements with CSS-in-JS
Stars: ✭ 78 (-95.75%)
Mutual labels:  styled-components, css-in-js, emotion
React Next Boilerplate
πŸš€ A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: ✭ 129 (-92.97%)
Mutual labels:  styled-components, css-in-js, emotion
Next Dark Mode
πŸŒ‘ Enable dark mode for Next.js apps
Stars: ✭ 133 (-92.75%)
Mutual labels:  styled-components, css-in-js, emotion
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. πŸ’…
Stars: ✭ 428 (-76.68%)
Mutual labels:  styled-components, css-in-js, emotion
Styled System
β¬’ Style props for rapid UI development
Stars: ✭ 7,126 (+288.34%)
Mutual labels:  styled-components, css-in-js, emotion

xstyled

A utility-first CSS-in-JS framework built for React.

License npm package npm downloads CircleCI codecov Code style

npm install @xstyled/styled-components styled-components

Docs

See the documentation at xstyled.dev for more information about using xstyled!

Quicklinks to some of the most-visited pages:

Example

import { x } from '@xstyled/styled-components'

function Example() {
  return (
    <x.div p={{ _: 3, md: 6 }} bg="white" display="flex" spaceX={4}>
      <x.div flexShrink={0}>
        <x.img h={12} w={12} src="/img/logo.svg" alt="xstyled Logo" />
      </x.div>
      <x.div>
        <x.h4
          fontSize={{ _: 'md', lg: 'xl' }}
          fontWeight="medium"
          color="black"
        >
          xstyled
        </x.h4>
        <x.p color="gray-500">A CSS-in-JS framework built for React.</x.p>
      </x.div>
    </x.div>
  )
}

License

Licensed under the MIT License, Copyright Β© 2019-present Greg BergΓ©.

See LICENSE for more information.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].