Why Card component is not semantic by default? Card, CardHeader, CardContent CardFooter ustilizing only div element

[cookieMonsterDev]

shadcn-ui is wonderful because it doesn't dictate how your components should be built. However, when it comes to the Card component, I have some concerns. Cards are usually used to display a block or an independent piece of information (like theme settings, a post, etc.) at least that is how I use them. Splitting <Card> content into blocks like <CardHeader>, <CardContent>, and <CardFooter> is a reasonable approach to highlight important information inside the card, display its title, etc. However, the problem arises when each block is built using only the <div> element...

Why use <div> by default? While <div> is great for creating layouts, there's no doubt that we have semantic elements like <article>, <header>, and <footer>. My suggestion is to switch the Card component to use article, the CardHeader to header, and the CardFooter to footer as the default layout elements e.g:

const Card = React.forwardRef<
  HTMLElement,
  React.HTMLAttributes<HTMLElement>
>(({ className, ...props }, ref) => (
  <article
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

Of course, there isn't a single best solution for people who prefer using a <Card> as a wrapper for some other stuff. For those users, there is another way to improve components. React allows you to create elements using the createElement function, which gives you more control over the component. Since different components have different props, it can be even more useful to choose which element you want to use for your card e.g.

const Card = React.forwardRef<
  HTMLElement,
  React.HTMLAttributes<HTMLElement> & { as?: keyof React.ReactHTML }
>(({ as = "article", className, ...props }, ref) =>
  React.createElement(as, {
    ref,
    className: cn(
      "rounded-xl border bg-card text-card-foreground shadow",
      className
    ),
    ...props,
  })
);
Card.displayName = "Card";

// --------------------------------------------

<Card />  //  -> <article></article>

<Card as="div" /> // -> <div></div>
 

Considering all of the above, I believe it's better to show more semantic way of building components. While it's rare for users to edit something like a <Card> component, it's definitely better to have a semantic card from the scratch.

I will be glad to hear you mind regarding matter)

[jefer94]

For keeping the retrocompatibility, it should be better to mark div as default and set the card as article

[cookieMonsterDev]

Okay, I can agree that using a div by default isn’t that bad. But why not use React.createElement approach? Using it avoids situations where you need a card with a different tag instead of a div. Otherwise, you’d have to update the card for all your components or create a duplicate card.

[kerryj89]

I thought about this also, but then realized that he probably kept this generic to allow users to decide what they want to do with it. Some people use card components as consistent stylized containers rather than repeated "mini" containers holding articles for blog posts. Some use it both ways. Better to not assume, imo. <section> would be better, but if you primarily limit card elements to blog type content then <article> would be best.