https://github.com/dlarroder/playground
My React component library playground
https://github.com/dlarroder/playground
components-library emotion reactjs storybook tailwindcss twin-macro typescript
Last synced: 4 months ago
JSON representation
My React component library playground
- Host: GitHub
- URL: https://github.com/dlarroder/playground
- Owner: dlarroder
- License: mit
- Created: 2022-09-18T01:03:06.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-05-12T15:30:07.000Z (about 2 years ago)
- Last Synced: 2024-04-29T18:08:40.300Z (about 1 year ago)
- Topics: components-library, emotion, reactjs, storybook, tailwindcss, twin-macro, typescript
- Language: TypeScript
- Homepage: https://playground.dalelarroder.com
- Size: 2.67 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# playground
[](https://www.npmjs.com/package/@dlarroder/playground)
[](https://www.npmjs.com/package/@dlarroder/playground)
**playground** is a React component component library, as the name suggest, this will serve as my playground where I can
show off some of the cool component ideas I have and will be available for the public to use via npm.
## Installing playground
To use playground components, all you need to do is install the `@dlarroder/playground` package
```sh
$ yarn add @dlarroder/playground
# or
$ npm i @dlarroder/playground
```
## Usage
To start using the components, please follow these steps:
1. Import stylesheets manually
```jsx
import '@dlarroder/playground/dist/styles.css'
```
2. Now you can start using components like so
```jsx
import { useState } from 'react'
import { Switch } from '@dlarroder/playground'
function Example() {
const [checked, setChecked] = useState(false)
return
}
```
## Looking for the documentation?
You can visit the full list of components here -- https://playground.dalelarroder.com/