shadcn-ui/ui codebase analysis: Cards example explained.
In this article, we will learn about Cards example in shadcn-ui/ui. This article consists of the following sections:
- Where is `cards` folder located?
- What is in `cards` folder?
- Components used in `cards` example.
Where is `card` folder located?
Shadcn-ui/ui uses app router and cards folder is located in examples folder, which is located in (app), a route group in Next.js.
What is in `cards` folder?
As you can see from the above image, we have components folder, page.tsx.
page.tsx is loaded in place of {children} in examples/layout.tsx.
Below is the code picked from cards/page.tsx
import { Metadata } from "next"
import Image from "next/image"
import { cn } from "@/lib/utils"
import { DemoCookieSettings } from "./components/cookie-settings"
import { DemoCreateAccount } from "./components/create-account"
import { DemoDatePicker } from "./components/date-picker"
import { DemoGithub } from "./components/github-card"
import { DemoNotifications } from "./components/notifications"
import { DemoPaymentMethod } from "./components/payment-method"
import { DemoReportAnIssue } from "./components/report-an-issue"
import { DemoShareDocument } from "./components/share-document"
import { DemoTeamMembers } from "./components/team-members"
export const metadata: Metadata = {
title: "Cards",
description: "Examples of cards built using the components.",
}
function DemoContainer({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn(
"flex items-center justify-center [&>div]:w-full",
className
)}
{...props}
/>
)
}
export default function CardsPage() {
return (
<>
<div className="md:hidden">
<Image
src="/examples/cards-light.png"
width={1280}
height={1214}
alt="Cards"
className="block dark:hidden"
/>
<Image
src="/examples/cards-dark.png"
width={1280}
height={1214}
alt="Cards"
className="hidden dark:block"
/>
</div>
<div className="hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
<div className="col-span-2 grid items-start gap-6 lg:col-span-1">
<DemoContainer>
<DemoCreateAccount />
</DemoContainer>
<DemoContainer>
<DemoPaymentMethod />
</DemoContainer>
</div>
<div className="col-span-2 grid items-start gap-6 lg:col-span-1">
<DemoContainer>
<DemoTeamMembers />
</DemoContainer>
<DemoContainer>
<DemoShareDocument />
</DemoContainer>
<DemoContainer>
<DemoDatePicker />
</DemoContainer>
<DemoContainer>
<DemoNotifications />
</DemoContainer>
</div>
<div className="col-span-2 grid items-start gap-6 lg:col-span-2 lg:grid-cols-2 xl:col-span-1 xl:grid-cols-1">
<DemoContainer>
<DemoReportAnIssue />
</DemoContainer>
<DemoContainer>
<DemoGithub />
</DemoContainer>
<DemoContainer>
<DemoCookieSettings />
</DemoContainer>
</div>
</div>
</>
)
}Components used in `cards` example.
To find out the components used in this cards example, we can simply look at the imports used at the top of page.
import { DemoCookieSettings } from "./components/cookie-settings"
import { DemoCreateAccount } from "./components/create-account"
import { DemoDatePicker } from "./components/date-picker"
import { DemoGithub } from "./components/github-card"
import { DemoNotifications } from "./components/notifications"
import { DemoPaymentMethod } from "./components/payment-method"
import { DemoReportAnIssue } from "./components/report-an-issue"
import { DemoShareDocument } from "./components/share-document"
import { DemoTeamMembers } from "./components/team-members"Do not forget the modular components inside cards folder.
Want to learn how to build shadcn-ui/ui from scratch? Check out build-from-scratch and give it a star if you like it. Solve challenges to build shadcn-ui/ui from scratch. If you are stuck or need help? solution is available.
About me:
Website: https://ramunarasinga.com/
Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/
Github: https://github.com/Ramu-Narasinga
Email: ramu.narasinga@gmail.com
