A collection of clever yet understated user interactions found on the web
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Subtle UI

A collection of clever yet understated user interactions found on the web. This project uses React to keep the example code simple and brief.

How To Contribute

  1. Create a new markdown file in the content folder. For example my-cool-example.md.
  2. Add the following front matter attributes:
title: My Cool Example
date: 2018-08-31
author: John Doe
github: johndoe123
  1. Add your example code and relevant content using markdown syntax.
  2. Submit a pull request with the new markdown file.
  3. Once merged into master the website will automatically deploy to https://subtle-ui.netlify.com. 🎉

Important Note: This project uses a custom component to render markdown code blocks as live code including a preview. There are a few unique characteristics to be aware of:

  • Code blocks are configured with React and Styled Components already in the scope.
  • Code blocks should be written as imperative code and you need to call render with your JSX elements at the bottom.
  • You may use ES6 syntax if desired as code is transpiled via Babel.
  • At this time there is no way to import other external libraries. If you have any questions or need additional functionality please file an issue.


npm run develop - See a local version of the website on http://localhost:8000

npm run prod - See a production version of the website on http://localhost:9000