Getting started

Installation

Install componentry and import the styles. Componentry uses PostCSS to convert custom @componentry directives to CSS.

1. Install Componentry and PostCSS

npm install componentry postcss autoprefixer

2. Add Componentry to your PostCSS config

Include Componentry's PostCSS plugin in your config. The plugin converts the@componentry directives into styles.

{
  "plugins": [require("componentry/postcss"), require("autoprefixer")]
}

3. Add directives to your CSS

The foundation directive is converted to the base styles, and the componentsdirective is converted to the component styles.

/* The "components" param will include all component styles */
@componentry foundation;

@componentry components;

/* Or each component style can be selectively included */
@componentry Alert;
@componentry Badge;
@componentry Button;
/* ... */

4. Build something radical

You're ready to start using Componentry.

import { Flex, Text } from 'componentry'

export const GettingStarted = () => {
  return (
    <Flex>  
      <Text variant="h1">Radical</Text>
    </Flex>
  )
}