Premium UI Kit

OverNormal UI Kit

25+ production-ready components built with Tailwind CSS v4, Alpine.js, and Lucide Icons. Dark mode, responsive, and portable.

Typography

Headings, body text, and text utilities

Display Heading

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lead paragraph — a slightly larger body text used for introductions and key descriptions to draw the reader in.

Regular body text. The quick brown fox jumps over the lazy dog. This demonstrates the default paragraph styling with comfortable line height and spacing.

Small text — useful for captions, helper text, and secondary information.

inline code Ctrl+K highlighted
“Design is not just what it looks like and feels like. Design is how it works.”
— Steve Jobs

Buttons

Primary, outline, ghost, danger, sizes, groups

Variants

Sizes

With Icons

Loading

Button Group

Cards

Default, glass, gradient, stat, pricing

Default Card

A clean card with subtle hover effects. Uses CSS variables for theme-aware colors.

Glass Card

Frosted glass effect with backdrop-blur. Great for overlays and floating elements.

Gradient Border

Eye-catching gradient border using the padding + inner background trick.

Image Card

Card with image header. Replace gradient with actual image via bg-cover.

Stat Cards

12,847
Total Users
+23.5%
Growth Rate
99.9%
Uptime

Pricing Card

Starter

$9/mo
  • 5 Projects
  • 10 GB Storage
  • Email Support
Popular

Pro

$29/mo
  • Unlimited Projects
  • 100 GB Storage
  • Priority Support

Enterprise

$99/mo
  • Everything in Pro
  • Unlimited Storage
  • Dedicated Account Mgr

Badges & Tags

Color variants, pills, dots, removable

Color Variants

Primary Info Success Warning Danger

Pills

New Active Pending Archived

Dot Indicators

Online Away Offline

Removable Tags

Avatars

Sizes, initials, groups, status

Sizes

S
M
L
XL

Avatar Group

A
B
C
D
+3

With Status

JD
AK
MR

Alerts

Info, success, warning, error, dismissible

Info

This is an informational alert with helpful details.

Success

Operation completed successfully. Your changes have been saved.

Warning

Please review the changes before proceeding. This action may have side effects.

Error

Something went wrong. Please try again or contact support.

Dismissible Alert

Click the X to dismiss this alert using Alpine.js.

Forms

Inputs, selects, toggles, validation states

Email is available

Please enter a valid email address

Tables

Responsive, striped, hover highlight

Name Role Status Actions
Alice Chen Designer Active
Bob Smith Developer Active
Carol Davis PM Away
Dan Wilson Marketing Offline

Progress

Bars and circular indicators

Storage72%
Upload45%
Complete100%

Circular

72%
100%

Tabs

Underline and pill variants

This is the overview panel. It provides a high-level summary of the product.

Feature list: Dark mode, responsive design, theme customization, and more.

Tech specs: Tailwind CSS v4, Alpine.js 3.x, Lucide Icons, PHP 8.2 templates.

Showing all items across all categories.

Filtered to design-related items only.

Filtered to code-related items only.

Accordion

Collapsible sections with smooth transitions

A premium, portable component library with 25+ component types built with Tailwind CSS v4 and Alpine.js. Drop it into any PHP project.

No. It uses Tailwind CSS via CDN and Alpine.js via CDN. No Node.js, no webpack, no build pipeline. Just PHP includes.

Write HTML with Tailwind classes and Alpine.js attributes. No CSS files to maintain, no JS files to create. Copy-paste from here and customize.

Toast

Auto-dismissing notifications

Stats

Number + label grid

48K+
Downloads
4.9
Rating
2,300+
Active Users
25+
Components

Timeline

Vertical event timeline

April 2026

UI Kit v1.0 Released

25+ components, Tailwind CSS v4, Alpine.js, dark mode support.

March 2026

Template System Created

Layout templates, header configs, shared CSS design system.

February 2026

OverNormal Studios Launch

Main site, ON Player, ON Finish - the creative media platform begins.

Testimonials

Quote cards with avatars

“The cleanest component library I've used. Drop it in, customize with Tailwind classes, done. No wrestling with CSS overrides.”

SK
Sarah Kim
Frontend Developer

“Finally a template that doesn't force a build pipeline. PHP includes + Tailwind CDN + Alpine.js = perfect for rapid prototyping.”

JR
James Rivera
Full-Stack Engineer

Skeleton

Loading placeholders

Dividers

Horizontal rules, labeled, gradient

Simple

With Label

OR

Gradient Fade

Tooltips

CSS-only hover tooltips

Code Blocks

Styled code with copy button

PHP 
$pageConfig = [
    'title'    => 'My App',
    'tailwind' => true,
    'alpine'   => true,
    'lucide'   => true,
];
require 'templates/layout-start.php';

Empty States

Placeholder for no-data scenarios

No items yet

Get started by creating your first project.

Pagination

Page navigation controls

Keyboard Shortcuts

Key display elements

Ctrl K
Command palette
Ctrl Shift P
Search files
Esc Close modal