← back to the mat

every scrap on the table.

the full surface of scraps-ui, rendered live by the real library.

01 · buttons

Scissor-cut, every colour

Torn override, every colour

States

02 · chips

Cut

Torn

03 · cards

04 · fields

Text inputs, colour sweep

Textarea, select, range

textarea · kraft

select · marigold

range · kraft track

range · coral track

05 · checkboxes, radios & toggles

Checkbox

Radio

Toggle

06 · progress

Values on a white track

Every fill at 60%

07 · dividers

08 · tear lab

specimen

tear amplitude · 3px crookedness · ±3° drag either control, then hover the specimen: every value on this page is live library behaviour, not artwork.

10 · dialog & sheet

real <dialog> elements: focus trapping, esc, and ::backdrop come from the browser. the paper re-tears on every open.

11 · menu & tooltip

hover me for a tooltip

any element with data-tip grows a tooltip; any button with data-menu opens a paper menu.

12 · tabs

left-handed pairs available on request. the active tab straightens up and turns white, like a folder tab pulled forward.

glue sticks only. rubber cement stays in the drawer.

every card on this page is one strip of tape away from falling off the mat.

13 · accordion

why native details elements?

keyboard and screen-reader behaviour for free, and the paper re-tears when the size changes. open and close this a few times.

does the paper notice?

the ResizeObserver repaints the tear on every toggle, so yes: opening an accordion is also tearing paper.

14 · table

stock	weight	tears	verdict
construction	86 gsm	beautifully	the default
kraft	120 gsm	stubbornly	for parcels
newsprint	45 gsm	too easily	stolen anyway
cardstock	250 gsm	barely	fancy

15 · avatar & skeleton

Torn photos

Loading paper

skeletons keep slowly re-tearing while they wait. reduced motion turns that off.

16 · toast & alert

toasts glue themselves to the corner, then peel away. click one to dismiss it early.

mind the edges. alerts are kraft paper with tape and a role, nothing more.

17 · patterns

Breadcrumb: chips and a pencil slash

/ / construction

Pagination: the current page is the white scrap

no components needed: chips compose into breadcrumbs and pagination on their own.

18 · custom colours

Scraps.registerColors({
  rose:  '#C4587A',
  moss:  '#5E7348',
  night: { fill: '#1C2733', text: '#F6F1E4' },
})

registered names become data-color values (and color props in react). the stock palette stays themeable through the --sc-* custom properties.

Tailwind v4

@import "tailwindcss";
@import "scraps-ui/tailwind.css";

@theme {
  /* your tokens become the paper: this recolors
     bg-scrap-coral AND every coral scrap */
  --color-scrap-coral: #FF5088;
}

shadcn

npx shadcn@latest add https://scraps.ogme01.com/r/scraps.json

copies the typed react components into your project (components/ui, lib/scraps-core.ts) with scraps-ui as the engine dependency. single components: /r/scrap-button.json and friends.

19 · the whole api