shadcn-portfolio is an open-source portfolio template for Next.js 15 that combines shadcn/ui components, Tailwind CSS, and Framer Motion animations to produce a personal portfolio site with a built-in blog.
What is shadcn-portfolio?
shadcn-portfolio is a portfolio template maintained by techwithanirudh on GitHub. It takes a Next.js 15 App Router project and gives you a pre-built personal portfolio with a blog, light/dark mode, and SEO meta tags, so you can swap in your own content and deploy. The template is distributed as a GitHub repository and is restructured using TurboRepo; an older version remains on the tailwind-v4 branch.
Key Features
- Next.js 15 with App Router — Built on Next.js 15 using the App Router for file-based routing and server components.
- Blog with MDX — Includes a blog that renders MDX content; MDX rendering logic comes from fumadocs and MDX data from content-collections.
- Tailwind CSS styling — Styling is handled by Tailwind CSS, allowing theme customization through Tailwind's configuration.
- shadcn/ui components — Uses accessible shadcn/ui components that are copied into your project rather than installed as a dependency.
- Framer Motion animations — Animations are powered by Framer Motion, and smooth scrolling is handled by Lenis.
- Light/Dark mode — Ships with theme switching between light and dark.
- SEO optimized — Includes meta tags for search engine optimization built into the template.
- Developer tooling — Husky and Lint Staged run lint and format checks before commits; Prettier handles code formatting.
- Sentry integration — Error tracking with Sentry is included but requires setup.
- Contact form with Cloudflare Turnstile — A contact form is included with Cloudflare Turnstile protection; both require setup.
Who is it for?
- Developers — who want a ready-made portfolio with a blog to showcase projects and writing without building everything from scratch.
- Design-conscious creators — who want a modern, animated portfolio with light/dark mode and accessible UI components.
- Next.js learners — who want a real-world codebase that combines Next.js 15, shadcn/ui, Tailwind CSS, and Framer Motion in one project.
What can you do with shadcn-portfolio?
- Showcase your work: Publish project case studies and code examples in a responsive portfolio layout.
- Write a blog: Author posts in MDX and manage them through content-collections, with rendering handled by fumadocs.
- Collect messages: Use the included contact form with Cloudflare Turnstile to receive inquiries after configuring the form backend.
- Monitor errors: Connect Sentry to track client-side errors in production after setup.
FAQ
Is shadcn-portfolio free?
Yes, the source code is public on GitHub and the repository includes a license file. No pricing or paid tiers are mentioned in the repository.
What tech stack does shadcn-portfolio use?
It uses Next.js 15 with the App Router, Tailwind CSS, shadcn/ui, Framer Motion, and MDX via fumadocs and content-collections. Tooling includes Husky, Lint Staged, and Prettier.
Does shadcn-portfolio include a blog?
Yes, it includes a blog that renders MDX content. MDX rendering logic comes from fumadocs and MDX data from content-collections.
What needs to be set up before deploying?
Sentry error tracking, the contact form, and Cloudflare Turnstile all require setup. The repository links to a getting started guide that explains configuration for each integration.
