@sergiogc9/react-ui-theme

React UI Kit Theme

Usage no npm install needed!

<script type="module">
  import sergiogc9ReactUiTheme from 'https://cdn.skypack.dev/@sergiogc9/react-ui-theme';
</script>

README

React UI Theme

This package exports the necessary theme to work with my React UI library based on a design system using React, styled-components, styled-system and more.

See more info about the library HERE.

ℹ️ The library is still in a beta stage as I am still migrating many components here.

ℹ️ This library has been implemented by me and for me, hence it is highly opinionated.

Usage

Installation

Install the package from npm or github packages:

yarn add -S @sergiogc9/react-ui-theme

Then import the provided theme and use it together with the styled-components provider at a higher app level:

import { ThemeProvider } from 'styled-components';
import theme from '@sergiogc9/react-ui-theme';

const App = () => {
   const finalTheme = merge(theme, {...}); // Customize theme if wanted

   return (
      <ThemeProvider theme={finalTheme}>
         {...}
      </Theme>
   )
}

Documentation

This package basically exports the theme and its types. The theme is exported by default as seen in the example above.

The exported items are:

  • theme (default export): The theme itself. It should be passed to the styled-components provider.
  • Theme: The Theme typescript typing.
  • reset: A set of common CSS rules to be used globally in the app if wanted. It should be used together with createGlobalStyle provided by styled-components.
  • getColorFromTheme and getColorFromThemeWithOpacity: Returns the color value defined in the theme. Using directly the color values using styled-system approach is preferred.