【Vercel v0でUI作成】使い方や料金、デプロイから活用事例までを徹底解説！

A Instagram UI

React

import { Bell, Heart, MessageCircle, PlusSquare, Search } from 'lucide-react'

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

import { Button } from "@/components/ui/button"

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

export default function InstagramUI() {

  return (

    <div className="flex flex-col h-screen max-w-md mx-auto bg-white">

      <Header />

      <ScrollArea className="flex-grow">

        <Stories />

        <Feed />

        <ScrollBar orientation="vertical" />

      </ScrollArea>

      <BottomNav />

    </div>

  )

}

function Header() {

  return (

    <header className="flex items-center justify-between px-4 py-2 border-b">

      <h1 className="text-xl font-semibold">Instagram</h1>

      <div className="flex items-center space-x-4">

        <Button variant="ghost" size="icon">

          <PlusSquare className="w-6 h-6" />

        </Button>

        <Button variant="ghost" size="icon">

          <Heart className="w-6 h-6" />

        </Button>

        <Button variant="ghost" size="icon">

          <MessageCircle className="w-6 h-6" />

        </Button>

      </div>

    </header>

  )

}

function Stories() {

  const stories = [

    { name: "Your Story", image: "/placeholder.svg?height=60&width=60" },

    { name: "user1", image: "/placeholder.svg?height=60&width=60" },

    { name: "user2", image: "/placeholder.svg?height=60&width=60" },

    { name: "user3", image: "/placeholder.svg?height=60&width=60" },

    { name: "user4", image: "/placeholder.svg?height=60&width=60" },

    { name: "user5", image: "/placeholder.svg?height=60&width=60" },

  ]

  return (

    <ScrollArea className="w-full whitespace-nowrap border-b">

      <div className="flex p-4 space-x-4">

        {stories.map((story, index) => (

          <div key={index} className="flex flex-col items-center space-y-1">

            <Avatar className="w-16 h-16 p-0.5 bg-gradient-to-tr from-yellow-400 to-fuchsia-600">

              <AvatarImage src={story.image} alt={story.name} />

              <AvatarFallback>{story.name[0]}</AvatarFallback>

            </Avatar>

            <span className="text-xs">{story.name}</span>

          </div>

        ))}

      </div>

      <ScrollBar orientation="horizontal" />

    </ScrollArea>

  )

}

function Feed() {

  const posts = [

    {

      user: "johndoe",

      avatar: "/placeholder.svg?height=32&width=32",

      image: "/placeholder.svg?height=400&width=400",

      likes: 1234,

      caption: "Beautiful day! #sunshine",

    },

    {

      user: "janedoe",

      avatar: "/placeholder.svg?height=32&width=32",

      image: "/placeholder.svg?height=400&width=400",

      likes: 5678,

      caption: "Enjoying the weekend! #relax",

    },

  ]

  return (

    <div className="space-y-4 pb-20">

      {posts.map((post, index) => (

        <div key={index} className="border-b pb-4">

          <div className="flex items-center justify-between px-4 py-2">

            <div className="flex items-center space-x-2">

              <Avatar>

                <AvatarImage src={post.avatar} alt={post.user} />

                <AvatarFallback>{post.user[0]}</AvatarFallback>

              </Avatar>

              <span className="font-semibold">{post.user}</span>

            </div>

            <Button variant="ghost" size="icon">

              <svg

                xmlns="http://www.w3.org/2000/svg"

                width="24"

                height="24"

                viewBox="0 0 24 24"

                fill="none"

                stroke="currentColor"

                strokeWidth="2"

                strokeLinecap="round"

                strokeLinejoin="round"

                className="w-6 h-6"

              >

                <circle cx="12" cy="12" r="1" />

                <circle cx="19" cy="12" r="1" />

                <circle cx="5" cy="12" r="1" />

              </svg>

            </Button>

          </div>

          <img src={post.image} alt="Post" className="w-full" />

          <div className="px-4 pt-2">

            <div className="flex items-center justify-between">

              <div className="flex items-center space-x-4">

                <Button variant="ghost" size="icon">

                  <Heart className="w-6 h-6" />

                </Button>

                <Button variant="ghost" size="icon">

                  <MessageCircle className="w-6 h-6" />

                </Button>

                <Button variant="ghost" size="icon">

                  <svg

                    xmlns="http://www.w3.org/2000/svg"

                    width="24"

                    height="24"

                    viewBox="0 0 24 24"

                    fill="none"

                    stroke="currentColor"

                    strokeWidth="2"

                    strokeLinecap="round"

                    strokeLinejoin="round"

                    className="w-6 h-6"

                  >

                    <line x1="22" x2="11" y1="3" y2="14" />

                    <polygon points="22 3 15 22 11 14 3 10 22 3" />

                  </svg>

                </Button>

              </div>

              <Button variant="ghost" size="icon">

                <svg

                  xmlns="http://www.w3.org/2000/svg"

                  width="24"

                  height="24"

                  viewBox="0 0 24 24"

                  fill="none"

                  stroke="currentColor"

                  strokeWidth="2"

                  strokeLinecap="round"

                  strokeLinejoin="round"

                  className="w-6 h-6"

                >

                  <polygon points="20 6 9 17 4 12" />

                </svg>

              </Button>

            </div>

            <p className="font-semibold mt-2">{post.likes.toLocaleString()} likes</p>

            <p className="mt-1">

              <span className="font-semibold">{post.user}</span> {post.caption}

            </p>

          </div>

        </div>

      ))}

    </div>

  )

}

function BottomNav() {

  return (

    <nav className="flex items-center justify-around py-2 border-t bg-white">

      <Button variant="ghost" size="icon">

        <svg

          xmlns="http://www.w3.org/2000/svg"

          width="24"

          height="24"

          viewBox="0 0 24 24"

          fill="none"

          stroke="currentColor"

          strokeWidth="2"

          strokeLinecap="round"

          strokeLinejoin="round"

          className="w-6 h-6"

        >

          <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />

          <polyline points="9 22 9 12 15 12 15 22" />

        </svg>

      </Button>

      <Button variant="ghost" size="icon">

        <Search className="w-6 h-6" />

      </Button>

      <Button variant="ghost" size="icon">

        <svg

          xmlns="http://www.w3.org/2000/svg"

          width="24"

          height="24"

          viewBox="0 0 24 24"

          fill="none"

          stroke="currentColor"

          strokeWidth="2"

          strokeLinecap="round"

          strokeLinejoin="round"

          className="w-6 h-6"

        >

          <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />

          <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />

          <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />

        </svg>

      </Button>

      <Button variant="ghost" size="icon">

        <svg

          xmlns="http://www.w3.org/2000/svg"

          width="24"

          height="24"

          viewBox="0 0 24 24"

          fill="none"

          stroke="currentColor"

          strokeWidth="2"

          strokeLinecap="round"

          strokeLinejoin="round"

          className="w-6 h-6"

        >

          <rect width="7" height="7" x="3" y="3" rx="1" />

          <rect width="7" height="7" x="14" y="3" rx="1" />

          <rect width="7" height="7" x="14" y="14" rx="1" />

          <rect width="7" height="7" x="3" y="14" rx="1" />

        </svg>

      </Button>

      <Avatar className="w-6 h-6">

        <AvatarImage src="/placeholder.svg?height=32&width=32" alt="User" />

        <AvatarFallback>U</AvatarFallback>

      </Avatar>

    </nav>

  )

}

Create a UI like this

天気予報サイトのUIを生成して