How to generate the v0 code with the Typescript and with the Daylight theme

[mikesmallhelp]

Summary

How to generate the v0 code with the Typescript and with the Daylight theme? My v0 application link is https://v0.dev/r/ublMsETX4MQ

I generated the Next.js application with the instructions of this page

https://ui.shadcn.com/docs/installation/next

Then I managed to run

npx v0 add PRXJ3xxPhWh

with my repository

https://github.com/mikesmallhelp/prapp.

Then I added the new component to front page and added the any types for my component file (because there where errors in the Vercel deploy) and after that application was running. But it doesn't have the Daylight theme. I tried to copy globals.css, layout.tsx and tailwind.config.js from the v0 page, but there were errors when copying them.

So please help me. How to use the v0 with the Typescript and with the Daylight theme in your project?

So the v0 page looks like this

and my application looks like this (because the Daylight theme is missing)

Example

https://github.com/mikesmallhelp/prapp

Steps to Reproduce

1. Generate the application with the v0. Use the Daylight theme.
2. Note that v0 doesn't use the Typescript code
3. Create a new project with the instructions https://ui.shadcn.com/docs/installation/next
4. Add your component with the command like this: npx v0 add PRXJ3xxPhWh
5. Add your component to the front page
6. npm run dev
7. Note that the page doesn't contain the Daylight theme.

[pawlean]

Hi @mikesmallhelp!

Could you share what the errors are?

[mikesmallhelp]

Hello @pawlean!

If I copy the globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 36 39% 88%;
    --foreground: 36 45% 15%;
    --primary: 36 45% 70%;
    --primary-foreground: 36 45% 11%;
    --secondary: 40 35% 77%;
    --secondary-foreground: 36 45% 25%;
    --accent: 36 64% 57%;
    --accent-foreground: 36 72% 17%;
    --destructive: 0 84% 37%;
    --destructive-foreground: 0 0% 98%;
    --muted: 36 33% 75%;
    --muted-foreground: 36 45% 25%;
    --card: 36 46% 82%;
    --card-foreground: 36 45% 20%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --border: 36 45% 60%;
    --input: 36 45% 60%;
    --ring: 36 45% 30%;
    --radius: 0rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-body;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }
}

from https://v0.dev/r/ublMsETX4MQ into my project https://github.com/mikesmallhelp/prapp

I got the error

[mikesmallhelp]

There is no sense to copy layout.jsx from https://v0.dev/r/ublMsETX4MQ, because my project is a typescript project.

[mikesmallhelp]

And same situation with the tailwind.config.js file. There is no sense to copy it into my typescript project.

[Aunchers]

So copy over the globals.css file.

As for the tailwind.config.ts
put this code

import type { Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";

/** @type {import('tailwindcss').Config} */
const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        heading: ['var(--font-heading)', ...fontFamily.sans],
        body: ['var(--font-body)', ...fontFamily.mono]
      },
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))'
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))'
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))'
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))'
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))'
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))'
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))'
        },
      },
      borderRadius: {
        xl: `calc(var(--radius) + 4px)`,
        lg: `var(--radius)`,
        md: `calc(var(--radius) - 2px)`,
        sm: `calc(var(--radius) - 4px)`
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out"
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};
export default config;

[mikesmallhelp]

Hello @Aunchers

Thanks for the answer.

"So copy over the globals.css file."

This generates error, see my previous post.

If I copy your tailwind.config.ts, I got

[angelizado]

im like this right now, any update?

[amyegan]

It looks like some important bits of code and configuration are missing. You need to make sure all of the component.jsx, globals.css, layout.jsx, and tailwind.config.js content provided for your v0 component are added to your project. That may require updating in the relevant files to incorporate the component file contents if you are adding to an existing project.

[EarlGeorge]

you need to trigger shift delete and start project init again

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community