LogoReactUI Library
HomeComponentsShowcaseThemesNServicesNNextGenNPricingContact

Resources

GalleryUI screenshots & inspirationBlogArticles & tutorialsDocumentationGuides & API referenceAboutCompany, mission & teamExamplesReal-world code examples
  1. Home
  2. /Showcase
  3. /Neumorphism
R
ReactUI

A comprehensive React component library with beautiful design, accessibility, and developer experience in mind.

Product

  • Components
  • Documentation
  • Examples
  • Buttons
  • Cards

Resources

  • Getting Started
  • Installation
  • Theming
  • API Reference
  • Free PDF & Image Tools

Community

  • About Us
  • GitHub
  • Discord
  • Twitter

© 2026 ReactUI Library. All rights reserved.

Privacy PolicyTerms of ServiceRefund Policy
Showcase
UI Library

Neumorphism

Soft · Embossed · Tactile

25
Total
25
Visible

Filter by type

✦ Unlock All Pro

Neumorphism

Soft shadows, embossed surfaces, clay-like depth, and tactile interfaces without flat design.

25
components

Light Neumorphic Buttons

Classic neumorphic buttons on a light background — regular, pressed, pill, and icon variants.

T
light-neumorphic-buttons.tsx
1<div class="flex flex-wrap items-center gap-5 bg-[#e0e5ec] p-6 rounded-2xl">
2 <!-- Default -->
3 <button class="rounded-xl bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-slate-600 active:scale-95"
4 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
5 Default
6 </button>
7 <!-- Pressed -->
8 <button class="rounded-xl bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-slate-500"
9 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
10 Pressed
11 </button>
12 <!-- Pill -->
13 <button class="rounded-full bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-indigo-500 active:scale-95"
14 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
15 Pill Shape
16 </button>
17 <!-- Icon -->
18 <button class="flex h-11 w-11 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
19 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
20 ⚙
21 </button>
22</div>
⬡ UIDrop Component22 lines
TypeScript ReactUTF-8

Dark Neumorphic Buttons

Soft UI buttons on dark background with indigo accent variant.

T
dark-neumorphic-buttons.tsx
1<div class="flex flex-wrap items-center gap-5 bg-[#1a1f2e] p-6 rounded-2xl">
2 <button class="rounded-xl bg-[#1a1f2e] px-7 py-3 text-sm font-semibold text-slate-300 active:scale-95"
3 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">
4 Default
5 </button>
6 <button class="rounded-xl bg-[#1a1f2e] px-7 py-3 text-sm font-semibold text-slate-400"
7 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #0d1117,inset -4px -4px 8px #272d3d">
8 Pressed
9 </button>
10 <button class="rounded-xl bg-[#1a1f2e] px-7 py-3 text-sm font-semibold text-indigo-400 active:scale-95"
11 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">
12 Accent
13 </button>
14 <button class="rounded-full bg-[#1a1f2e] px-7 py-3 text-sm font-semibold text-violet-400 active:scale-95"
15 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">
16 Pill
17 </button>
18</div>
⬡ UIDrop Component18 lines
TypeScript ReactUTF-8

Button States

Default, hover, active/pressed, and disabled states in light neumorphism.

T
button-states.tsx
1<!-- Default -->
2<button class="rounded-xl bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-slate-600"
3 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">Default</button>
4<!-- Hover -->
5<button class="rounded-xl bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-slate-600 hover:scale-105 transition-all"
6 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">Hover</button>
7<!-- Active/Pressed -->
8<button class="rounded-xl bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-slate-500"
9 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">Active</button>
10<!-- Disabled -->
11<button class="rounded-xl bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-slate-400 opacity-40 cursor-not-allowed"
12 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff" disabled>Disabled</button>
⬡ UIDrop Component12 lines
TypeScript ReactUTF-8

Icon Action Buttons

Circular neumorphic icon buttons — play, pause, skip, volume, and heart.

T
icon-action-buttons.tsx
1<div class="flex flex-wrap gap-5 bg-[#e0e5ec] p-6 rounded-2xl">
2 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
3 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">▶</button>
4 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
5 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">⏸</button>
6 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
7 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">⏭</button>
8 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
9 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">⏮</button>
10 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
11 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">🔊</button>
12 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
13 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">♥</button>
14</div>
⬡ UIDrop Component14 lines
TypeScript ReactUTF-8

Neumorphic Cards

Monthly Revenue

$48,290

75% of target

Active Users

12,540

50% of goal

Light and dark card variants with metric values and progress indicators.

T
neumorphic-cards.tsx
1<!-- Light Card -->
2<div class="rounded-2xl bg-[#e0e5ec] p-6" "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
3 <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">Monthly Revenue</p>
4 <p class="mt-2 text-3xl font-extrabold text-slate-700">$48,290</p>
5 <div class="mt-4 h-2 rounded-full bg-[#e0e5ec]"
6 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
7 <div class="h-2 w-3/4 rounded-full bg-indigo-400"></div>
8 </div>
9 <button class="mt-4 w-full rounded-xl bg-[#e0e5ec] py-2 text-sm font-semibold text-indigo-500"
10 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">View Report</button>
11</div>
⬡ UIDrop Component11 lines
TypeScript ReactUTF-8

Profile Card

🧑

Arjun Sharma

Senior UI Engineer

124

Posts

4.2K

Followers

312

Following

Soft UI profile card with circular avatar, stats, and action buttons.

T
profile-card.tsx
1<div class="w-full max-w-xs rounded-3xl p-7 bg-[#e0e5ec]"
2 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
3 <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-[#e0e5ec] text-4xl"
4 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">🧑</div>
5 <h3 class="mt-4 text-center text-lg font-bold text-slate-700">Arjun Sharma</h3>
6 <p class="text-center text-sm text-slate-400">Senior UI Engineer</p>
7 <div class="mt-5 grid grid-cols-3 gap-3">
8 <div class="rounded-xl py-3 text-center bg-[#e0e5ec]"
9 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
10 <p class="text-base font-bold text-slate-700">124</p>
11 <p class="text-xs text-slate-400">Posts</p>
12 </div>
13 <!-- repeat for Followers, Following -->
14 </div>
15 <div class="mt-5 flex gap-3">
16 <button class="flex-1 rounded-xl bg-[#e0e5ec] py-2 text-sm font-semibold text-indigo-500"
17 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">Message</button>
18 <button class="flex-1 rounded-xl bg-[#e0e5ec] py-2 text-sm font-semibold text-slate-500"
19 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">Follow</button>
20 </div>
21</div>
⬡ UIDrop Component21 lines
TypeScript ReactUTF-8

Music Player Card

🎵

Midnight Drift

Lo-fi Collective

1:453:20
🔊

Dark neumorphic music player with album art, controls, and progress slider.

T
music-player-card.tsx
1<div class="w-full max-w-xs rounded-3xl bg-[#1a1f2e] p-7"
2 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">
3 <div class="mx-auto h-36 w-36 rounded-2xl flex items-center justify-center text-5xl"
4 "color:#79c0ff">style="background:linear-gradient(135deg,#667eea,#764ba2)">🎵</div>
5 <div class="mt-5 text-center">
6 <h3 class="text-lg font-bold text-slate-200">Midnight Drift</h3>
7 <p class="text-sm text-slate-500">Lo-fi Collective</p>
8 </div>
9 <div class="mt-4 rounded-full p-1 bg-[#1a1f2e]"
10 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #0d1117,inset -4px -4px 8px #272d3d">
11 <div class="h-2 w-2/3 rounded-full bg-gradient-to-r from-indigo-400 to-violet-500"></div>
12 </div>
13 <div class="mt-5 flex items-center justify-center gap-5">
14 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#1a1f2e] text-slate-400"
15 "color:#79c0ff">style="box-shadow:6px 6px 12px #0d1117,-6px -6px 12px #272d3d">⏮</button>
16 <button class="flex h-14 w-14 items-center justify-center rounded-full bg-[#1a1f2e] text-xl text-indigo-400"
17 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">▶</button>
18 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#1a1f2e] text-slate-400"
19 "color:#79c0ff">style="box-shadow:6px 6px 12px #0d1117,-6px -6px 12px #272d3d">⏭</button>
20 </div>
21</div>
⬡ UIDrop Component21 lines
TypeScript ReactUTF-8

Neumorphic Login Form

Welcome Back

Sign in to your account

Forgot password?

Sunken inset inputs with raised submit button on a soft light background.

T
neumorphic-login-form.tsx
1<div class="w-full max-w-sm rounded-3xl bg-[#e0e5ec] p-8"
2 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
3 <h3 class="text-center text-xl font-bold text-slate-700">Welcome Back</h3>
4 <div class="mt-6 space-y-4">
5 <input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="you@example.com"
6 class="w-full rounded-xl bg-[#e0e5ec] px-4 py-3 text-sm text-slate-600 placeholder-slate-400 outline-none"
7 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff" />
8 <input "color:#79c0ff">type="password" "color:#79c0ff">placeholder="••••••••"
9 class="w-full rounded-xl bg-[#e0e5ec] px-4 py-3 text-sm text-slate-600 placeholder-slate-400 outline-none"
10 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff" />
11 <button class="mt-2 w-full rounded-xl bg-[#e0e5ec] py-3 text-sm font-bold text-indigo-500 active:scale-95"
12 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">
13 Sign In
14 </button>
15 </div>
16</div>
⬡ UIDrop Component16 lines
TypeScript ReactUTF-8

Search Input

🔍
🔍

Neumorphic search field in both light and dark variants with inset styling.

T
search-input.tsx
1<!-- Light search -->
2<div class="flex items-center gap-3 rounded-full bg-[#e0e5ec] px-5 py-3"
3 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
4 <span class="text-slate-400">🔍</span>
5 <input "color:#79c0ff">placeholder="Search components..."
6 class="flex-1 bg-transparent text-sm text-slate-600 placeholder-slate-400 outline-none" />
7</div>
8<!-- Dark search -->
9<div class="flex items-center gap-3 rounded-full bg-[#1a1f2e] px-5 py-3"
10 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #0d1117,inset -4px -4px 8px #272d3d">
11 <span class="text-slate-500">🔍</span>
12 <input "color:#79c0ff">placeholder="Search in dark mode..."
13 class="flex-1 bg-transparent text-sm text-slate-300 placeholder-slate-600 outline-none" />
14 <button class="rounded-full bg-[#1a1f2e] px-4 py-1 text-xs text-indigo-400"
15 "color:#79c0ff">style="box-shadow:4px 4px 8px #0d1117,-4px -4px 8px #272d3d">Go</button>
16</div>
⬡ UIDrop Component16 lines
TypeScript ReactUTF-8

Contact Form

Contact Us

Full contact form with inset name, email, and message fields.

T
contact-form.tsx
1<div class="max-w-sm rounded-3xl bg-[#e0e5ec] p-8"
2 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
3 <h3 class="text-xl font-bold text-slate-700">Contact Us</h3>
4 <div class="mt-5 space-y-4">
5 <input "color:#79c0ff">placeholder="Your Name"
6 class="w-full rounded-xl bg-[#e0e5ec] px-4 py-3 text-sm text-slate-600 placeholder-slate-400 outline-none"
7 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff" />
8 <input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="Email Address"
9 class="w-full rounded-xl bg-[#e0e5ec] px-4 py-3 text-sm text-slate-600 placeholder-slate-400 outline-none"
10 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff" />
11 <textarea rows="4" "color:#79c0ff">placeholder="Your message..."
12 class="w-full resize-none rounded-xl bg-[#e0e5ec] px-4 py-3 text-sm text-slate-600 placeholder-slate-400 outline-none"
13 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff"></textarea>
14 <button class="w-full rounded-xl bg-[#e0e5ec] py-3 text-sm font-bold text-indigo-500 active:scale-95"
15 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">Send Message</button>
16 </div>
17</div>
⬡ UIDrop Component17 lines
TypeScript ReactUTF-8

Subscribe Input

Stay in the Loop

Get the latest updates delivered to your inbox.

Inline email + subscribe button with neumorphic pill styling.

T
subscribe-input.tsx
1<div class="flex flex-col items-center gap-4 bg-[#e0e5ec] p-8 rounded-2xl">
2 <h3 class="text-center text-lg font-bold text-slate-700">Stay in the Loop</h3>
3 <div class="flex w-full max-w-sm items-center gap-3 rounded-full p-1.5 bg-[#e0e5ec]"
4 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
5 <input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="Enter your email"
6 class="flex-1 bg-transparent pl-4 text-sm text-slate-600 placeholder-slate-400 outline-none" />
7 <button class="rounded-full bg-[#e0e5ec] px-5 py-2 text-sm font-semibold text-indigo-500 active:scale-95"
8 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff">
9 Subscribe
10 </button>
11 </div>
12</div>
⬡ UIDrop Component12 lines
TypeScript ReactUTF-8

Toggle Switches

Notifications
Dark Mode
Auto-save
Analytics

Interactive toggle switches with inset track and extruded thumb — colored glow when active.

T
toggle-switches.tsx
1<!-- Toggle ON -->
2<div class="flex h-8 w-14 cursor-pointer items-center rounded-full px-1 bg-[#e0e5ec]"
3 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
4 <div class="h-6 w-6 rounded-full translate-x-6 bg-[#e0e5ec] transition-all"
5 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff,0 0 10px #818cf8"></div>
6</div>
7<!-- Toggle OFF -->
8<div class="flex h-8 w-14 cursor-pointer items-center rounded-full px-1 bg-[#e0e5ec]"
9 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
10 <div class="h-6 w-6 rounded-full translate-x-0 bg-[#e0e5ec]"
11 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff"></div>
12</div>
⬡ UIDrop Component12 lines
TypeScript ReactUTF-8

Checkboxes & Radio

Checkboxes

✓
Remember me
Subscribe to updates
✓
Accept terms

Radio

Standard
Express
Premium

Neumorphic checkboxes (inset when checked) and radio buttons on a light background.

T
checkboxes-&-radio.tsx
1<!-- Checked -->
2<div class="flex items-center gap-3">
3 <div class="flex h-6 w-6 items-center justify-center rounded-md bg-[#e0e5ec] text-sm text-indigo-500"
4 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">✓</div>
5 <span class="text-sm text-slate-600">Remember me</span>
6</div>
7<!-- Unchecked -->
8<div class="flex items-center gap-3">
9 <div class="h-6 w-6 rounded-md bg-[#e0e5ec]"
10 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff"></div>
11 <span class="text-sm text-slate-600">Subscribe to updates</span>
12</div>
13<!-- Radio Selected -->
14<div class="flex items-center gap-3">
15 <div class="flex h-6 w-6 items-center justify-center rounded-full bg-[#e0e5ec]"
16 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
17 <div class="h-2.5 w-2.5 rounded-full bg-indigo-500"></div>
18 </div>
19 <span class="text-sm text-slate-600">Standard</span>
20</div>
⬡ UIDrop Component20 lines
TypeScript ReactUTF-8

Neumorphic Tabs

Content for Overview tab.

Tab bar where active tab uses inset shadow and inactive tabs are flat.

T
neumorphic-tabs.tsx
1<div class="rounded-2xl bg-[#e0e5ec] p-2 flex gap-2"
2 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
3 <!-- Active tab -->
4 <button class="flex-1 rounded-xl py-2 text-sm font-medium text-indigo-500"
5 "color:#79c0ff">style="box-shadow:inset 3px 3px 6px #b8bec7,inset -3px -3px 6px #ffffff">Overview</button>
6 <!-- Inactive tabs -->
7 <button class="flex-1 rounded-xl py-2 text-sm font-medium text-slate-500">Analytics</button>
8 <button class="flex-1 rounded-xl py-2 text-sm font-medium text-slate-500">Reports</button>
9 <button class="flex-1 rounded-xl py-2 text-sm font-medium text-slate-500">Settings</button>
10</div>
⬡ UIDrop Component10 lines
TypeScript ReactUTF-8

Icon Badges Light

☀️
🔔
📧
💾
⚙️
🔍
❤️
🎵

Grid of circular icon containers with neumorphic extruded style on light background.

T
icon-badges-light.tsx
1<div class="grid grid-cols-4 gap-4 bg-[#e0e5ec] p-6 rounded-2xl">
2 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#e0e5ec] text-2xl"
3 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">☀️</div>
4 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#e0e5ec] text-2xl"
5 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">🔔</div>
6 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#e0e5ec] text-2xl"
7 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">📧</div>
8 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#e0e5ec] text-2xl"
9 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">💾</div>
10</div>
⬡ UIDrop Component10 lines
TypeScript ReactUTF-8

Icon Badges Dark

☀️
🔔
📧
💾
⚙️
🔍
❤️
🎵

Dark neumorphic icon badges with indigo, violet, and emerald color accents.

T
icon-badges-dark.tsx
1<div class="grid grid-cols-4 gap-4 bg-[#1a1f2e] p-6 rounded-2xl">
2 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#1a1f2e] text-2xl text-amber-400"
3 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">☀️</div>
4 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#1a1f2e] text-2xl text-indigo-400"
5 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">🔔</div>
6 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#1a1f2e] text-2xl text-violet-400"
7 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">📧</div>
8 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#1a1f2e] text-2xl text-emerald-400"
9 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">💾</div>
10</div>
⬡ UIDrop Component10 lines
TypeScript ReactUTF-8

Pagination

Neumorphic page number circles with inset style for the active page.

T
pagination.tsx
1<div class="flex items-center gap-3 bg-[#e0e5ec] p-6 rounded-2xl">
2 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-slate-500"
3 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">‹</button>
4 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-sm font-semibold text-slate-500"
5 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">1</button>
6 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-sm font-semibold text-slate-500"
7 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">2</button>
8 <!-- Active page -->
9 <button class="flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold text-indigo-500"
10 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">3</button>
11 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-sm font-semibold text-slate-500"
12 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">4</button>
13 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-sm font-semibold text-slate-500"
14 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">5</button>
15 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-slate-500"
16 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">›</button>
17</div>
⬡ UIDrop Component17 lines
TypeScript ReactUTF-8

Neumorphic Music Player

🎵

Midnight Dreams

The Neon Collective

Soft-UI music player with embossed track art, pressed control buttons, and a sculpted progress bar.

T
neumorphic-music-player.tsx
1<div class="rounded-3xl bg-[#e0e5ec] p-6"
2 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
3 <div class="mx-auto mb-4 h-20 w-20 rounded-2xl flex items-center justify-center text-4xl bg-[#e0e5ec]"
4 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff,inset 0 0 0 1px rgba(255,255,255,0.6)">
5 🎵
6 </div>
7 <p class="text-center text-sm font-bold text-slate-700">Midnight Dreams</p>
8 <p class="text-center text-xs text-slate-400 mb-4">The Neon Collective</p>
9 <div class="mb-4 h-2 rounded-full bg-[#e0e5ec]"
10 "color:#79c0ff">style="box-shadow:inset 3px 3px 6px #b8bec7,inset -3px -3px 6px #ffffff">
11 <div class="h-full w-2/3 rounded-full bg-gradient-to-r from-indigo-400 to-violet-500" />
12 </div>
13 <div class="flex justify-center gap-4">
14 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-slate-500"
15 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff">⏮</button>
16 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-indigo-500"
17 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff">▶</button>
18 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-slate-500"
19 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff">⏭</button>
20 </div>
21</div>
⬡ UIDrop Component21 lines
TypeScript ReactUTF-8

Neumorphism

25 components

Neumorphism

Soft shadows, embossed surfaces, clay-like depth, and tactile interfaces without flat design.

Light Neumorphic Buttons

Classic neumorphic buttons on a light background — regular, pressed, pill, and icon variants.

T
light-neumorphic-buttons.tsx
1<div class="flex flex-wrap items-center gap-5 bg-[#e0e5ec] p-6 rounded-2xl">
2 <!-- Default -->
3 <button class="rounded-xl bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-slate-600 active:scale-95"
4 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
5 Default
6 </button>
7 <!-- Pressed -->
8 <button class="rounded-xl bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-slate-500"
9 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
10 Pressed
11 </button>
12 <!-- Pill -->
13 <button class="rounded-full bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-indigo-500 active:scale-95"
14 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
15 Pill Shape
16 </button>
17 <!-- Icon -->
18 <button class="flex h-11 w-11 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
19 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
20 ⚙
21 </button>
22</div>
⬡ UIDrop Component22 lines
TypeScript ReactUTF-8

Dark Neumorphic Buttons

Soft UI buttons on dark background with indigo accent variant.

T
dark-neumorphic-buttons.tsx
1<div class="flex flex-wrap items-center gap-5 bg-[#1a1f2e] p-6 rounded-2xl">
2 <button class="rounded-xl bg-[#1a1f2e] px-7 py-3 text-sm font-semibold text-slate-300 active:scale-95"
3 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">
4 Default
5 </button>
6 <button class="rounded-xl bg-[#1a1f2e] px-7 py-3 text-sm font-semibold text-slate-400"
7 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #0d1117,inset -4px -4px 8px #272d3d">
8 Pressed
9 </button>
10 <button class="rounded-xl bg-[#1a1f2e] px-7 py-3 text-sm font-semibold text-indigo-400 active:scale-95"
11 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">
12 Accent
13 </button>
14 <button class="rounded-full bg-[#1a1f2e] px-7 py-3 text-sm font-semibold text-violet-400 active:scale-95"
15 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">
16 Pill
17 </button>
18</div>
⬡ UIDrop Component18 lines
TypeScript ReactUTF-8

Button States

Default, hover, active/pressed, and disabled states in light neumorphism.

T
button-states.tsx
1<!-- Default -->
2<button class="rounded-xl bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-slate-600"
3 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">Default</button>
4<!-- Hover -->
5<button class="rounded-xl bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-slate-600 hover:scale-105 transition-all"
6 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">Hover</button>
7<!-- Active/Pressed -->
8<button class="rounded-xl bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-slate-500"
9 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">Active</button>
10<!-- Disabled -->
11<button class="rounded-xl bg-[#e0e5ec] px-7 py-3 text-sm font-semibold text-slate-400 opacity-40 cursor-not-allowed"
12 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff" disabled>Disabled</button>
⬡ UIDrop Component12 lines
TypeScript ReactUTF-8

Icon Action Buttons

Circular neumorphic icon buttons — play, pause, skip, volume, and heart.

T
icon-action-buttons.tsx
1<div class="flex flex-wrap gap-5 bg-[#e0e5ec] p-6 rounded-2xl">
2 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
3 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">▶</button>
4 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
5 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">⏸</button>
6 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
7 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">⏭</button>
8 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
9 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">⏮</button>
10 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
11 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">🔊</button>
12 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-lg text-slate-600 active:scale-95"
13 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">♥</button>
14</div>
⬡ UIDrop Component14 lines
TypeScript ReactUTF-8

Neumorphic Cards

Monthly Revenue

$48,290

75% of target

Active Users

12,540

50% of goal

Light and dark card variants with metric values and progress indicators.

T
neumorphic-cards.tsx
1<!-- Light Card -->
2<div class="rounded-2xl bg-[#e0e5ec] p-6" "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
3 <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">Monthly Revenue</p>
4 <p class="mt-2 text-3xl font-extrabold text-slate-700">$48,290</p>
5 <div class="mt-4 h-2 rounded-full bg-[#e0e5ec]"
6 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
7 <div class="h-2 w-3/4 rounded-full bg-indigo-400"></div>
8 </div>
9 <button class="mt-4 w-full rounded-xl bg-[#e0e5ec] py-2 text-sm font-semibold text-indigo-500"
10 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">View Report</button>
11</div>
⬡ UIDrop Component11 lines
TypeScript ReactUTF-8

Profile Card

🧑

Arjun Sharma

Senior UI Engineer

124

Posts

4.2K

Followers

312

Following

Soft UI profile card with circular avatar, stats, and action buttons.

T
profile-card.tsx
1<div class="w-full max-w-xs rounded-3xl p-7 bg-[#e0e5ec]"
2 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
3 <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-[#e0e5ec] text-4xl"
4 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">🧑</div>
5 <h3 class="mt-4 text-center text-lg font-bold text-slate-700">Arjun Sharma</h3>
6 <p class="text-center text-sm text-slate-400">Senior UI Engineer</p>
7 <div class="mt-5 grid grid-cols-3 gap-3">
8 <div class="rounded-xl py-3 text-center bg-[#e0e5ec]"
9 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
10 <p class="text-base font-bold text-slate-700">124</p>
11 <p class="text-xs text-slate-400">Posts</p>
12 </div>
13 <!-- repeat for Followers, Following -->
14 </div>
15 <div class="mt-5 flex gap-3">
16 <button class="flex-1 rounded-xl bg-[#e0e5ec] py-2 text-sm font-semibold text-indigo-500"
17 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">Message</button>
18 <button class="flex-1 rounded-xl bg-[#e0e5ec] py-2 text-sm font-semibold text-slate-500"
19 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">Follow</button>
20 </div>
21</div>
⬡ UIDrop Component21 lines
TypeScript ReactUTF-8

Music Player Card

🎵

Midnight Drift

Lo-fi Collective

1:453:20
🔊

Dark neumorphic music player with album art, controls, and progress slider.

T
music-player-card.tsx
1<div class="w-full max-w-xs rounded-3xl bg-[#1a1f2e] p-7"
2 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">
3 <div class="mx-auto h-36 w-36 rounded-2xl flex items-center justify-center text-5xl"
4 "color:#79c0ff">style="background:linear-gradient(135deg,#667eea,#764ba2)">🎵</div>
5 <div class="mt-5 text-center">
6 <h3 class="text-lg font-bold text-slate-200">Midnight Drift</h3>
7 <p class="text-sm text-slate-500">Lo-fi Collective</p>
8 </div>
9 <div class="mt-4 rounded-full p-1 bg-[#1a1f2e]"
10 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #0d1117,inset -4px -4px 8px #272d3d">
11 <div class="h-2 w-2/3 rounded-full bg-gradient-to-r from-indigo-400 to-violet-500"></div>
12 </div>
13 <div class="mt-5 flex items-center justify-center gap-5">
14 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#1a1f2e] text-slate-400"
15 "color:#79c0ff">style="box-shadow:6px 6px 12px #0d1117,-6px -6px 12px #272d3d">⏮</button>
16 <button class="flex h-14 w-14 items-center justify-center rounded-full bg-[#1a1f2e] text-xl text-indigo-400"
17 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">▶</button>
18 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#1a1f2e] text-slate-400"
19 "color:#79c0ff">style="box-shadow:6px 6px 12px #0d1117,-6px -6px 12px #272d3d">⏭</button>
20 </div>
21</div>
⬡ UIDrop Component21 lines
TypeScript ReactUTF-8

Neumorphic Login Form

Welcome Back

Sign in to your account

Forgot password?

Sunken inset inputs with raised submit button on a soft light background.

T
neumorphic-login-form.tsx
1<div class="w-full max-w-sm rounded-3xl bg-[#e0e5ec] p-8"
2 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
3 <h3 class="text-center text-xl font-bold text-slate-700">Welcome Back</h3>
4 <div class="mt-6 space-y-4">
5 <input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="you@example.com"
6 class="w-full rounded-xl bg-[#e0e5ec] px-4 py-3 text-sm text-slate-600 placeholder-slate-400 outline-none"
7 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff" />
8 <input "color:#79c0ff">type="password" "color:#79c0ff">placeholder="••••••••"
9 class="w-full rounded-xl bg-[#e0e5ec] px-4 py-3 text-sm text-slate-600 placeholder-slate-400 outline-none"
10 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff" />
11 <button class="mt-2 w-full rounded-xl bg-[#e0e5ec] py-3 text-sm font-bold text-indigo-500 active:scale-95"
12 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">
13 Sign In
14 </button>
15 </div>
16</div>
⬡ UIDrop Component16 lines
TypeScript ReactUTF-8

Search Input

🔍
🔍

Neumorphic search field in both light and dark variants with inset styling.

T
search-input.tsx
1<!-- Light search -->
2<div class="flex items-center gap-3 rounded-full bg-[#e0e5ec] px-5 py-3"
3 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
4 <span class="text-slate-400">🔍</span>
5 <input "color:#79c0ff">placeholder="Search components..."
6 class="flex-1 bg-transparent text-sm text-slate-600 placeholder-slate-400 outline-none" />
7</div>
8<!-- Dark search -->
9<div class="flex items-center gap-3 rounded-full bg-[#1a1f2e] px-5 py-3"
10 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #0d1117,inset -4px -4px 8px #272d3d">
11 <span class="text-slate-500">🔍</span>
12 <input "color:#79c0ff">placeholder="Search in dark mode..."
13 class="flex-1 bg-transparent text-sm text-slate-300 placeholder-slate-600 outline-none" />
14 <button class="rounded-full bg-[#1a1f2e] px-4 py-1 text-xs text-indigo-400"
15 "color:#79c0ff">style="box-shadow:4px 4px 8px #0d1117,-4px -4px 8px #272d3d">Go</button>
16</div>
⬡ UIDrop Component16 lines
TypeScript ReactUTF-8

Contact Form

Contact Us

Full contact form with inset name, email, and message fields.

T
contact-form.tsx
1<div class="max-w-sm rounded-3xl bg-[#e0e5ec] p-8"
2 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
3 <h3 class="text-xl font-bold text-slate-700">Contact Us</h3>
4 <div class="mt-5 space-y-4">
5 <input "color:#79c0ff">placeholder="Your Name"
6 class="w-full rounded-xl bg-[#e0e5ec] px-4 py-3 text-sm text-slate-600 placeholder-slate-400 outline-none"
7 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff" />
8 <input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="Email Address"
9 class="w-full rounded-xl bg-[#e0e5ec] px-4 py-3 text-sm text-slate-600 placeholder-slate-400 outline-none"
10 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff" />
11 <textarea rows="4" "color:#79c0ff">placeholder="Your message..."
12 class="w-full resize-none rounded-xl bg-[#e0e5ec] px-4 py-3 text-sm text-slate-600 placeholder-slate-400 outline-none"
13 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff"></textarea>
14 <button class="w-full rounded-xl bg-[#e0e5ec] py-3 text-sm font-bold text-indigo-500 active:scale-95"
15 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">Send Message</button>
16 </div>
17</div>
⬡ UIDrop Component17 lines
TypeScript ReactUTF-8

Subscribe Input

Stay in the Loop

Get the latest updates delivered to your inbox.

Inline email + subscribe button with neumorphic pill styling.

T
subscribe-input.tsx
1<div class="flex flex-col items-center gap-4 bg-[#e0e5ec] p-8 rounded-2xl">
2 <h3 class="text-center text-lg font-bold text-slate-700">Stay in the Loop</h3>
3 <div class="flex w-full max-w-sm items-center gap-3 rounded-full p-1.5 bg-[#e0e5ec]"
4 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
5 <input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="Enter your email"
6 class="flex-1 bg-transparent pl-4 text-sm text-slate-600 placeholder-slate-400 outline-none" />
7 <button class="rounded-full bg-[#e0e5ec] px-5 py-2 text-sm font-semibold text-indigo-500 active:scale-95"
8 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff">
9 Subscribe
10 </button>
11 </div>
12</div>
⬡ UIDrop Component12 lines
TypeScript ReactUTF-8

Toggle Switches

Notifications
Dark Mode
Auto-save
Analytics

Interactive toggle switches with inset track and extruded thumb — colored glow when active.

T
toggle-switches.tsx
1<!-- Toggle ON -->
2<div class="flex h-8 w-14 cursor-pointer items-center rounded-full px-1 bg-[#e0e5ec]"
3 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
4 <div class="h-6 w-6 rounded-full translate-x-6 bg-[#e0e5ec] transition-all"
5 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff,0 0 10px #818cf8"></div>
6</div>
7<!-- Toggle OFF -->
8<div class="flex h-8 w-14 cursor-pointer items-center rounded-full px-1 bg-[#e0e5ec]"
9 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
10 <div class="h-6 w-6 rounded-full translate-x-0 bg-[#e0e5ec]"
11 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff"></div>
12</div>
⬡ UIDrop Component12 lines
TypeScript ReactUTF-8

Checkboxes & Radio

Checkboxes

✓
Remember me
Subscribe to updates
✓
Accept terms

Radio

Standard
Express
Premium

Neumorphic checkboxes (inset when checked) and radio buttons on a light background.

T
checkboxes-&-radio.tsx
1<!-- Checked -->
2<div class="flex items-center gap-3">
3 <div class="flex h-6 w-6 items-center justify-center rounded-md bg-[#e0e5ec] text-sm text-indigo-500"
4 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">✓</div>
5 <span class="text-sm text-slate-600">Remember me</span>
6</div>
7<!-- Unchecked -->
8<div class="flex items-center gap-3">
9 <div class="h-6 w-6 rounded-md bg-[#e0e5ec]"
10 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff"></div>
11 <span class="text-sm text-slate-600">Subscribe to updates</span>
12</div>
13<!-- Radio Selected -->
14<div class="flex items-center gap-3">
15 <div class="flex h-6 w-6 items-center justify-center rounded-full bg-[#e0e5ec]"
16 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
17 <div class="h-2.5 w-2.5 rounded-full bg-indigo-500"></div>
18 </div>
19 <span class="text-sm text-slate-600">Standard</span>
20</div>
⬡ UIDrop Component20 lines
TypeScript ReactUTF-8

Neumorphic Tabs

Content for Overview tab.

Tab bar where active tab uses inset shadow and inactive tabs are flat.

T
neumorphic-tabs.tsx
1<div class="rounded-2xl bg-[#e0e5ec] p-2 flex gap-2"
2 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">
3 <!-- Active tab -->
4 <button class="flex-1 rounded-xl py-2 text-sm font-medium text-indigo-500"
5 "color:#79c0ff">style="box-shadow:inset 3px 3px 6px #b8bec7,inset -3px -3px 6px #ffffff">Overview</button>
6 <!-- Inactive tabs -->
7 <button class="flex-1 rounded-xl py-2 text-sm font-medium text-slate-500">Analytics</button>
8 <button class="flex-1 rounded-xl py-2 text-sm font-medium text-slate-500">Reports</button>
9 <button class="flex-1 rounded-xl py-2 text-sm font-medium text-slate-500">Settings</button>
10</div>
⬡ UIDrop Component10 lines
TypeScript ReactUTF-8

Icon Badges Light

☀️
🔔
📧
💾
⚙️
🔍
❤️
🎵

Grid of circular icon containers with neumorphic extruded style on light background.

T
icon-badges-light.tsx
1<div class="grid grid-cols-4 gap-4 bg-[#e0e5ec] p-6 rounded-2xl">
2 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#e0e5ec] text-2xl"
3 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">☀️</div>
4 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#e0e5ec] text-2xl"
5 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">🔔</div>
6 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#e0e5ec] text-2xl"
7 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">📧</div>
8 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#e0e5ec] text-2xl"
9 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">💾</div>
10</div>
⬡ UIDrop Component10 lines
TypeScript ReactUTF-8

Icon Badges Dark

☀️
🔔
📧
💾
⚙️
🔍
❤️
🎵

Dark neumorphic icon badges with indigo, violet, and emerald color accents.

T
icon-badges-dark.tsx
1<div class="grid grid-cols-4 gap-4 bg-[#1a1f2e] p-6 rounded-2xl">
2 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#1a1f2e] text-2xl text-amber-400"
3 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">☀️</div>
4 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#1a1f2e] text-2xl text-indigo-400"
5 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">🔔</div>
6 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#1a1f2e] text-2xl text-violet-400"
7 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">📧</div>
8 <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#1a1f2e] text-2xl text-emerald-400"
9 "color:#79c0ff">style="box-shadow:8px 8px 16px #0d1117,-8px -8px 16px #272d3d">💾</div>
10</div>
⬡ UIDrop Component10 lines
TypeScript ReactUTF-8

Pagination

Neumorphic page number circles with inset style for the active page.

T
pagination.tsx
1<div class="flex items-center gap-3 bg-[#e0e5ec] p-6 rounded-2xl">
2 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-slate-500"
3 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">‹</button>
4 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-sm font-semibold text-slate-500"
5 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">1</button>
6 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-sm font-semibold text-slate-500"
7 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">2</button>
8 <!-- Active page -->
9 <button class="flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold text-indigo-500"
10 "color:#79c0ff">style="box-shadow:inset 4px 4px 8px #b8bec7,inset -4px -4px 8px #ffffff">3</button>
11 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-sm font-semibold text-slate-500"
12 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">4</button>
13 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-sm font-semibold text-slate-500"
14 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">5</button>
15 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-slate-500"
16 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff">›</button>
17</div>
⬡ UIDrop Component17 lines
TypeScript ReactUTF-8

Neumorphic Music Player

🎵

Midnight Dreams

The Neon Collective

Soft-UI music player with embossed track art, pressed control buttons, and a sculpted progress bar.

T
neumorphic-music-player.tsx
1<div class="rounded-3xl bg-[#e0e5ec] p-6"
2 "color:#79c0ff">style="box-shadow:8px 8px 16px #b8bec7,-8px -8px 16px #ffffff">
3 <div class="mx-auto mb-4 h-20 w-20 rounded-2xl flex items-center justify-center text-4xl bg-[#e0e5ec]"
4 "color:#79c0ff">style="box-shadow:6px 6px 12px #b8bec7,-6px -6px 12px #ffffff,inset 0 0 0 1px rgba(255,255,255,0.6)">
5 🎵
6 </div>
7 <p class="text-center text-sm font-bold text-slate-700">Midnight Dreams</p>
8 <p class="text-center text-xs text-slate-400 mb-4">The Neon Collective</p>
9 <div class="mb-4 h-2 rounded-full bg-[#e0e5ec]"
10 "color:#79c0ff">style="box-shadow:inset 3px 3px 6px #b8bec7,inset -3px -3px 6px #ffffff">
11 <div class="h-full w-2/3 rounded-full bg-gradient-to-r from-indigo-400 to-violet-500" />
12 </div>
13 <div class="flex justify-center gap-4">
14 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-slate-500"
15 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff">⏮</button>
16 <button class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e0e5ec] text-indigo-500"
17 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff">▶</button>
18 <button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#e0e5ec] text-slate-500"
19 "color:#79c0ff">style="box-shadow:4px 4px 8px #b8bec7,-4px -4px 8px #ffffff">⏭</button>
20 </div>
21</div>
⬡ UIDrop Component21 lines
TypeScript ReactUTF-8