Introducing Sancho UI
Tags: react, webdev, design
Published: 2019-04-14 17:07:15

---
title: Introducing Sancho UI
published: true
tags: react, webdev, design
canonical_url: https://www.benmcmahen.com/introducing-sancho/
---

Sancho is an open source, responsive and accessible design system built with React, Typescript and Emotion. View the [documentation](http://sancho-ui.com) or check the code on [Github](https://github.com/bmcmahen/sancho).

  

<picture>
        <source srcset="https://www.benmcmahen.com/static/a611328a899a4d4863a29b09beec0acc/5f22d/preview.webp 300w,https://www.benmcmahen.com/static/a611328a899a4d4863a29b09beec0acc/a25b2/preview.webp 600w,https://www.benmcmahen.com/static/a611328a899a4d4863a29b09beec0acc/2e763/preview.webp 1200w,https://www.benmcmahen.com/static/a611328a899a4d4863a29b09beec0acc/b18bb/preview.webp 1800w,https://www.benmcmahen.com/static/a611328a899a4d4863a29b09beec0acc/07d7e/preview.webp 1885w" sizes="(max-width: 1200px) 100vw, 1200px" type="image/webp">
        <source srcset="https://www.benmcmahen.com/static/a611328a899a4d4863a29b09beec0acc/f2edc/preview.jpg 300w,https://www.benmcmahen.com/static/a611328a899a4d4863a29b09beec0acc/ec381/preview.jpg 600w,https://www.benmcmahen.com/static/a611328a899a4d4863a29b09beec0acc/8a8fe/preview.jpg 1200w,https://www.benmcmahen.com/static/a611328a899a4d4863a29b09beec0acc/8187b/preview.jpg 1800w,https://www.benmcmahen.com/static/a611328a899a4d4863a29b09beec0acc/eae0a/preview.jpg 1885w" sizes="(max-width: 1200px) 100vw, 1200px" type="image/jpeg">
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://www.benmcmahen.com/static/a611328a899a4d4863a29b09beec0acc/8a8fe/preview.jpg" alt="Sancho preview" title="Images of Julienne.app and Captioner.app, both built with Sancho.">
      </source></source></picture><figcaption>Images of Julienne.app and Captioner.app, both built with Sancho.</figcaption>

#### Sancho aims to provide a beautiful, generic set of components that you can make your own.

The primary goal of Sancho’s design is to provide a set of UI components which are beautiful and functional but generic enough to be used in most contexts, and extensible enough to be made your own.

I’ve found that many recent design systems are built with a particular project in mind with a unique, distinctive style, which makes it difficult to use without your work looking like an existing project. Something like Material-UI is really great, but its style is very much identifiable with the Google brand. Bootstrap has always struck me as different in this regard - it provides a beautiful, somewhat generic set of styles and components which work great out of the box but which can easily be altered. It feels like Bootstrap was made for you.

Sancho tries to replicate Bootstrap in this regard. Its design isn’t particularly distinctive and it implements many of my favourite ideas from existing design systems. It’s also meant to be extensible through a combination of [theming variables](https://sancho-ui.com/#theme) and component [composition techniques](https://sancho-ui.com/#styling%20and%20emotion).

#### Responsive design is really hard. Sancho makes it easier.

For various reasons, many react based design systems don’t make responsive design a priority. Sancho does its best to make mobile designs and touch interactions as good as possible. This comes out in some of the smaller details.

Sancho provides scroll locking in the appropriate context. Here’s an example of scrolling within a `Sheet`.

<video autoplay="true" loop="true">
  <source type="video/mp4" src="https://www.benmcmahen.com/prevent-scroll-3-e78ebb9ac8d547de753cfa80d866e444.m4v"></source>
</video>

Sancho provides a responsive popover which acts as a regular popover on larger screens, but turns into a bottom sheet on mobile devices.

<video autoplay="true" loop="true">
  <source type="video/mp4" src="https://www.benmcmahen.com/responsive-popover-03066fe18ee0fb9466ca7b856a1b3e21.m4v"></source>
</video>

Sancho’s tabs scroll into view on smaller screens.

<video autoplay="true" loop="true">
  <source type="video/mp4" src="https://www.benmcmahen.com/tabs-scroll-e5396f03107ba188e3579f9220aa65cb.m4v"></source>
</video>

The goal is to ensure that Sancho looks and _feels_ as good on touch devices as it does on the desktop, a goal which is often surprisingly and frustratingly difficult to achieve. Using Sancho components will hopefully make your life a bit easier.

#### Sancho has a dark mode.

Sancho provides a dark mode for all of its components which makes it relatively easy to build a dark and light mode version of your website.

<picture>
        <source srcset="https://www.benmcmahen.com/static/8cfb801de8621dfda5f77962e99b26f0/5f22d/dark-light-docs.webp 300w,https://www.benmcmahen.com/static/8cfb801de8621dfda5f77962e99b26f0/a25b2/dark-light-docs.webp 600w,https://www.benmcmahen.com/static/8cfb801de8621dfda5f77962e99b26f0/2e763/dark-light-docs.webp 1200w,https://www.benmcmahen.com/static/8cfb801de8621dfda5f77962e99b26f0/b18bb/dark-light-docs.webp 1800w,https://www.benmcmahen.com/static/8cfb801de8621dfda5f77962e99b26f0/74336/dark-light-docs.webp 1978w" sizes="(max-width: 1200px) 100vw, 1200px" type="image/webp">
        <source srcset="https://www.benmcmahen.com/static/8cfb801de8621dfda5f77962e99b26f0/f2edc/dark-light-docs.jpg 300w,https://www.benmcmahen.com/static/8cfb801de8621dfda5f77962e99b26f0/ec381/dark-light-docs.jpg 600w,https://www.benmcmahen.com/static/8cfb801de8621dfda5f77962e99b26f0/8a8fe/dark-light-docs.jpg 1200w,https://www.benmcmahen.com/static/8cfb801de8621dfda5f77962e99b26f0/8187b/dark-light-docs.jpg 1800w,https://www.benmcmahen.com/static/8cfb801de8621dfda5f77962e99b26f0/cdb9f/dark-light-docs.jpg 1978w" sizes="(max-width: 1200px) 100vw, 1200px" type="image/jpeg">
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://www.benmcmahen.com/static/8cfb801de8621dfda5f77962e99b26f0/8a8fe/dark-light-docs.jpg" alt="dark and light mode" title="The documentation demonstrates both light and dark mode">
      </source></source></picture><figcaption>The documentation demonstrates both light and dark mode</figcaption>

  

But perhaps more importantly, dark and light mode can be utilized at the same time on different portions of your website. This makes it easy to build something like a navigation bar which has a dark background and light themed components and text. Just wrap the relevant elements with the `DarkMode` component:

```
import { DarkMode } from 'sancho'

function App() {
  return (
    <div>
      <DarkMode>
        <NavigationBar />
      </DarkMode>
      <Container>
        <MainContent />
      </Container>
    </div>
  )
}
```

You can see this in action on the [toasted-notes](https://toasted-notes.netlify.com/) website which has a hero with a dark background and light text. Even buttons are subtly altered to provide greater contrast on dark backgrounds.

#### Sancho is built with Typescript, Emotion and React.

Sancho is fully typed because it’s built with Typescript. This means that your theme is typed which ensures that you only access a value that exists on your theme object.

```
/** @jsx jsx */
import { jsx } from '@emotion/core'
import { useTheme } from 'sancho'

function App() {
  const theme = useTheme()
  return (
    <div
      css={{
        background: theme.colors.background.tint1,
        fontSize: theme.sizes.giant, // typescript will tell you this doesn't exist
      }}
    >
      Hello world
    </div>
  )
}
```

I’ve found that using Emotion’s `css` prop in combination with typescript’s typing and VSCode’s autocomplete largely renders a `Box` component or something like [styled-system](https://github.com/styled-system/styled-system) unnecessary. Emotion’s `css` prop also makes it easy to compose styles and alter existing components.

```
/** @jsx jsx */
import { jsx } from '@emotion/core'
import { Alert, useTheme } from 'sancho'

function MyCustomAlert() {
  const theme = useTheme()
  return (
    <Alert
      title="This Alert has an altered appearance"
      css={{
        maxWidth: '300px',
        '& .Alert__bar': {
          display: 'none',
        },
        '& .Alert__content': {
          padding: theme.spaces.sm,
        },
      }}
    />
  )
}
```

#### Sancho supports tree shaking. Bundle only the components that you need.

It’s unlikely that you’ll need to use all of the components provided Sancho. Sancho is fully tree shakable which means that only those components that you use will be included in your final build.

If you import `Text` and `IconArrowRight` into a `create-react-app` bundled application, the final Sancho related build size is `8.4kb minified`.

#### Two open source projects built with Sancho.

[Julienne.app](http://julienne.app) is a little app for sharing recipes with family and friends. View the [source](https://github.com/bmcmahen/julienne).

<picture>
        <source srcset="https://www.benmcmahen.com/static/a318eac6b40ff885d922c07e77394dd1/5f22d/julienne-screenshot.webp 300w,https://www.benmcmahen.com/static/a318eac6b40ff885d922c07e77394dd1/a25b2/julienne-screenshot.webp 600w,https://www.benmcmahen.com/static/a318eac6b40ff885d922c07e77394dd1/2e763/julienne-screenshot.webp 1200w,https://www.benmcmahen.com/static/a318eac6b40ff885d922c07e77394dd1/ceff7/julienne-screenshot.webp 1400w" sizes="(max-width: 1200px) 100vw, 1200px" type="image/webp"></source>
        <source srcset="https://www.benmcmahen.com/static/a318eac6b40ff885d922c07e77394dd1/f2edc/julienne-screenshot.jpg 300w,https://www.benmcmahen.com/static/a318eac6b40ff885d922c07e77394dd1/ec381/julienne-screenshot.jpg 600w,https://www.benmcmahen.com/static/a318eac6b40ff885d922c07e77394dd1/8a8fe/julienne-screenshot.jpg 1200w,https://www.benmcmahen.com/static/a318eac6b40ff885d922c07e77394dd1/49b8b/julienne-screenshot.jpg 1400w" sizes="(max-width: 1200px) 100vw, 1200px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://www.benmcmahen.com/static/a318eac6b40ff885d922c07e77394dd1/8a8fe/julienne-screenshot.jpg" alt="Julienne in action" title="">
      </picture>

[Captioner.app](https://captioner.app/) provides a way to create subtitles for videos in your web browser. View the [source](https://github.com/bmcmahen/captioner).

<picture>
        <source srcset="https://www.benmcmahen.com/static/a3b4a15097f1aa8aae57bf392d3db592/5f22d/captioner-screenshot.webp 300w,https://www.benmcmahen.com/static/a3b4a15097f1aa8aae57bf392d3db592/a25b2/captioner-screenshot.webp 600w,https://www.benmcmahen.com/static/a3b4a15097f1aa8aae57bf392d3db592/2e763/captioner-screenshot.webp 1200w,https://www.benmcmahen.com/static/a3b4a15097f1aa8aae57bf392d3db592/ceff7/captioner-screenshot.webp 1400w" sizes="(max-width: 1200px) 100vw, 1200px" type="image/webp"></source>
        <source srcset="https://www.benmcmahen.com/static/a3b4a15097f1aa8aae57bf392d3db592/f2edc/captioner-screenshot.jpg 300w,https://www.benmcmahen.com/static/a3b4a15097f1aa8aae57bf392d3db592/ec381/captioner-screenshot.jpg 600w,https://www.benmcmahen.com/static/a3b4a15097f1aa8aae57bf392d3db592/8a8fe/captioner-screenshot.jpg 1200w,https://www.benmcmahen.com/static/a3b4a15097f1aa8aae57bf392d3db592/49b8b/captioner-screenshot.jpg 1400w" sizes="(max-width: 1200px) 100vw, 1200px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://www.benmcmahen.com/static/a3b4a15097f1aa8aae57bf392d3db592/8a8fe/captioner-screenshot.jpg" alt="Captioner in action" title="">
      </picture>

#### Further resources

- [Sancho on Github](https://github.com/bmcmahen/sancho)
- [Sancho-UI Documentation](http://sancho-ui.com)
- [Julienne](http://julienne.app)
- [Captioner](http://captioner.app)
- [Toasted notes](https://toasted-notes.netlify.com/)

(This is an article posted to my blog at benmcmahen.com. You can read it online by [clicking here](https://www.benmcmahen.com/introducing-sancho/).)