@acid-info/lsd-react v0.1.0-beta.3
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
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
8 months ago
8 months ago
10 months ago
8 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago