v0.1.0

Tiny Tells

Give your app’s status a face. Six tiny characters drop in anywhere a spinner would go.

Get Started

Meet the Cast

6 tells
5 states
0 dependencies
13.9 KB

Ship Sizes

Onion Skin

Guides

Play

Lab Notes

Make It Yours

Tells take five color tokens, one per state. Set them on :root or any container, and any you leave out keep the built-in color. Each needs 3:1 contrast against the surface behind it.

Read the Color Docs

Add Some Play

The play bundle adds two extras. Tells glance at your pointer as it passes, and five quick taps on one make it dance. This page runs it, so try it here.

import 'tiny-tells/play'; // instead of 'tiny-tells'

Watch It Dance

Read the Play Docs

In the Wild

Each tell, dropped into the kind of interface it’s best for. Pick a state and every example follows it.

Put One in Your App

Install once, then drop a tell next to any status text. Colors are optional.

Install
```
npm i tiny-tells
```
Self-hosting? See the docs.
Drop One In
Color, If You Want

Tells ship with colors that pass in light and dark. To use your own, set the five tokens from Make It Yours on :root. To draw in the text color instead, add color="current".
Pick Your Colors

Tiny TellsTıny Tells

The cast

Make It Yours

Add Some Play

In the Wild

Put One in Your App

Install

Drop One In

Color, If You Want

Tiny Tells