Component library · UI kit

Prism

Name: Prism Tailwind UI kit
Brand: Templates.party
Availability: InStock

An airy, modern Tailwind CSS UI kit: 26 copy-ready component demos and 4 marketing blocks, with light and dark mode and design tokens.

Pay what you wantsuggested €29

Name your price Live demo

You choose the amount at checkout on Gumroad. Every order gets the same ZIP and its own license key.

By Templates.party

Illustrated preview of the Prism Tailwind UI kit

Live demo

Format: HTML + Tailwind
Components: 26 demos · 4 blocks
Themes: Light + dark
Tokens: Preset, CSS, JSON

What’s inside

26 components, 4 blocks, one preset

Open a component, switch to Code, press Copy and paste it into your project. Every piece is plain HTML with Tailwind classes, themed by one preset, so changing the brand scale re-colors the whole kit. Violet and soft glass on white, or deep ink in dark mode.

Foundations

Color scales, typography, radius and elevation, the building blocks every component uses.

Open in the demo

Buttons & forms

Button variants, sizes and states, inputs, selects, switches, sliders, a dropzone and a one-time code field.

Open in the demo

Cards & navigation

Pricing, profile, media and stat cards, a navbar, tabs, breadcrumbs, pagination and a stepper.

Open in the demo

Feedback & overlays

Alerts, progress, skeletons, toasts, an empty state, a modal dialog, dropdowns, tooltips and an accordion.

Open in the demo

Data & tokens

A table and avatars, plus the design tokens as a Tailwind preset, CSS variables and JSON.

Open in the demo

Marketing blocks

Hero, features bento, pricing and testimonials with a call to action, built from the same parts.

Open in the demo

Component groups

Foundations
Buttons & badges
Inputs & controls
Cards
Navigation
Feedback
Overlays & disclosure
Data display
Design tokens

Built in

Preview / Code tabs with a copy button on every component
Light and dark mode (class-based), following the system setting by default
Design tokens as a Tailwind preset, CSS custom properties and W3C JSON
Tailwind utility classes only: no hand-written CSS
Small optional script for tabs, dialog, dropdowns, toasts and the theme toggle
Animations are motion-safe, so they switch off with “reduce motion”

Palette & type

Brand#7C5CFF
Brand 700#6440E6
Brand 50#F4F1FF
Ink#0B0B14
White#FFFFFF

Geist + Geist Mono (self-hosted, OFL)

Change the brand scale in tokens/prism-preset.cjs and rebuild the CSS to re-theme every component. There’s no Figma file: import tokens.json with a plugin such as Tokens Studio.

In the ZIP

index.html (component library) and blocks.html (marketing blocks)
tokens/: Tailwind preset, CSS variables and tokens.json
assets/: compiled CSS, the optional prism.js, illustrations and Geist fonts
src/ and tailwind.config.cjs to rebuild the CSS
README with setup, theming and accessibility notes
LICENSE: commercial use, unlimited projects, client work

Sample content

The people, names, quotes, numbers and prices in the demos are sample content, and “Lumen” on the blocks page is a fictional product. Avatars are AI-generated and don’t show real people. Swap in your own copy and data when you use a component.

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

Every order comes with a license key, whatever amount you choose. The key unlocks MCP access, so AI assistants like Claude, ChatGPT or Cursor can read, customize and download the templates you own.

Keep exploring