/sancho

Responsive and accessible React UI components built with Typescript and Emotion

Primary LanguageTypeScript

Sancho is a responsive and accessible design system built with React, Typescript and Emotion. Named after the ever-faithful, hilariously acerbic sidekick of Don Quixote, Sancho is designed to help you no matter how quixotic your dreams may be.

npm package Tweet Follow on Twitter

Features

  • Beautiful, generic components that you can make your own.
  • Responsive and accessible.
  • A fully customizable theme, which includes a dark and light mode.
  • Fully typed for use with Typescript.
  • Support for tree shaking. Bundle only those components that you need.
  • Included components: Alert, Avatar, Badge, Breadcrumbs, Button, Collapse, Container, Dialog, Divider, Form (and inputs), IconButton, Icons, Layer, Link, List, Menu, Navbar, Popover, Sheet, Spinner, Table, Tabs, Text, Toast, Toolbar, Tooltip, amongst others.

View the documentation for full details.

Getting started

Install Sancho and Emotion using yarn or npm:

yarn add sancho @emotion/core @emotion/css

And import your desired components into your React project.

import { Button } from "sancho";

function MyApp() {
  return <Button>Hello world</Button>;
}

Sample projects

Julienne

Julienne screenshot showing a list of recipes on the left, and a recipe on the right.

Julienne is a small application built with Sancho and Firebase which helps you share recipes with family and friends. View the source here.

Captioner

Captioner screenshot showing a user adding subtitles to the Godfather movie.

Captioner is an in-browser tool for generating captions for your videos. It's also built with Sancho and Firebase. View the source here.

Development

git clone https://github.com/bmcmahen/sancho.git
cd sancho
yarn
yarn run storybook

License

MIT