Portfolio Blog Starter with shadcn-ui

[baldifilippo]

I’m currently working on the Portfolio Blog Starter Kit from Vercel and trying to integrate shadcn-ui components into it. Specifically, I followed the instructions to add a component , for example i used the command npx shadcn@latest add alert-dialog. However, I’m running into an issue, and I get the following error message:

It seems that the portfolio blog starter is not correctly configured. Could you please guide me on how to resolve this? I would appreciate any assistance or insights on how to properly use shadcn-ui with the Portfolio Blog Starter.

Thank you!

[anshumanb (Anshuman Bhardwaj)]

Hi @baldifilippo, sorry that you’re facing the issue. Have you followed the An update on Tailwind v4 - shadcn/ui guide? Because the starter kit is using Tailwind v4.

I think this should solve it for you.

[baldifilippo]

Hi!
Thanks for your response! I checked my Tailwind version, and I’m using TailwindCSS 4.0.0-alpha.13. I also followed the An update on Tailwind v4 - shadcn/ui guide, but I’m still encountering the same error when trying to add a component

Here’s the exact error message I’m getting:

Could there be an additional step I’m missing, or is there something specific in the Portfolio Starter Kit that requires further configuration?

Thanks again for your help!

[anshumanb (Anshuman Bhardwaj)]

Hi @baldifilippo, thanks for waiting. I was able to get it working by two changes:

• Add a next.config.ts file to your project root.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

• Add alias to your tsconfig

    "paths": {
        "@/*": ["./*"]
     }
  

This will fix the issue for you. I’ll be soon making a PR to the examples to fix this.