Skip to content
CSS in JSX for lazy developers, built using styled-components and styled-system
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Cattous Logo

Cattous 🐱

Easily define your design system and write your CSS using JSX.

Travis npm package Coveralls


  1. Import ThemeProvider from styled-components.
  2. Import Div. (Optionally, you can also import Normalize, and NormalizeOpenType)
  3. Define your theme or import an existing one, like cattous-tachyons.

And 🎉!

import { ThemeProvider } from "styled-components"
import Div, { Normalize, NormalizeOpenType } from "cattous"
import cattousTachyons from "cattous-tachyons"

const Layout = () => (
  <ThemeProvider theme={cattousTachyons}>
      <Div fontSize={[0,1,2]} color="black" fontWeight="900" as="h1">Cattous.</Div>
      <Div hover="dim" fontSize="24px" as="p">A CSS in JSX library for lazy developers</Div>

If you would like to add extra styles to Div, you can easily use styled-components for that. as is used to change the resulting HTML element.

const StyledDiv = styled(Div)`
  // insert your CSS here

Cattous also comes with Normalize, NormalizeOpenType (by Kenneth Ormandy), and Pesticide for debugging CSS (by Pesticide).


I recently became fond of styled-components and I couldn't go back to using a CSS file in my projects. However, and especially for small projects, styled-components slows me down because I have to declare a new variable for every HTML element that I want to style.

Rebass and styled-system offered what I wanted, but they were still missing a bunch of CSS properties.

Thus, I made Cattous 🐱 to help me get done with styling my side projects as fast as possible. It uses styled-system API and adds all missing CSS properties along with some styling (cattous-tachyons).

What's still missing?

The project is still under development, although it can be used without any problems.

I am still improving the source code, adding more options for theming, and importing known CSS libraries such as Tachyons (✔), Bootstrap, and TailwindCSS.

Questions? Suggestions?

You can find me on Twitter @Imed_Adel or on Linkedin.

You can’t perform that action at this time.