React FlatifyCSS: the flat design React component library is finally stable
Tags: javascript, opensource, css, react
Published: 2022-10-28 22:51:18

About a year ago, I started the project called [FlatifyCSS](https://flatifycss.com/), it is an open-source web framework like Bootstrap to help web developers create websites with the design trend inspired by [Duolingo design system](https://design.duolingo.com/), which is unique in its way.
I've written about FlatifyCSS here:

{% embed https://dev.to/amir2mi/intro-to-flatifycss-modern-flat-design-framework-for-the-web-11pm %}


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blt7botw3xhmzbkn28j9.jpg)

## How it started

Shortly after announcing FlatifyCSS, I started to create React components for my personal project and the result seemed satisfying, so I shared it open-source as [**React FlatifyCSS**](https://react.flatifycss.com/).

## How it is going
Recently, I decided to get my arse in gear and finish it. Things went well, I added styled components and rewrote some major parts because of accessibility and performance. Some of the [Reach UI](reach.tech/) bare-bones components were replaced to work along with FlatifyCSS styles.

## Main features
FlatifyCSS has a playful design and gives you features to help you develop your project quickly and easily.

### Customizability

With the power of CSS custom properties, it is possible to customize colors, typography, animations, etc. You can do the customization for each component or generally from the config file.

### Accessibility

It is keyboard-friendly, the friend of assistive technologies, and supports the reduced motion for animation and transitions when the user prefers.

### Support for right to left layouts

FlatifyCSS comes with files prefixed as -rtl.css built especially for the right to left languages like Arabic, Persian, Hebrew, etc. You can also extend the right to left styles by using the flatify-rtl.scss file and conditional statements.

### Practical set of components

There are more than twenty components that can be mixed and make more complex user interfaces, each component has its unique CSS variables and can be customized based on the usage.
    
### Based on Styled Components

The components are created based on styled-components, so you can add your styles and get benefits of using styled components with joy.

## Start using React FlatifyCSS

To install and use it, you should install both the `flatifycss` and `react-flatifycss` packages. We use the base `flatifycss` package to import styles.

### Installing packages

Use npm or Yarn to install the packages:

```bash
npm i flatifycss react-flatifycss
```

### Import styles

React FlatifyCSS itself does not include the FlatifyCSS styles, so you can import [your preferred stylesheet](https://flatifycss.com/docs/intro#css) in your application.

#### Left to right

```js
import 'flatifycss/dist/css/flatify-min.css';
```

#### Right to Left

```js
import 'flatifycss/dist/css/flatify-rtl-min.css';
```

### Use components!

Now, just import the component you need from `react-flatifycss`, for example a simple button:

```js
import React from 'react';
import { Button } from 'react-flatifycss';

export default function App() {
  return <Button theme="green">Success!</Button>;
}
```

## Component categories
Available components are separated by four categories:

- Content
- Forms
- Buttons
- Components


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwxnee087xqme23q0xr0.jpg)

### Content 
 
Components that are related to post body, things like images, quotes and so on.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cw8liiunspvq5butyiig.png)

### Forms   

Inputs, checkbox, radio and other components that generally are used in forms are in this category.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tr5jkanojw3u4sxumtzw.jpg)

### Buttons   

I remember somebody said:

> If you want to know a design system is good enough, check its buttons first.

Buttons include a wide range of components, so it is better to separate them from others.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4z2r1j5h47ptrid45nw.png)

### Components   
Accordion, dropdown, modal, toast and other stuff are presented in this category.

## Documents and playground
For more information, please start reading from [here](https://react.flatifycss.com/playground/?path=/docs/documents-introduction--page).
The playground is created with [Storybook](https://storybook.js.org/), so you can examine how each component works, read its documents and get a copy of the snippet easily!