Layout

Settings Card

Grouped settings with consistent row structure.

Settings Card

Grouped settings with consistent row structure.

Layout

Preferences

Keep the workspace focused.

Email updates

Occasional product notes.

View component

Install

npx shadcn@latest add http://localhost:3000/r/settings-card.json

Usage

"use client"

import { SettingsCard, SettingsCardContent, SettingsCardDescription, SettingsCardHeader, SettingsCardTitle, SettingsRow, SettingsRowControl, SettingsRowDescription, SettingsRowLabel, SettingsRowTitle } from "@/components/ui/settings-card"
import { Switch } from "@/components/ui/switch"

export function Example() {
  return (
    <SettingsCard className="max-w-md">
      <SettingsCardHeader><div><SettingsCardTitle>Preferences</SettingsCardTitle><SettingsCardDescription>Workspace defaults.</SettingsCardDescription></div></SettingsCardHeader>
      <SettingsCardContent><SettingsRow><SettingsRowLabel><SettingsRowTitle>Email updates</SettingsRowTitle><SettingsRowDescription>Occasional product notes.</SettingsRowDescription></SettingsRowLabel><SettingsRowControl><Switch /></SettingsRowControl></SettingsRow></SettingsCardContent>
    </SettingsCard>
  )
}

API

SettingsCardSettingsCardContentSettingsCardDescriptionSettingsCardHeaderSettingsCardTitleSettingsRowSettingsRowControlSettingsRowDescriptionSettingsRowLabelSettingsRowTitle

function SettingsCard(props: React.ComponentProps<"section">)

function SettingsCardHeader(props: React.ComponentProps<"div">)

function SettingsCardTitle(props: React.ComponentProps<"h3">)

function SettingsCardDescription(props: React.ComponentProps<"p">)

function SettingsCardContent(props: React.ComponentProps<"div">)

function SettingsRow(props: React.ComponentProps<"div">)

function SettingsRowLabel(props: React.ComponentProps<"div">)

function SettingsRowTitle(props: React.ComponentProps<"p">)

function SettingsRowDescription(props: React.ComponentProps<"p">)

function SettingsRowControl(props: React.ComponentProps<"div">)

Source code +

import * as React from "react"
import { cn } from "cn"

function SettingsCard({ className, ...props }: React.ComponentProps<"section">) {
  return (
    <section
      data-slot="settings-card"
      className={cn("overflow-hidden rounded-2xl border bg-card text-card-foreground", className)}
      {...props}
    />
  )
}

function SettingsCardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="settings-card-header"
      className={cn("flex items-start justify-between gap-4 border-b px-4 py-4", className)}
      {...props}
    />
  )
}

function SettingsCardTitle({ className, ...props }: React.ComponentProps<"h3">) {
  return <h3 data-slot="settings-card-title" className={cn("text-sm font-medium", className)} {...props} />
}

function SettingsCardDescription({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="settings-card-description"
      className={cn("mt-1 text-sm text-muted-foreground", className)}
      {...props}
    />
  )
}

function SettingsCardContent({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="settings-card-content" className={cn("divide-y", className)} {...props} />
}

function SettingsRow({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="settings-row"
      className={cn("flex items-center justify-between gap-6 px-4 py-4", className)}
      {...props}
    />
  )
}

function SettingsRowLabel({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="settings-row-label" className={cn("min-w-0", className)} {...props} />
}

function SettingsRowTitle({ className, ...props }: React.ComponentProps<"p">) {
  return <p data-slot="settings-row-title" className={cn("text-sm font-medium", className)} {...props} />
}

function SettingsRowDescription({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p data-slot="settings-row-description" className={cn("mt-1 text-sm text-muted-foreground", className)} {...props} />
  )
}

function SettingsRowControl({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="settings-row-control" className={cn("shrink-0", className)} {...props} />
}

export {
  SettingsCard,
  SettingsCardContent,
  SettingsCardDescription,
  SettingsCardHeader,
  SettingsCardTitle,
  SettingsRow,
  SettingsRowControl,
  SettingsRowDescription,
  SettingsRowLabel,
  SettingsRowTitle,
}

Registry JSON ↗