Building a Modern UI with ShadCN and V0 Vercel in Remix

Introduction

Tired of spending hours piecing together modern UI components? In this guide, I’ll walk you through how to create a sleek ShadCN UI using V0 Vercel—step by step. Whether you’re using Next.js or Remix, this method will help you streamline your UI development process. Let’s dive in!

Setting Up the Remix App

To get started, create a new Remix app by running the following command in your terminal:

npx create-remix@latest

For this project, we’ll name our app remix-shadcn-v0. I’m choosing Remix instead of Next.js to demonstrate that ShadCN works with different React frameworks.

Once the setup is complete, open the project in Visual Studio Code.

Initializing ShadCN

Now, initialize ShadCN by running:

npx shadcn@latest init

Choose the following options:

• Style: New York
• Color: Gray
• Use CSS variables: Yes

This step installs all necessary dependencies and updates key files such as tailwind.config.ts, tailwind.css, and components.json. Additionally, it creates a utils file inside the app/lib folder.

Cleaning Up Tailwind Config

Open tailwind.config.ts and remove unnecessary new lines and spaces from the fontFamily.sans array for a cleaner setup.

Generating UI Components with V0 Vercel

Next, head over to V0 Chat, where I’ve prepared prompts to generate our pages:

• A landing page
• A login page
• A dashboard

After generating these pages in V0, click “Add to Codebase”, copy the command, and run it in your VS Code terminal. This will install additional dependencies and create relevant files.

Since we’re using Remix, we’ll need to make a few modifications.

🚀Boost your career with Full Stack Software Developer Certificate

Adapting the Landing Page for Remix

Locate the page.tsx file generated by V0 and move its content into _index.tsx inside the routes folder:

1. Copy the Landing Page function from page.tsx and replace the existing Index function in _index.tsx.
2. Copy the imports from page.tsx to _index.tsx.
3. Replace Next.js’s Link import with Remix’s Link.
4. Update href properties to to properties for Remix compatibility.
5. Save the changes and delete page.tsx.

Configuring the Login Page

Now, let’s configure the login page:

1. Move the login folder into routes.
2. Rename page.tsx to route.tsx.
3. Replace useRouter from Next.js with useNavigate from Remix.
4. Update router.push('/dashboard') to navigate('/dashboard').

Finally, update the “Get Started” button in _index.tsx:

• Wrap it in a Link that navigates to /login.
• Change the button text to “Login”.

Running the Application

Run the development server:

npm run dev

Visit localhost:5173 in your browser. The landing page should load, but you may notice some layout misalignment. Fix this by adding flex and justify-center classes to the section tags inside _index.tsx.

Now, when you click Login, you should be redirected to the login page. Entering an email and password (any values for now) should redirect you to the dashboard, which we’ll set up next.

Creating the Dashboard

Back in V0, scroll down to the Simple Dashboard request. Click “Add to Codebase”, copy the command, and run it in VS Code’s terminal.

When prompted to overwrite card.tsx, button.tsx, and input.tsx, select “No” to keep the existing components.

Move the generated dashboard folder into routes and rename page.tsx to route.tsx. Update import paths by replacing ../ with ~/ for Remix compatibility.

Fixing Navigation & Avatars

1. In main-nav.tsx, replace Next.js’s Link with Remix’s Link.
2. Change href properties to to in Links.
3. In recent-sales.tsx, update avatar images by using ui-avatars.com.
4. In user-nav.tsx, replace the user’s avatar with John Smith (JS) initials.

Save the changes and restart the server:

npm run dev

Final Testing

Visit localhost:5173.

• Click Login → redirected to login page.
• Enter credentials → redirected to the dashboard.
• See a fully functional UI, styled and structured using ShadCN and V0!

Conclusion

By leveraging ShadCN and V0 Vercel, we rapidly built a Remix-powered UI with minimal manual coding.

If you’re interested in learning more about Remix’s routing capabilities, be sure to check out my video on Remix Routing!