Larsson 🔫

A react components library.

⚠️ under construction

Tools

• 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.

---

Implemented Components

• Buttons

  • Simple Button
  • Flat Button

• Inputs

  • Simple Input
  • Textarea
  • Select
  • Checkbox
  • Radio button
  • Date

• Navigation

  • Dropdown
  • Breadcumber
  • Card

---

Design System

Color palette

Larsson mainly uses the following colors :

• Crimson #DC143C

• Navy Blue #00008B

• Limegreen #32cd32

• Night #111111

• Silver #cccccc

• White #ffffff

Typography

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.

Link To Typography

Iconography

We source the majority of our UI icons from Heroicons. This helps us to avoid inconsistency.

Link To Iconography

You can find the complete design system and guidelines from where Larsson was inspired to use it best. Design System

---

Guidelines

Installation

npm install @mojsx/larsson

Use case

Button

...
import { FlatButton } from "larsson/buttons";

...

const App = () => {
    return(
        <>
            <FlatButton
                content="White Button"
                href="https://github.com/mo-jsx/larsson"
                variant="primary"
            />
        </>
    )
}

export default App;

Result