https://github.com/bmcmahen/sancho

Responsive and accessible React UI components built with Typescript
https://github.com/bmcmahen/sancho

design-system javascript react react-components uikit

Last synced: 4 days ago
JSON representation

Responsive and accessible React UI components built with Typescript

• Host: GitHub
• URL: https://github.com/bmcmahen/sancho
• Owner: bmcmahen
• Created: 2019-02-25T20:50:06.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T08:26:04.000Z (about 2 years ago)
• Last Synced: 2025-02-01T02:59:59.441Z (9 days ago)
• Topics: design-system, javascript, react, react-components, uikit
• Language: TypeScript
• Homepage: https://sancho-ui.com
• Size: 4.54 MB
• Stars: 412
• Watchers: 5
• Forks: 33
• Open Issues: 52
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-list - sancho

README

        


  

    

  








  

[![npm package](https://img.shields.io/npm/v/sancho/latest.svg)](https://www.npmjs.com/package/sancho)

[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Sancho%20is%20a%20responsive%20and%20accessible%20design%20system%20built%20with%20React%2C%20Typescript%20and%20Emotion&url=https://sancho-ui.com&hashtags=react,design,javascript)

[![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social&logo=twitter)](

https://twitter.com/intent/follow?screen_name=benmcmahen

)




## Features

- Beautiful, generic components that you can make your own.

- Highly responsive. Sancho takes mobile seriously, with built in support for gestures.

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

- An ever-growing [list of components](https://sancho-ui.com).

[View the documentation](https://sancho-ui.com) 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.

```jsx

import { Button } from "sancho";

function MyApp() {

  return Hello world;

}

```

## Sample projects

### Julienne



  

    

  






[Julienne](https://julienne.app) is a small application built with Sancho and Firebase which helps you share recipes with family and friends. View the [source here](https://github.com/bmcmahen/julienne).

### Captioner



  

    

  






[Captioner](https://captioner.app) is an in-browser tool for generating captions for your videos. It's also built with Sancho and Firebase. View the [source here](https://github.com/bmcmahen/captioner).

## Development

```

git clone https://github.com/bmcmahen/sancho.git

cd sancho

yarn

yarn run storybook

```

## License

MIT