https://github.com/robertkirsz/ui

UI components library that I use in my React apps
https://github.com/robertkirsz/ui

components-library react styled-components

Last synced: 3 days ago
JSON representation

UI components library that I use in my React apps

• Host: GitHub
• URL: https://github.com/robertkirsz/ui
• Owner: robertkirsz
• License: gpl-3.0
• Created: 2021-06-22T12:48:38.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-14T19:15:48.000Z (almost 3 years ago)
• Last Synced: 2024-10-12T16:09:41.770Z (about 1 month ago)
• Topics: components-library, react, styled-components
• Language: TypeScript
• Homepage:
• Size: 3.72 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# UI Components Library

A library of UI components that I use in my apps.  

Made with React and styled-components, built with Rollup.

## Installation

```js

yarn add @robertkirsz/ui

// or

npm install @robertkirsz/ui

```

Make sure you have latest `react`, `react-dom` and `styled-components` installed as well.

## Usage

```js

import React from 'react'

import ReactDOM from 'react-dom'

import { ThemeProvider, Button } from '@robertkirsz/ui'

const App = () => (

  

    Hello

  

)

ReactDOM.render(

  

    

  ,

  document.getElementById('root')

)

```

All available components with usage examples and their documentation can be found [here](https://robertkirsz.github.io/ui).

## Drak mode and custom themes

To use dark mode styles, wrap a particular part of your app with `` and pass `darkMode` prop to it.

```js

  

```

If you want to use a custom theme, you can pass your values as `theme` prop to ``:

```js

const customTheme = {

  borderRadius: '0',

  colors: {

    text: 'red',

    primary: 'green',

    secondary: 'blue'

  }

}

  

```

You can find the theme structure and values in [src/theme.ts](https://github.com/robertkirsz/ui/blob/main/src/theme.ts) file.

You can also `import { defaultTheme } from '@robertkirsz/ui'` and use it as a base for some more precise value-overwrites.

```js

import { defaultTheme } from '@robertkirsz/ui'

const customTheme = {

  colors: {

    ...defaultTheme.colors,

    secondary: 'yellow'

  }

}

```

## BasicStyles

You can `import { BasicStyles } from '@robertkirsz/ui'` and put it somewhere in your app to get some core styles and basic typography.

## Troubleshooting

If you don't see Intellisense suggestions for components' props in your editor, make sure you have `@types/react` and `@types/styled-components` installed as your devDependencies.

## Development

Make sure you're using Node version specified in `.nvmrc` file. If you have [nvm](https://github.com/nvm-sh/nvm) installed, you can do this:

```sh

nvm use

```

It will set the proper Node version for you (or prompt you to install it).

### Install dependencies

```sh

yarn install

```

### Start Storybook

```sh

yarn storybook

```

You can use it as a development environment as well as the showcase app for all components.  

It will be available at http://localhost:6006.

### Unit tests

```sh

yarn test

```

### Formatting code

```sh

yarn prettier

```