UIPackage
Vue React

Section Card

React layout
Edit on GitHub

Card variant tuned for settings pages — title, description, and content slots, with optional footer for save/cancel actions. The block-level building block for `.../settings/*` routes.

Also available for Vue ->

Installation

$ npx shadcn@latest add https://react.uipkge.dev/r/react/section-card.json

Or with the named registry: npx shadcn@latest add @uipkge-react/section-card

Examples

Props

Name Type / Values Default Required
title string — required
description string — optional
className string — optional
contentClassName string — optional
headerAction

`header-action` named slot.

 React.ReactNode — optional
footer

equivalent of the `footer` named slot.

 React.ReactNode — optional
children React.ReactNode — optional

Dependencies

card

Used by

event-listprogress-breakdownquick-actionstheme-switchtoggle-setting-list

Files (2)

  • components/ui/section-card/section-card.tsx 1.3 kB 
    import * as React from 'react'
import { cn } from '@/lib/utils'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'

export interface SectionCardProps {
  title: string
  description?: string
  className?: string
  contentClassName?: string
  /** Rendered top-right of the header — the React equivalent of the
   *  `header-action` named slot. */
  headerAction?: React.ReactNode
  /** Rendered after the content, outside CardContent — the React
   *  equivalent of the `footer` named slot. */
  footer?: React.ReactNode
  children?: React.ReactNode
}

const SectionCard = React.forwardRef<HTMLDivElement, SectionCardProps>(
  ({ title, description, className, contentClassName, headerAction, footer, children }, ref) => (
    <Card ref={ref} className={cn('flex flex-col', className)}>
      <CardHeader className="pb-4">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-base font-semibold">{title}</CardTitle>
            {description && <CardDescription className="mt-0.5">{description}</CardDescription>}
          </div>
          {headerAction}
        </div>
      </CardHeader>
      <CardContent className={cn('flex-1', contentClassName)}>{children}</CardContent>
      {footer}
    </Card>
  ),
)
SectionCard.displayName = 'SectionCard'

export { SectionCard }
  • components/ui/section-card/index.ts 0.1 kB 
    export { SectionCard, type SectionCardProps } from './section-card'

Raw manifest: https://react.uipkge.dev/r/react/section-card.json