Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Consistent theme based CSS for styled-components & emotion πŸ’…πŸ‘©β€πŸŽ€βš‘οΈ

License

Notifications You must be signed in to change notification settings

agriffis/xstyled

Repository files navigation

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

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.

About

Consistent theme based CSS for styled-components & emotion πŸ’…πŸ‘©β€πŸŽ€βš‘οΈ

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 86.8%
  • JavaScript 13.2%

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /