Search
UI kit · 52 elements · 40 sections · 9 layouts

Dial UI Kit

A tactile UI kit with keys that press, knobs that turn, faders and LCD readouts: 52 elements, 40 sections and 9 page layouts as HTML + Tailwind CSS and typed React components, with light and dark tokens and a docs site.

View the live demoCheckout coming soon

By Templates.party

Illustrated preview of the Dial UI Kit UI kitLive demo
Formats
HTML + Tailwind, React + TS
Pieces
52 elements · 40 sections
Layouts
9 full pages
Price
Pay what you want, from €0
What’s inside

Elements, sections and full pages

Dial borrows from good hardware: raised keys that sink when you press them, knobs you can turn with a mouse, arrow keys or a drag, and glowing readouts that make numbers feel alive. Under the look it is plain Tailwind with one set of design tokens, so you can recolor everything from one file. Every piece comes as copy-paste HTML and as a typed React component, and the docs site shows each one live with its code.

Overview

The kit at a glance, with a live control surface you can play with.

Open in the demo (opens in a new tab)

Elements

All 52 elements live, each with its HTML and React code: keys, knobs, faders, inputs, LCDs and more.

Open in the demo (opens in a new tab)

Sections

40 ready sections: heroes, features, stats, testimonials, FAQ, footers, app shells and more.

Open in the demo (opens in a new tab)

Layouts

Nine complete pages to start from, each one opens on its own.

Open in the demo (opens in a new tab)

Page layouts in the kit

  1. Landing page
  2. Dashboard
  3. Settings
  4. Pricing
  5. Blog index
  6. Article
  7. Contact
  8. Sign in
  9. 404 page

Built in

  • 52 elements: buttons and keys, inputs, selects, switches, rotary knobs, faders, steppers, one-time code, LCD readouts, meters, tabs, menus, dialogs, toasts and more
  • 40 sections and 9 full page layouts, responsive from 360 px to 1440 px
  • Every piece as copy-paste HTML + Tailwind CSS and as a typed React + TypeScript component
  • Light and dark themes from one set of design tokens (CSS variables + Tailwind config)
  • Keyboard-accessible controls: knobs and faders work with arrow keys, Page Up/Down, Home and End
  • A docs site with search, live previews and HTML / React code tabs
  • Icons from Lucide (ISC) and free fonts included

Palette & type

  • Ink#15161A
  • Cobalt#3142D8
  • LCD green#8BE36B
  • Amber#F2A33A
  • Shell#ECE7DD
  • Night#121317

Archivo + JetBrains Mono (free, OFL; included)

The swatches are the kit’s default tokens. Change them in one file and every element follows, in light and dark.

In the ZIP

  • html/: every element, section and layout as HTML + Tailwind, plus the docs site
  • react/: 101 typed React + TypeScript components (Next.js App Router ready)
  • tokens/ and tailwind.config.cjs: light and dark design tokens
  • fonts/ and images/: the fonts and sample images
  • README, AGENTS.md and LICENSE-THIRD-PARTY
  • LICENSE: commercial use in unlimited projects, including client work

Sample content

All people, companies, numbers and messages in the demo are fictional sample content. Sample photos are AI-generated. Dial UI Kit is not affiliated with Tailwind Labs, React or Lucide. Use the kit in apps, sites and client work; just don’t resell the kit itself as a UI kit.

License

Pay what you want, once: no subscription. Use it for your own business or for client work, on unlimited projects. You can’t resell or redistribute it as a template. Full terms.

MCP access included

Whatever amount you choose, every order includes MCP access: sign in once with your email and AI assistants like Claude, ChatGPT or Cursor can read, customize and download your templates. New ones join the same connection on their own.

Keep exploring

More templates

Browse all

Ready to bring your ideas to life?

Every niche is on the guest list. Find the template that fits your next project.

Explore templates Browse categories