About Lens

Lens provides developers tools to build a modular and scalable front-end. Our goal is to write as little CSS as possible and reuse code as much as possible.

Consider reading Introduction to Lens and design systems.

Communication with designers

Lens bridges design and development by providing both the same components and styles. Design handoff becomes a conversation about what predefined patterns to use. Naming for components, styles and measurements is shared as well, so we can express decisions with a shared language, like for example: "Let's use ~~16px~~ space-medium".

Using components


Components list.


Import single or multiple components:

// single
import { Button } from '@loomhq/lens'
// multiple
import { Button, Checkbox, Text } from '@loomhq/lens'


const MyComponent = () => (
    <Checkbox />

Using CSS utility classes

Lens offers atomic CSS classes (or functional CSS), to give developers granular styling options. Each atomic CSS class contains a single declaration (except for few cases). Mixing these classes makes it easy to use Lens styles without writing custom CSS.

An example of an atomic CSS class:

// input class
// output declaration
padding-right: var(--lns-space-medium);


CSS utilities documentation.


<div className="p:medium mr:medium shadow:large">content</div>


See examples.

Using CSS variables


CSS variables documentation.


.myClass {
  font-size: var(--lns-fontSize-medium);
  line-height: var(--lns-lineHeight-medium);
  box-shadow: var(--lns-shadow-medium);
  padding: var(--lns-space-large);
  color: var(--lns-color-primary);


If you need to install Lens on a new project follow the Installation guidelines on GitHub readme.