Shadcn/UI Complete Tutorial for Next.js 16 – Build Beautiful Tech3Space Components (2026 Guide)
Shadcn/UI Complete Tutorial for Next.js 16 – Build Beautiful Tech3Space Components (2026 Guide)
Learn how to install and use Shadcn/UI in your Next.js project to create modern, accessible, and fully customizable components for Tech3Space – your tech news and blog platform.
Shadcn/UI is not a traditional component library. It copies clean, accessible components built with Radix UI and Tailwind CSS directly into your codebase so you own and can modify every part.
Why Use Shadcn/UI in Tech3Space?
- Beautiful, modern design out of the box
- Fully customizable (you edit the actual code)
- Accessible (built on Radix UI)
- Perfect integration with Tailwind CSS
- Great for Server Components and Client Components
- Excellent performance (zero extra runtime overhead)
Step 1: Install Shadcn/UI in Tech3Space
Open your terminal in the Tech3Space project root and run:
npx shadcn@latest init
Recommended answers during setup:
- Style: Default (or New York for a more premium look)
- Base color: Zinc or Slate
- Use CSS variables for colors? → Yes
- Global CSS file:
app/globals.css - Use
clsxandtailwind-merge? → Yes
This command creates:
components.json(configuration file)components/ui/folder- Updates
tailwind.config.tsandglobals.css
Step 2: Add Essential Components for Tech3Space
Run these commands to add the most useful components:
# Core UI Components
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add badge
npx shadcn@latest add avatar
npx shadcn@latest add input
npx shadcn@latest add label
npx shadcn@latest add separator
npx shadcn@latest add skeleton
npx shadcn@latest add dropdown-menu
npx shadcn@latest add toast
You can see the full list of available components at: https://ui.shadcn.com
Step 3: Using Shadcn Components in Tech3Space
Example 1: Beautiful Blog Post Card (Server Component)
Update your homepage app/page.tsx:
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import LikeButton from '@/components/LikeButton';
export default async function Home() {
const posts = await getPosts(); // your existing fetch function
return (
<div className="max-w-5xl mx-auto px-6 py-12">
<h1 className="text-5xl font-bold text-center mb-4">Tech3Space</h1>
<p className="text-center text-xl text-muted-foreground mb-12">
Latest in Technology & Innovation
</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{posts.slice(0, 9).map((post: any) => (
<Card key={post.id} className="overflow-hidden hover:shadow-xl transition-all duration-300 group">
<CardHeader className="p-0">
<img
src={`https://picsum.photos/id/${post.id}/600/400`}
alt={post.title}
className="w-full h-52 object-cover group-hover:scale-105 transition-transform"
/>
</CardHeader>
<CardContent className="p-6">
<div className="flex gap-2 mb-4">
<Badge variant="secondary">AI</Badge>
<Badge variant="outline">Gadgets</Badge>
</div>
<CardTitle className="line-clamp-2 text-xl mb-3 group-hover:text-primary">
{post.title}
</CardTitle>
<CardDescription className="line-clamp-3 mb-6">
{post.body}
</CardDescription>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Avatar className="w-8 h-8">
<AvatarImage src={`https://i.pravatar.cc/150?u=${post.id}`} />
<AvatarFallback>TS</AvatarFallback>
</Avatar>
<div className="text-sm">
<p className="font-medium">Tech3Space</p>
<p className="text-muted-foreground text-xs">2h ago</p>
</div>
</div>
<LikeButton postId={post.id} />
</div>
</CardContent>
</Card>
))}
</div>
</div>
);
}
Example 2: Search Bar (Client Component)
Create components/SearchBar.tsx:
'use client';
import { useState } from 'react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Search } from 'lucide-react';
export default function SearchBar() {
const [query, setQuery] = useState('');
return (
<div className="relative max-w-md mx-auto mb-12">
<div className="flex gap-2">
<div className="relative flex-1">
<Search className="absolute left-3 top-3 h-5 w-5 text-muted-foreground" />
<Input
type="text"
placeholder="Search AI, gadgets, programming..."
value={query}
onChange={(e) => setQuery(e.target.value)}
className="pl-10 bg-background"
/>
</div>
<Button>Search</Button>
</div>
</div>
);
}
Step 4: Customizing Shadcn Components
All components are stored in components/ui/. For example, to change button styles, edit components/ui/button.tsx.
You can easily add new variants:
// In button.tsx
variant: {
default: "...",
gradient: "bg-gradient-to-r from-blue-600 to-violet-600 text-white hover:brightness-110",
}
Then use it anywhere:
<Button variant="gradient">Read Full Article</Button>
Step 5: Best Practices for Tech3Space
- Use Server Components for cards, lists, and data fetching.
- Use Client Components (
'use client') only for interactivity (search, likes, modals). - Combine with Tailwind’s
prosefor beautiful blog post pages. - Enable dark mode easily by adding
darkclass to<html>.
Bonus: Add More Useful Components
npx shadcn@latest add dialog # For article preview modal
npx shadcn@latest add tabs # For categories (AI, Cloud, Programming)
npx shadcn@latest add table # For comparison posts
npx shadcn@latest add form # For newsletter signup
Would you like me to continue this tutorial with the next advanced parts?
Next Parts Available:
- Navigation Bar with Shadcn + Mobile Menu
- Article Page with Table of Contents using Shadcn
- Dark Mode Toggle with Shadcn
- Modal/Dialog for reading full post
- Toast Notifications for likes and comments