shadcn-ui/ui codebase analysis: Cards example explained.
Tags: javascript, opensource, nextjs, shadcnui
Published: 2024-06-13 20:51:25

In this article, we will learn about [Cards](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/cards) example in shadcn-ui/ui. This article consists of the following sections:

![](https://media.licdn.com/dms/image/D4E12AQHLtMZpmILvIQ/article-inline_image-shrink_1000_1488/0/1718311605970?e=1723680000&v=beta&t=2RrBqadWeDNOs8DVD7YYGiaUE04DuLj8Y1mq-imAxFQ)

1.  Where is cards folder located?
2.  What is in cards folder?
3.  Components used in cards example.

Where is card folder located?
-----------------------------

Shadcn-ui/ui uses app router and [cards folder](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/cards) is located in [examples](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples) folder, which is located in [(app)](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)), [a route group in Next.js](https://medium.com/@ramu.narasinga_61050/app-app-route-group-in-shadcn-ui-ui-098a5a594e0c).

![](https://media.licdn.com/dms/image/D4E12AQEvsx2Vlw9-aQ/article-inline_image-shrink_1500_2232/0/1718311604828?e=1723680000&v=beta&t=enAkQY57SVHGQUCY89Piv19Q1nQZpNQERiphsNZ8G-0)

What is in cards folder?
------------------------

As you can see from the above image, we have components folder, page.tsx.

[page.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/cards/page.tsx) is loaded in place of [{children} in examples/layout.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/layout.tsx#L55).

Below is the code picked from cards/page.tsx

```js
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.

```js
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](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/cards/components) inside cards folder.

![](https://media.licdn.com/dms/image/D4E12AQH2jjxEUuV3UA/article-inline_image-shrink_1000_1488/0/1718311605190?e=1723680000&v=beta&t=hj6mR171La32FzplQRJ_Pkg_AtVA909sL89c75gAMyA)

> _Want to learn how to build shadcn-ui/ui from scratch? Check out_ [_build-from-scratch_](https://github.com/Ramu-Narasinga/build-from-scratch) _and give it a star if you like it._ [_Solve challenges_](https://tthroo.com/) _to build shadcn-ui/ui from scratch. If you are stuck or need help?_ [_solution is available_](https://tthroo.com/build-from-scratch)_._

About me:
---------

Website: [https://ramunarasinga.com/](https://ramunarasinga.com/)

Linkedin: [https://www.linkedin.com/in/ramu-narasinga-189361128/](https://www.linkedin.com/in/ramu-narasinga-189361128/)

Github: [https://github.com/Ramu-Narasinga](https://github.com/Ramu-Narasinga)

Email: [ramu.narasinga@gmail.com](mailto:ramu.narasinga@gmail.com)

References:
-----------

1.  [https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/cards](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/cards)
2.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/cards/page.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/cards/page.tsx)
3.  [https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/cards/components](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/cards/components)