diff --git a/packages/lsd-react/README.md b/packages/lsd-react/README.md new file mode 100644 index 0000000..2c603e8 --- /dev/null +++ b/packages/lsd-react/README.md @@ -0,0 +1,63 @@ +# Logos Design System (LSD) + +LSD is an open-source design system challenging conventional norms in the world of digital products and experiences. Rooted in a philosophy that values content over excess, we're here to decentralize design and empower the message. Our minimalist approach is a rebellion against the cluttered design landscape. Join us in our mission to simplify and refocus design for all, with working code, tools, resources, and a community of like-minded individuals. + +## Getting Started + +### Installation + +Install the latest version of LSD React into your project using Yarn or NPM. + +```bash +yarn add @acid-info/lsd-react + +# or + +npm i -S @acid-info/lsd-react +``` + +### Setup Theme + +To use LSD theme and design tokens in your React app, wrap your app with the `ThemeProvider` component. This component: + +- Creates a CSS baseline for the LSD components using CSS-in-JS and inserts it into the DOM. +- Injects the LSD CSS variables into the DOM for the theme prop. + +The `ThemeProvider` component should be at the root of your app, as shown below: + +```tsx +import React from 'react' +import ReactDOM from 'react-dom' +import { ThemeProvider, defaultThemes } from '@acid-info/lsd-react' + +import App from './App' + +ReactDOM.render( + + + , + document.getElementById('root'), +) +``` + +### Using LSD Components + +Import LSD components from `@acid-info/lsd-react` and use them in your React app! + +```tsx +import { Button } from '@acid-info/lsd-react' + +function App() { + return ( +
+ +
+ ) +} +``` + +## Resources + +- [Figma](https://www.figma.com/files/1209516814771276303/project/78782235) +- [Storybook](https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/) +- [Chromatic](https://www.chromatic.com/builds?appId=63e4f71c39dc65c5c703c1e8)