Neumorphism UI

CSS Variables

--neu-bg

#242433

Base background

--neu-bg-elevated

#2e2e3f

Cards, modals

--neu-bg-sunken

#1a1a26

Inputs

--neu-primary

#1fb8b9

Primary

--neu-primary-hover

#25d4d5

Hover

--neu-accent

#15949C

Accent

--neu-success

#16a34a

Success

--neu-warning

#d97706

Warning

--neu-danger

#FF0000

Danger

--neu-text

#f1f3f7

Text

--neu-text-secondary

#a0a6b8

Secondary

--neu-text-muted

#6D758F

Muted

Buttons

Icon Buttons

Circle Buttons

Inputs & Forms

Toggles & Switches

Notifications
Auto Update
Sleep Mode

Checkboxes & Radio Buttons

Checkboxes

Radio Buttons

Sliders & Progress Bars

70%
50%
65% Complete650MB / 1GB
CPU45%
Memory72%
Storage89%

Cards

Information

This is an informational card with neumorphic styling and smooth shadows.

+12.5%

$24,500

Total Revenue

John Doe

Senior Developer

ReactNode.jsTypeScript

Cloud Storage

Secure cloud storage with automatic backup and sync across all devices.

75GB / 100GB75%

Notifications

3 new
New message from Sarah
Meeting in 30 minutes
Task completed

Counter

0

Tabs

Overview Tab

This is the overview content with neumorphic styling. Navigate between tabs to see different content.

128
Projects
42
Completed
86
Pending

Details Tab

Detailed information and specifications are displayed here with nested neumorphic elements.

Additional details can go here with more nested components.

Settings Tab

Configure your preferences and customize the appearance.

Enable Feature

History Tab

View your activity history and recent actions.

Action 1 - 2 hours ago
Action 2 - 5 hours ago
Action 3 - 1 day ago

Dropdown & Select

Rating & Reviews

Rate this product

You rated: 3 stars

Favorite Items

Product A
Product B
Product C

Alerts & Badges

Information

This is an informational alert with neumorphic styling.

Success

Operation completed successfully!

Warning

Please review your changes before proceeding.

Error

Something went wrong. Please try again.

DefaultSuccessWarningDangerMuted

Modal

Icons Gallery

Tables

NameEmailStatusRoleActions
Sarah Connor
sarah@skynet.ioActiveAdmin
John Smith
john@example.comPendingEditor
Emily Davis
emily@company.coActiveViewer
Michael Chen
m.chen@dev.ioInactiveDeveloper
Lisa Wang
lisa.w@design.coActiveDesigner
Showing 1 to 5 of 25 results

Code Blocks

typescript
interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user";
}

const getUser = async (id: number): Promise<User> => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};
python
from dataclasses import dataclass

@dataclass
class User:
    id: int
    name: str
    email: str

    def greet(self) -> str:
        return f"Hello, {self.name}!"

Terminal Commands

terminal
$npm install @shadcn/ui tailwindcss
added 245 packages in 12s
$npm run dev
ready - started server on 0.0.0.0:3000
npm install

Install dependencies

npm run build

Build for production

npx create-next-app

Create new project

git push origin main

Push to remote

API Endpoints

GET/api/usersGet all users
Response
[
  { "id": 1, "name": "John Doe" },
  { "id": 2, "name": "Jane Smith" }
]
POST/api/usersCreate new user
Response
{
  "id": 3,
  "name": "New User",
  "createdAt": "2024-01-15T10:30:00Z"
}
PUT/api/users/:idUpdate user
Response
{
  "id": 1,
  "name": "Updated Name",
  "updatedAt": "2024-01-15T11:00:00Z"
}
DELETE/api/users/:idDelete user
Response
{
  "success": true,
  "message": "User deleted"
}

cURL Examples

GET Request
curl -X GET https://api.example.com/users \
  -H "Authorization: Bearer YOUR_TOKEN"
POST Request with JSON
curl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -d '{"name": "John", "email": "john@example.com"}'
File Upload
curl -X POST https://api.example.com/upload \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -F "file=@/path/to/file.pdf"

Flow Diagrams

Authentication Flow

User
Login
API
DB
Success

Decision Flow

Start Process
Valid?
Yes
Process
No
Error