Kettle UI by Apurva

Foundations

Install

Kettle UI is a shadcn registry. The CLI copies each component into your project with its npm packages, the colour tokens and the keyframes it needs, so you own the code and can edit it.

1
Set up shadcn
Skip this if your project already has a components.json.
```
npx shadcn@latest init
```

2

Add the registry

Put this in components.json so you can use the short @kettle names.

// components.json
{
  "registries": {
    "@kettle": "https://raw.githubusercontent.com/apurvamukherjee/kettle-ui/main/public/r/{name}.json"
  }
}

3
Add components
One at a time, or everything at once with kettle-all.
```
npx shadcn@latest add @kettle/pill-button @kettle/cursor
```

4

Or skip step 2

Every item also installs straight from its URL.

npx shadcn@latest add https://raw.githubusercontent.com/apurvamukherjee/kettle-ui/main/public/r/kettle-all.json

The display and mono fonts are Bricolage Grotesque and Fragment Mono. Load them with next/font and set the--font-bricolage and --font-fragment-monovariables, or the theme falls back to system fonts. PillButton uses next/link, so it needs Next.js. Everything else is plain React.

Foundations

Colours

Most surfaces are paper and ink, and each accent colour has its own job. Tap a swatch to copy its hex, or the token name to copy the CSS variable.

Brand palette

PaperPage background, milky tea

Paper 2Secondary surface, muted

InkText, outlines, hard shadows

TeaSuccess, nature, primary accent

Tea DeepIllustration shade, pressed states

TunesFocus ring, loud CTAs

StringsPlayful highlights

LilacMountains, calm accents

SunEyebrows, selection, badges

SkyIllustration skies, info

Semantic

CardRaised surfaces

Muted textCaptions, secondary copy

DestructiveErrors, invalid fields

Tokens

Every colour is a CSS variable mapped into Tailwind's theme.

:root {
  --paper: #fbf6ea;   --paper-2: #f3ead4;
  --ink: #1a1714;
  --tea: #1fa34a;     --tea-deep: #0f6b30;
  --tunes: #ff4b1f;   --strings: #ff4fb8;
  --lilac: #8a7cff;   --sun: #ffd43b;
  --sky: #7fd1f5;
}

@theme inline {
  --color-paper: var(--paper);
  --color-ink: var(--ink);
  --color-tunes: var(--tunes);
  /* …one per token → bg-tunes, text-ink, border-ink */
  --shadow-hard: 4px 4px 0 0 var(--ink);
  --shadow-hard-lg: 8px 8px 0 0 var(--ink);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

Foundations

Typography

Three families: a variable display grotesque, a warm sans for reading and a mono for labels.

Type families

Aa Tea

Bricolage Grotesque · Display

Aa Steeped slowly

Manrope · Body

Aa 0123

Fragment Mono · Labels

import { Bricolage_Grotesque, Manrope, Fragment_Mono } from "next/font/google";

const display = Bricolage_Grotesque({ variable: "--font-bricolage", subsets: ["latin"], axes: ["opsz", "wdth"] });
const sans = Manrope({ variable: "--font-manrope", subsets: ["latin"] });
const mono = Fragment_Mono({ variable: "--font-fragment-mono", subsets: ["latin"], weight: "400" });

<h1 className="font-display font-extrabold uppercase">Kettle UI</h1>
<p className="font-sans">Body copy in Manrope.</p>
<span className="font-mono uppercase tracking-widest">Eyebrow</span>

Display

clamp(3.75rem, 15vw, 10.5rem)

Steep it slowly

H1

4.5rem / 0.9

Steep it slowly

H2

2.25rem

Steep it slowly

H3

1.5rem

Steep it slowly

Body

1.125rem / 1.6

Steep it slowly

Caption

0.75rem mono

Steep it slowly

Foundations

Shadows & Motion

Shadows are solid ink offsets with no blur. Elements lift on hover and press flat when tapped.

Elevation

Hover or tap the tiles.

<div className="rounded-[2rem] border-2 border-ink shadow-hard" />
<div className="rounded-[2rem] border-2 border-ink shadow-hard-lg" />

{/* the lift-and-press interaction used everywhere */}
<button className="border-2 border-ink shadow-hard transition-[transform,box-shadow]
  hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-hard-lg
  active:translate-x-1 active:translate-y-1 active:shadow-none" />

--ease-bounce

cubic-bezier(0.34, 1.56, 0.64, 1)

Hover or press the card

--ease-out-expo

cubic-bezier(0.16, 1, 0.3, 1)

Hover or press the card

Components

Pill Button

Chunky pill with a hard shadow. A second colour floods up on hover and the arrow hops out and back in. Renders a Next.js Link when given an href.

Tones

import { PillButton } from "@/components/kit/PillButton";

<PillButton tone="ink">Get tickets</PillButton>
<PillButton tone="tea">Register</PillButton>
<PillButton tone="tunes">Watch live</PillButton>
<PillButton tone="strings">Line-up</PillButton>
<PillButton tone="sun">Explore</PillButton>
<PillButton tone="paper" arrow={false}>Plain</PillButton>
<PillButton href="https://example.com">External link</PillButton>

Components

Chip

Tilted mono eyebrow for section labels, statuses and tags.

Tones

ScheduleOpenSold outNewBetaInfoInk

import { Chip } from "@/components/kit/Chip";

<Chip>Schedule</Chip>
<Chip tone="tea">Open</Chip>
<Chip tone="tunes" tilt={false}>Sold out</Chip>

Components

Field

Labelled input with an ink outline. Lifts on focus; turns red with a message when invalid.

States

Type a bad email to see the error state.

Your name

Email

We only send product updates.

Disabled

import { Field } from "@/components/kit/Field";

<Field label="Your name" placeholder="Alex Rivera" />
<Field
  label="Email"
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  hint="We only send product updates."
  error={invalid ? "That doesn't look like an email yet." : undefined}
/>

Components

Event Card

Poster card. On hover a colour wash floods up and the description slides in. On touch screens the description is always shown.

Accents

Live Session

An evening of loud guitars and louder crowds.

Register →

Trail Run

Morning trails, fresh air and a finish-line breakfast.

Register →

Makers Lab

A stage for creators and digital storytellers.

Register →

import { EventCard } from "@/components/kit/EventCard";

<EventCard
  title="Live Session"
  accent="var(--tunes)"
  image="/posters/live-session.jpg"
  desc="An evening of loud guitars and louder crowds."
  footer={<Chip tone="paper">Register</Chip>}
/>

Components

Polaroid

Instant-photo frame with a caption strip. Drop any image, video or illustration in.

Frame

☕

Studio ✶ Day 1

⛰

Rooftop ✶ Sunrise

import { Polaroid } from "@/components/kit/Polaroid";

<Polaroid caption="Studio ✶ Day 1" className="rotate-2">
  <img src="/photo.jpg" alt="" className="size-full object-cover" />
</Polaroid>

Components

Sticker

Springs in tilted, idles with a gentle bob and, on mouse devices, can be dragged and snaps home when let go.

Draggable

Grab one with your mouse.

Brewed fresh ☕

Live
music

Limited ed.

import { Sticker } from "@/components/motion/Sticker";

{/* springs in, idles with a bob, drag it and it snaps home (mouse only) */}
<Sticker rotate={-10}>
  <div className="rounded-full border-2 border-ink bg-sun px-5 py-3 font-display font-extrabold shadow-hard">
    Brewed fresh ☕
  </div>
</Sticker>

Components

Marquee

Infinite ticker. On desktop its speed and direction react to scroll velocity and it slows on hover; on touch screens it is a pure CSS animation.

Ticker

Scroll the page to push it.

Tea ✶ Tunes ✶ Strings ✶

Kettle UI · by Apurva · Kettle UI · by Apurva ·

import { Marquee } from "@/components/motion/Marquee";

{/* scroll-velocity aware on desktop, pure CSS on touch screens */}
<Marquee baseVelocity={-4} className="border-y-2 border-ink bg-sun py-4">
  <span className="mx-6 font-display text-4xl font-extrabold uppercase">Tea ✶ Tunes ✶ Strings ✶</span>
</Marquee>

Components

Section Heading

Eyebrow chip, a giant word-by-word masked reveal title and an optional subtitle. Pass objects to colour single words.

Split reveal

Schedule

Event Itinerary

Five days of talks, workshops and good coffee.

import { SectionHeading } from "@/components/kit/SectionHeading";

<SectionHeading
  eyebrow="Schedule"
  title={["Event", { text: "Itinerary", className: "text-tunes" }]}
  subtitle="Five days of talks, workshops and good coffee."
/>

Components

Reveal & Stagger

Scroll-triggered entrances that run on the compositor, so they stay smooth on iOS.

Entrances

Fades up on scroll

import { Reveal, Stagger } from "@/components/motion/Reveal";

<Reveal y={40}>
  <p>Fades up on scroll</p>
</Reveal>

<Stagger className="grid grid-cols-4 gap-3" stagger={0.1}>
  <Tile /><Tile /><Tile /><Tile />
</Stagger>

Pointers

Cursors

Six custom cursors plus the native one. The one you pick here follows you around the whole site. Mark any element with data-cursor="Label" and the cursor turns into that label over it.

Pick a cursor

Custom cursors only run with a mouse or trackpad. On touch screens the native behaviour stays as it is.

Now usingLeaf PickMove around in here.

HoverViewdata-cursor="View"Over this box Leaf Pick turns into the label.

ClickTap in hereThe pick flips and presses down.

import { Cursor } from "@/components/cursor/Cursor";

// once, in your root layout
<Cursor variant="ring" />   // "leaf" | "ring" | "blob" | "trail" | "spark" | "kettle"

// anywhere: the cursor becomes a label over this element
<a href="/work" data-cursor="View">Case study</a>

Illustrations

Hero Scene

The animated hero illustration: a toy train crossing rolling green hills below a snowy peak, with drifting clouds, steam puffs and a cup of tea playing tunes. Every loop pauses while off-screen.

Scene

Pure SVG, coloured entirely by tokens, so it re-themes with the palette.

✶ 400 × 300 viewBox, scales to any box
✶ Transform-string animations (GPU)
✶ on prop pauses everything
✶ Labelled for screen readers

import { HeroScene } from "@/components/illustrations/HeroScene";
import { useOnScreen } from "@/components/motion/useOnScreen";

function Hero() {
  const [ref, on] = useOnScreen();   // pauses every loop while off-screen
  return (
    <div ref={ref} className="relative aspect-[4/3] overflow-hidden rounded-2xl">
      <HeroScene on={on} />
    </div>
  );
}

Illustrations

Toy Train

The little engine on its own: chugging bob, spinning wheels and smoke puffs, all in CSS.

Engine

import { ToyTrain } from "@/components/illustrations/ToyTrain";

{/* pure CSS animation, needs the .toy-train keyframes from globals.css */}
<ToyTrain className="h-16" />

Illustrations

Train Stepper

Ticket-stub tabs with the toy train springing along the track to the selected stop. Use it for itineraries or multi-step forms.

Itinerary

Pick a step.

Next stop → Plan

import { TrainStepper } from "@/components/illustrations/TrainStepper";

const stops = [
  { label: "Plan", caption: "Step 01" },
  { label: "Board", caption: "Step 02" },
  { label: "Arrive", caption: "Step 03" },
];

const [stop, setStop] = useState(0);
<TrainStepper stops={stops} value={stop} onChange={setStop} />

KettleUI.

Install

Set up shadcn

Add the registry

Add components

Or skip step 2

Colours

Brand palette

Semantic

Tokens

Typography

Type families

Shadows & Motion

Elevation

Pill Button

Tones

Chip

Tones

Field

States

Event Card

Accents

Live Session

Trail Run

Makers Lab

Polaroid

Frame

Sticker

Draggable

Marquee

Ticker

Section Heading

Split reveal

Event Itinerary

Reveal & Stagger

Entrances

Cursors

Pick a cursor

Hero Scene

Scene

Toy Train

Engine

Train Stepper

Itinerary