SettingCard

A card component for settings options with consistent layout, optional borders, and configurable content width for settings interfaces.

Overview

The SettingCard component provides a consistent layout for settings sections in your application. It's designed to include a title, description, and content area with optional styling options for creating cohesive settings interfaces.

Usage

import { SettingCard } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <SettingCard
      title="Setting Title"
      description="Setting description text"
      border="both"
      contentWidth="w-full lg:w-1/2"
    >
      <div>Setting content goes here</div>
    </SettingCard>
  );
}

Examples

Basic SettingCard

The basic SettingCard includes a title, description, and content area with border styling.

Example Card Border Both

Passing border='both' will show a top and bottom border. Content for right side is passed in as a child.

Settings Cards With Shared Edge

Two SettingCard components share a common edge for related settings.

Example Top Card Border

Passing border='top' will only show a top border.

Example Card Bottom Border

Passing border='bottom' will only show a bottom border.

Settings Cards With Separating Border

Same as above with a border separator for visual distinction.

Example Top Card Border

Passing border='top' will only show a top border.

Example Card Bottom Border

Passing border='bottom' will only show a bottom border.

Square Corners

Single SettingCard with no border prop set for rounded corners.

Square corncers Example

Not passing in border prop will default to rounded corners.

Features

Consistent Layout: Standardized structure for settings sections
Built-in Typography: Title and description handling with proper hierarchy
Optional Borders: Configurable border and divider styling
Content Width: Flexible content width configuration
Responsive Design: Adapts to different screen sizes
Accessibility: Built-in accessibility support
Dark Mode Support: Consistent appearance in light and dark themes

Props

Prop	Type	Default	Description
`title`	`string`	Required	The title of the settings section
`description`	`string`	Required	Description text for the settings section
`children`	`React.ReactNode`	Required	Card content
`className`	`string`	`undefined`	Additional CSS classes
`border`	`"top" \| "bottom" \| "both"`	`undefined`	Border styling options
`contentWidth`	`"default" \| "full" \| string`	`"default"`	Width of the content area

Structure

The SettingCard component is composed of:

Container - Main wrapper with border and spacing
Header Section - Title and description area
Content Area - Flexible content container
Border System - Optional border styling

Styling

The SettingCard component includes default styling with:

Consistent spacing and typography
Border options for visual separation
Responsive design that adapts to container size
Dark mode support with appropriate color schemes
Focus states for accessibility
Customizable through className prop

Border Options

"top": Only shows a top border
"bottom": Only shows a bottom border
"both": Shows both top and bottom borders
undefined: No borders (rounded corners)

Content Width Options

"default": Standard content width
"full": Full width content
Custom classes: Any Tailwind width class (e.g., "w-full lg:w-1/2")

Custom Styling

You can customize the appearance using the className prop:

<SettingCard
  title="Custom Setting"
  description="Custom description"
  className="custom-setting-card"
  contentWidth="w-full lg:w-1/3"
>
  Custom content
</SettingCard>

Accessibility

The SettingCard component is built with accessibility in mind:

Semantic HTML: Uses appropriate HTML elements for structure
Heading Hierarchy: Maintains proper heading hierarchy for screen readers
Color Contrast: Provides sufficient color contrast between text and background
Keyboard Navigation: Supports keyboard navigation through focusable elements
Screen Reader Support: Announces card structure and content appropriately

SettingCard

On this page