lsd/packages/lsd-react
github-actions aa777677df chore: release v0.1.0 2024-01-10 08:58:04 +00:00
..
.storybook fix: use a ping pong approach instead 2023-11-07 13:27:17 +00:00
src feat: export the Portal component 2024-01-10 12:26:04 +03:30
.gitignore refactor(lsd-react): cleanup Storybook configs and switch to @storybook/builder-vite 2023-02-09 14:18:23 +03:30
.npmignore chore(lsd-react): avoid publishing .storybook directory 2023-04-14 03:12:07 +03:30
CHANGELOG.md chore: release v0.1.0 2024-01-10 08:58:04 +00:00
README.md chore(lsd-react): add README.md file 2023-12-06 11:53:07 +03:30
package.json chore: release v0.1.0 2024-01-10 08:58:04 +00:00
tsconfig.json chore: initial Commit 2023-02-02 19:54:57 +03:30
tsconfig.node.json chore: upgrade storybook packages 2023-10-06 17:50:01 +03:30
vite.config.ts fix: cjs build only 2023-05-24 15:44:51 +03:30

README.md

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