---
name: designing-nextjs-ui
description: |
Create professional, attractive, and visually striking user interfaces in Next.js.
Use when building beautiful websites, landing pages, dashboards, or any UI that needs
to stand out. Covers Tailwind CSS utilities, typography, animations, visual effects,
responsive layouts, and modern design patterns. Includes gradient text, glass morphism,
hover effects, and comprehensive spacing/layout systems.
NOT when doing basic HTML/CSS without a framework.
---
# Designing Professional Next.js UIs
Create visually stunning and highly functional interfaces using modern design patterns and Tailwind CSS.
## Design Philosophy
**Avoid generic aesthetics.** Every interface should have a clear visual identity:
- Choose distinctive fonts (avoid overused Inter, Roboto, Arial)
- Commit to a bold aesthetic direction (minimalist, maximalist, editorial, etc.)
- Use intentional color palettes with purpose
- Add visual depth through shadows, gradients, and effects
- Create memorable layouts that break from standard patterns
**Balance beauty with function.** Beautiful design serves the user experience:
- Maintain clear hierarchy and readability
- Use animations purposefully, not gratuitously
- Ensure accessibility (contrast, semantic HTML, screen readers)
- Optimize for performance (next/font, proper image handling)
## The "Gold Standard" Stack
Don't reinvent the wheel. Use this proven combination for consistency and speed.
1. **Tailwind CSS**: For utility-first styling.
2. **Shadcn UI**: For copy-paste accessible components (based on Radix UI).
3. **Framer Motion**: For declarative animations.
4. **Lucide React**: For consistent, clean iconography.
## Visual Hierarchy & Typography
### Fonts (`next/font`)
Use `next/font/google` to eliminate layout shift.
* **Primary:** `Inter` or `Geist Sans` (clean, modern legibility).
* **Headings (Optional):** `Playfair Display` or `Merriweather` (for "classy" contrast).
```tsx
import { Inter, Playfair_Display } from 'next/font/google'
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-playfair' })
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## Data Presentation Patterns
### 1. KPI / Metric Cards
Isolate key numbers. Use the "Label (Muted) -> Value (Bold) -> Context (Color)" hierarchy.
```tsx
// See references/ui-patterns.md for full component code
Total Revenue
$45,231.89
+20.1% from last month
```
### 2. The "Bento Grid" Layout
Organize dashboard widgets into a grid of distinct rectangular areas.
```tsx
{/* Main Chart */}
{/* KPI 1 */}
{/* KPI 2 */}
{/* Recent Activity List */}
```
### 3. Professional Tables
* **Alignment:** Text left, Numbers right.
* **Headers:** Muted uppercase or simple gray text.
* **Rows:** Border separators (no zebra striping usually).
* **Font:** Monospace for tabular numbers (`font-mono`) if strict alignment is needed.
## Visual Effects & Modern UI
### Gradient Text (Eye-Catching)
Create stunning gradient text effects:
```tsx
Beautiful Gradient
```
### Glass Morphism (Modern Depth)
Frosted glass effect for cards and overlays:
```tsx
Glass Card
```
### Animations & Motion
Use animations strategically for attention and feedback:
- `animate-bounce` - Scroll indicators, CTAs
- `animate-pulse` - Loading states, skeleton loaders
- `animate-spin` - Loading spinners
- Hover effects: `hover:scale-105`, `hover:shadow-xl`
- Transitions: `transition-all duration-300`
**See references/visual-effects.md** for comprehensive guide on gradients, shadows, blur effects, animations, and hover patterns.
## Advanced Typography
### Making Words Stand Out
**Color Emphasis:**
```tsx
Normal text with highlighted words
```
**Gradient Text:**
```tsx
Vibrant text
```
**Background Highlight:**
```tsx
marked text
```
**Weight & Size Contrast:**
- Mix `font-light` with `font-bold` in same paragraph
- Use large numbers (`text-6xl`) with small labels (`text-xs`)
- Vary letter spacing: `tracking-tight`, `tracking-wide`, `tracking-widest`
**See references/typography-advanced.md** for font loading, hierarchy systems, responsive typography, and dark mode patterns.
## Responsive Layouts
### Mobile-First Approach
Always design for mobile first, then enhance for larger screens:
```tsx
{/* Grid items */}
```
### Spacing Scale
Use consistent spacing (0.25rem increments):
- `gap-2`, `gap-4`, `gap-6`, `gap-8` - Between items
- `p-4`, `px-6`, `py-8` - Padding
- `mt-8`, `mb-4`, `mx-auto` - Margins
### Layout Patterns
- **Flexbox**: `flex items-center justify-between`
- **Grid**: `grid grid-cols-4 gap-4`
- **Container**: `max-w-6xl mx-auto px-4`
- **Aspect Ratio**: `aspect-video`, `aspect-square`
**See references/layout-patterns.md** for complete responsive patterns, Flexbox, Grid systems, spacing utilities, and container patterns.
## Micro-Interactions (Framer Motion)
Make the app feel "alive" but not noisy.
```tsx
// Subtle fade-in for page content
{children}
```
## Quick Reference
**Typography:**
- Fonts: Use `next/font/google` for zero layout shift
- Hierarchy: `text-6xl` → `text-4xl` → `text-2xl` → `text-xl` → `text-base`
- Emphasis: Gradient text, color contrast, weight variation
**Visual Effects:**
- Gradients: `bg-gradient-to-r from-{color} to-{color}`
- Shadows: `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`
- Blur: `backdrop-blur-md`, `backdrop-blur-lg`
- Animations: `animate-bounce`, `animate-pulse`, `hover:scale-105`
**Layout:**
- Responsive: `sm:`, `md:`, `lg:`, `xl:` breakpoints
- Flexbox: `flex items-center justify-between gap-4`
- Grid: `grid grid-cols-{n} gap-{size}`
- Spacing: `p-{n}`, `m-{n}`, `gap-{n}` (multiples of 0.25rem)
**Colors:**
- Text: `text-gray-900 dark:text-white`
- Background: `bg-white dark:bg-gray-800`
- Borders: `border border-gray-200 dark:border-gray-700`
## Verification
Run: `python scripts/verify.py`
## Related Skills
- **building-nextjs-apps** - Core Next.js architecture
- **styling-with-shadcn** - Deep dive into Shadcn components