nextjs shadcn 콤포넌트 버튼 사용하기

nextjs 초기 프로젝트 설정에서 shadcn 초기화 했었는데요. 이제 버튼과 같은 컴포넌트 추가해서 사용할 수 있습니다.

npx shadcn-ui@latest add button

components 폴더에 button이 생겨 있을 것입니다. 이제 사용하기만 하면 됩니다.

      <Button className="mt-6" size="lg" asChild>
        <Link href="/sign-up">
          Get Taskify for free

Button Components 를 사용하여 링크로 연결하는 예제입니다.

import localFont from "next/font/local"
import Link from "next/link";

import { Medal } from "lucide-react";
import { cn } from "@/lib/utils";
import { Poppins } from "next/font/google";
import { Button } from "@/components/ui/button";

const headingFont = localFont({
  src: "../../public/fonts/font.woff2"

const textFont = Poppins({
  subsets: ["latin"],
  weight: [

const MarkingPage = () => {
  return (
    <div className="flex items-center justify-center flex-col">
      <div className={cn(
        "flex items-center justify-center flex-col",
        <div className="mb-4 flex items-center border shadow-sm p-4 bg-amber-100 text-amber-700 rounded-full uppercase">
          <Medal className="h-6 w-6 mr-2" />
          Landing Page
        <h1 className="text-3xl md:text-6xl text-center text-neutral-800 mb-6">
          Taskify helps team move
        <div className="text-3xl md:text-6xl bg-gradient-to-r from-fuchsia-600 to-pink-600 text-white px-4 p-2 rounded-md pb-4 w-fit">
          work forward.
      <div className={cn(
        "text-sm md:text-xl text-neutral-400 mt-4 max-w-xs md:max-w-2xl text-center mx-auto",
        Collaborate, manage projects, and reach new producitivity peaks.
        From high rises to the home office, the way your team works is unique - accomplish it all with Taskify.
      <Button className="mt-6" size="lg" asChild>
        <Link href="/sign-up">
          Get Taskify for free

export default MarkingPage;

Leave a Comment