A react components library.
- Storybook : UI playground tool allows to build and document components in isolation.
- Rollup : JS bundler, for packing and distributing the library into a single module.
- Jest : Test runner for JS.
- Sass : CSS on steroids.
-
Buttons
- Simple Button
- Flat Button
-
Inputs
- Simple Input
- Textarea
- Select
- Checkbox
- Radio button
- Date
-
Navigation
- Dropdown
- Breadcumber
- Card
Larsson mainly uses the following colors :
We choose to use one typography from Google's Fonts library and make use of Martian Mono’s different declination. This helps us move quickly and maintain visual consistency.
We source the majority of our UI icons from Heroicons. This helps us to avoid inconsistency.
You can find the complete design system and guidelines from where Larsson was inspired to use it best. Design System
npm install @mojsx/larsson
...
import { FlatButton } from "larsson/buttons";
...
const App = () => {
return(
<>
<FlatButton
content="White Button"
href="https://github.com/mo-jsx/larsson"
variant="primary"
/>
</>
)
}
export default App;