Get started

Atti-components is a library of fully customizable React components based on styled-components.

Installaton

Atti-components rely on the usage of react, react-dom and styled-components :

npm install react react-dom styled-components

Then atti-components is available as a package on npm :

npm install atti-components

Usage

To use the components, you should provide your application a theme. Based on styled-components' usage, you should wrap your components in a ThemeProvider component.

In atti-components, we provide you a custom ThemeProvider and a basic theme that you can override.

So the root of your application should look like something like this:

import { defaultTheme, Button, ThemeProvider } from 'atti-components'

const App = () => (
  <ThemeProvider theme={defaultTheme}>
    <Button>Click me</Button>
  </ThemeProvider>
)

Theme

As stated before, atti-components comes with some themes that you can use on your application : defaultTheme, attineosTheme and greenyBlueTheme.

All those themes can be easily overriden. You can simply change the value of our theme or give a second theme to the ThemeProvider with just the values that you want to override :

import { Button, ThemeProvider, defaultTheme } from 'atti-components'

const customTheme = {
  components: {
    button: {
      colors: {
        primary: {
          background: "#FAFAFA",
          text: "blue"
        },
      }
    }
  }
}

const App = () => (
  <ThemeProvider theme={defaultTheme} otherTheme={customTheme}>
    <Button>Click me</Button> // This button will have #FAFAFA background and blue text
  </ThemeProvider>
)

Fonts

In the defaultTheme, the font used is Roboto. As we don't want to include it for you to avoid any conflicts, you should include it by yourself. For example you can add the following in one of your CSS files:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

If you don't want to use Roboto as your default font, you can simply override the theme.fonts.fontFamily.primary to any other value and include the corresponding font by yourself.

Please note that there is also a theme.fonts.fontFamily.secondary property but this one is not used so far. That said, it doesn't prevent you from overriding its value and using it.