https://github.com/divriots/starter-stitches

Using stitches.dev
https://github.com/divriots/starter-stitches

Last synced: 12 days ago
JSON representation

Using stitches.dev

• Host: GitHub
• URL: https://github.com/divriots/starter-stitches
• Owner: divriots
• License: mit
• Created: 2021-12-21T19:11:10.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-03-31T11:54:11.000Z (about 4 years ago)
• Last Synced: 2026-02-19T11:38:28.534Z (4 months ago)
• Language: TypeScript
• Homepage: https://backlight.dev/doc/oDcLTC4uuKc9dEF5lbrz
• Size: 22.5 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![backlight.dev](https://img.shields.io/badge/Open%20in-Backlight.dev%20editor-%23f8c307)](https://backlight.dev/review/oDcLTC4uuKc9dEF5lbrz)

[![Github Repo](https://img.shields.io/github/last-commit/divriots/starter-stitches)](https://github.com/divriots/starter-stitches)

# Stitches Tech Sample 
_by_ ‹div›RIOTS

This is a _Technology Sample_ you can rely on to build your own Design System, based on [Stitches](https://stitches.dev/).

**Disclaimer**: _Technology Samples_ aren't comprehensive _Design Systems_ but showcases a given technology so you free to build you own solution upon it.

## Architecture

This _tech sample_ uses [Stitches](https://stitches.dev/) to implement its components. Stitches is a CSS-in-JS tool, based on the [System UI](https://system-ui.com/) [Theme Specification](https://system-ui.com/theme), allowing you to set tokens, themes, as well as extending them for your components and their variants.

### Tokens

The Tokens are split in different components, following the SystemUI [Theme Specification](https://system-ui.com/theme). They are then merged into a Stitches configuration in the `stitches` component.

## Documentation

Documentation pages are using the [@divriots/dockit-react](https://github.com/divriots/dockit-react) documentation framework to preview the different tokens and components. See the `layout` component.

---

## Resources

- [Stitches](https://stitches.dev/)

- [System UI](https://system-ui.com/)

- [Coding Design System - Stitches - Part.1](https://youtu.be/Skwuw6-C1SE): Live Coding session showing the implementation of this Starter Kit