{cards.map((card, index) => ( {card.title} {card.description} ))}

) } `,__src__:"registry/default/example/minimal-card-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCard"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardDescription"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardImage"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardTitle"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/minimal-card"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" MinimalCardDemo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cards "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Sick title"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "How to design with gestures and motion that feel intuitive and natural."'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "https://pbs.twimg.com/media/GgMiuRpa4AAoW2y?format=jpg&name=medium"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Sick title"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "How to design with gestures and motion that feel intuitive and natural."'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "https://pbs.twimg.com/media/GgHZJN0aoAA__92?format=jpg&name=medium"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Sick title"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "How to design with gestures and motion that feel intuitive and natural."'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "https://pbs.twimg.com/media/GgCPjsQacAAWvm3?format=jpg&name=medium"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ]"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-full max-w-5xl "'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex flex-col justify-center rounded-lg p-4"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex flex-wrap items-center justify-center "'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cards"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" index"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"MinimalCard className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"m-2 w-[460px] "'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"MinimalCardImage"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-[320px]"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"MinimalCardTitle"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"MinimalCardDescription"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"card"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ))}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsxs)(l.h1,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(F,{defaultValue:"cli",children:[(0,n.jsxs)(r,{children:[(0,n.jsx)(o,{value:"cli",children:"CLI"}),(0,n.jsx)(o,{value:"manual",children:"Manual"})]}),(0,n.jsx)(t,{value:"cli",children:(0,n.jsx)(p,{children:(0,n.jsxs)(c,{children:[(0,n.jsx)(l.p,{children:"Install the required dependencies."}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:` npx shadcn@latest add "http://skiper-ui.com/registry/minimal-card.json" `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" npx"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "http://skiper-ui.com/registry/minimal-card.json"'})]})})})})]})})}),(0,n.jsx)(t,{value:"manual",children:(0,n.jsxs)(p,{children:[(0,n.jsxs)(c,{children:[(0,n.jsx)(l.p,{children:"Install the required dependencies."}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:` npm i framer-motion clsx tailwind-merge @radix-ui/react-portal `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" npm"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" i"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" framer-motion"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" clsx"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" tailwind-merge"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" @radix-ui/react-portal"})]})})})})]}),(0,n.jsxs)(c,{children:[(0,n.jsx)(l.p,{children:"Add util file"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,children:(0,n.jsxs)(l.code,{"data-language":"bash","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ClassValue,"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" clsx"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "clsx"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "tailwind-merge"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" function cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:".."}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:".inputs:"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ClassValue[]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8",fontWeight:"bold"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"clsx(inputs"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),(0,n.jsxs)(c,{children:["Copy the source code to ",(0,n.jsx)(l.code,{children:"components/ui/minimal-card.tsx"})," "]}),(0,n.jsx)(d,{name:"minimal-card",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from "react" import Image from "next/image" import { cn } from "@/lib/utils" const MinimalCard = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { children?: React.ReactNode } >(({ className, children, ...props }, ref) => (

{children}

)) MinimalCard.displayName = "MinimalCard" const MinimalCardImage = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { src: string; alt: string } >(({ className, alt, src, ...props }, ref) => (

)) MinimalCardImage.displayName = "MinimalCardImage" const MinimalCardTitle = React.forwardRef< HTMLHeadingElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) MinimalCardTitle.displayName = "MinimalCardTitle" const MinimalCardDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) MinimalCardDescription.displayName = "MinimalCardDescription" const MinimalCardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) MinimalCardContent.displayName = "MinimalCardContent" const MinimalCardFooter = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) MinimalCardFooter.displayName = "MinimalCardFooter" export { MinimalCard, MinimalCardImage, MinimalCardTitle, MinimalCardDescription, MinimalCardContent, MinimalCardFooter, } export MinimalCard `,src:"registry/default/ui/minimal-card.tsx",style:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Image "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "next/image"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/lib/utils"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCard "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLAttributes"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" &"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" children"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ReactNode "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" children"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,n.jsx)(l.span,{style:{color:"#FFF4"},children:" eslint-disable-next-line tailwindcss/no-contradicting-classname"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "rounded-[24px] bg-neutral-50 p-2 no-underline shadow-sm transition-colors hover:bg-neutral-100 dark:bg-neutral-800 dark:hover:bg-neutral-800/80 "'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "shadow-[0px_1px_1px_0px_rgba(0,0,0,0.05),0px_1px_1px_0px_rgba(255,252,240,0.5)_inset,0px_0px_0px_1px_hsla(0,0%,100%,0.1)_inset,0px_0px_1px_0px_rgba(28,27,26,0.5)]"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "shadow-[rgba(17,24,28,0.08)_0_0_0_1px,rgba(17,24,28,0.08)_0_1px_2px_-1px,rgba(17,24,28,0.04)_0_2px_4px]"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "dark:shadow-[0_1px_0_0_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(0,0,0,0.1),0_2px_2px_0_rgba(0,0,0,0.1),0_4px_4px_0_rgba(0,0,0,0.1),0_8px_8px_0_rgba(0,0,0,0.1)]"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"MinimalCard"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "MinimalCard"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardImage "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLAttributes"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" &"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "relative mb-6 h-[190px] w-full rounded-[20px]"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "shadow-[0px_1px_1px_0px_rgba(0,0,0,0.05),0px_1px_1px_0px_rgba(255,252,240,0.5)_inset,0px_0px_0px_1px_hsla(0,0%,100%,0.1)_inset,0px_0px_1px_0px_rgba(28,27,26,0.5)]"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "dark:shadow-[0_1px_0_0_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(0,0,0,0.1),0_2px_2px_0_rgba(0,0,0,0.1),0_4px_4px_0_rgba(0,0,0,0.1),0_8px_8px_0_rgba(0,0,0,0.1)]"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"alt"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={200}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={200}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute inset-0 size-full rounded-[16px] object-cover "'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute inset-0 rounded-[16px]"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "absolute inset-0 rounded-[16px]"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "shadow-[0px_0px_0px_1px_rgba(0,0,0,.07),0px_0px_0px_3px_#fff,0px_0px_0px_4px_rgba(0,0,0,.08)]"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "dark:shadow-[0px_0px_0px_1px_rgba(0,0,0,.07),0px_0px_0px_3px_rgba(100,100,100,0.3),0px_0px_0px_4px_rgba(0,0,0,.08)]"'})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "absolute inset-0 rounded-[16px]"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "dark:shadow-[0px_1px_1px_0px_rgba(0,0,0,0.15),0px_1px_1px_0px_rgba(0,0,0,0.15)_inset,0px_0px_0px_1px_rgba(0,0,0,0.15)_inset,0px_0px_1px_0px_rgba(0,0,0,0.15)]"'})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"MinimalCardImage"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "MinimalCardImage"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardTitle "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" HTMLHeadingElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLAttributes"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLHeadingElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"h3"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"mt-2 px-1 text-lg font-semibold leading-tight"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"MinimalCardTitle"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "MinimalCardTitle"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardDescription "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" HTMLParagraphElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLAttributes"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLParagraphElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"px-1 pb-2 text-sm text-neutral-500"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"MinimalCardDescription"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "MinimalCardDescription"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardContent "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLAttributes"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"p-6 pt-0"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"MinimalCardContent"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "MinimalCardContent"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardFooter "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLAttributes"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex items-center p-6 pt-0"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"MinimalCardFooter"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "MinimalCardFooter"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCard"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardImage"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardTitle"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardDescription"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardContent"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCardFooter"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" MinimalCard"})]})]})})})}),(0,n.jsx)(c,{children:"Update the import paths to match your project setup."})]})})]})]})}function T(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(_,e)})):_(e)}var H=T;function a(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(R);})(); ;return Component;

Minimal Card

Sick title

Sick title

Sick title

Installation

Install the required dependencies. npx shadcn@latest add "http://skiper-ui.com/registry/minimal-card.json"Copy

Install the required dependencies.
`npx shadcn@latest add "http://skiper-ui.com/registry/minimal-card.json"`