lsd/packages/lsd-react

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.

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:

import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider, defaultThemes } from '@acid-info/lsd-react'

import App from './App'

ReactDOM.render(
  <ThemeProvider theme={defaultThemes.dark}>
    <App />
  </ThemeProvider>,
  document.getElementById('root'),
)

Using LSD Components

Import LSD components from @acid-info/lsd-react and use them in your React app!

import { Button } from '@acid-info/lsd-react'

function App() {
  return (
    <div>
      <Button>Button</Button>
    </div>
  )
}

Resources

• Figma
• Storybook
• Chromatic