@loomhq/lens

Loom's Design System

Getting started

Installation

Add Lens to your app:

yarn add @loomhq/lens

Base styles

Add <BaseStyles /> component to your app, it injects global styles into the body tag. Place this component in a high level so it's always loaded in the app. Example:

import { BaseStyles } from "@loomhq/lens"

const App = () => (
  <div>
    <BaseStyles />
    <AppContent />
  </div>
)

Usage

Lens exports three types of contents:

• Components
• Variables
• Utilities

Import components

Example:

import { Text } from "@loomhq/lens"

Import variables

Example:

import { Text, colors } from "@loomhq/lens"

<Text color={colors.primary}>Button</Text>

Import utilities

Example:

import { getTextSize } from "@loomhq/lens"

const CustomComponent = styled.div`
  ${getTextSize('large')};
`

Running Locally

yarn
yarn start
navigate to: http://localhost:6006/