diff --git a/README.md b/README.md index df905b12..5610ecfc 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -css-in-readme +css-in-readme # Tetrisly React @@ -15,17 +15,25 @@ We've desided to use `xstyled` for styling our components. If you are interested ## Installation -Install tetrisly-react with npm (you can do the same with yarn, pnpm or any other package manager) +Install `tetrisly-react`` with npm (you can do the same with yarn, pnpm or any other package manager) ```bash npm install @virtuslab/tetrisly-react ``` +and dependencies: + +```bash + npm install styled-components @xstyled/styled-components +``` + ## Setup +### TetrislyProvider + After installing the package, you need to wrap your application in the `TetrislyProvider` component. This will provide the theme and other context to your application. -```typescript +```jsx import { TetrislyProvider } from '@virtuslab/tetrisly-react'; function App() { @@ -33,34 +41,112 @@ function App() { - ) + ); } ``` TetrislyProvider accepts optional prop `theme` which can be used to override default theme. -You can check out how this object looks like here: [Tetrisly Theme](src/theme/theme.ts) - -```typescript +```jsx import { TetrislyProvider } from '@virtuslab/tetrisly-react'; function App() { return ( - + - ) + ); } ``` -## Usage/Examples +### Default theme -```typescript -import { Button } from '@virtuslab/tetrisly-react'; +Our default theme contains all of fundamental Tetrisly Design Tokens, you can use it with `xstyled` props to easy set up +your design. See `tet.*` utility [example of use](#tet-utility). -function App() { - return