Item Card Group
A layout component for grouping item cards in list or grid arrangements with section headers and dividers.
Usage
Anatomy
Import the ItemCardGroup component and access all parts using dot notation.
import { ItemCardGroup } from "@thenamespace/uikit";
<ItemCardGroup>
<ItemCardGroup.Header>
<ItemCardGroup.Title />
<ItemCardGroup.Description />
</ItemCardGroup.Header>
</ItemCardGroup>;Grid
ProfilePersonal info
Security2FA & passwords
LanguageEnglish (US)
AppearanceTheme & colors
// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";
import { ItemCardGroup } from "@thenamespace/uikit";
import { ItemCard } from "@thenamespace/uikit/item-card";Grid Three Columns
Devices
Manage your connected devices
MacBook ProActive now
iMac3 days ago
iPhone 151 hour ago
// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";
import { ItemCardGroup } from "@thenamespace/uikit";
import { ItemCard } from "@thenamespace/uikit/item-card";Linked Accounts
Googlejunior@namespace.ninja
AppleNot Linked
GithubNot Linked
LinkedInAccount Linked
NotionNot Linked
// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";
import { ItemCardGroup } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";List
ProfileUpdate your personal information
SecurityManage passwords and 2FA
LanguageChoose your preferred language
// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";
import { Fragment } from "react";
Multiple Sections
Account
ProfileUpdate your personal information
SecurityManage passwords and 2FA
Preferences
LanguageChoose your preferred language
Dark modeUse dark theme across the app
// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";
import { ItemCardGroup } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";Notification Preferences
Notification Preferences
Choose how you receive notifications for each event type
Event Invites
Event Reminders
Event Blasts
// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";
import { useState } from "react";
Permission Levels
Permissions
Control access levels for your team
DocumentsAccess to shared files
BillingPayment and invoices
MembersTeam member management
// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";
import { useState } from "react";
Pressable
Account
Manage your account settings and preferences
// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";
import { Fragment } from "react";
Variants
Default
Surface background with shadow
Secondary
Secondary surface, no shadow
Tertiary
Tertiary surface, no shadow
Outline
Transparent with border, no shadow
Transparent
No background, no border, no shadow
// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";
import { Fragment } from "react";
Wallet List
Funds0x34E6...6255
$0.00
0.0 ETH
0xD9EA...f40e0xD9EA...f40e
$0.00
0.0 ETH
SLMobbin's0x9DC5...621a
$37.09
0.021 ETH
Sam Lee's Wallet0xa98b...4daa
$0.00
0.0 ETH
"use client";
import { Fragment } from "react";
import { ItemCardGroup } from "@thenamespace/uikit";With Header
General
Manage your basic account settings
LanguageChoose your preferred language
ThemeChoose light or dark mode
Dark modeOverride system theme
// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";
import { useState } from "react";
Developer Settings
Source Control
GitHubConnected as @jrgarciadev to repositories in organizations: heroui-inc
GitLabConnect GitLab for Cloud Agents, Bugbot and enhanced codebase context
Integrations
SlackWork with Cloud Agents from Slack
LinearConnect a Linear workspace to delegate issues to Cloud Agents
// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";
import { Fragment } from "react";
CSS Classes
Base & Variant Classes
.item-card-group- Base group container with rounded corners.item-card-group--default- Default variant with surface background and shadow.item-card-group--secondary- Secondary variant with surface-secondary background.item-card-group--tertiary- Tertiary variant with surface-tertiary background.item-card-group--outline- Outline variant with border and transparent background.item-card-group--transparent- Transparent variant with no background, shadow, or rounded corners
Layout Classes
.item-card-group--list- Vertical stack layout with auto-dividers between cards.item-card-group--grid- Multi-column grid layout with spaced cards (column count via--item-card-group-columns)
Element Classes
.item-card-group__header- Optional section heading area.item-card-group__title- Section heading text.item-card-group__description- Section subtext
CSS Variables
--item-card-group-columns- Number of grid columns (default:2, set via thecolumnsprop)
API Reference
ItemCardGroup
The root component. Groups item cards with shared styling.
| Prop | Type | Default | Description |
|---|---|---|---|
layout | 'list' | 'grid' | 'list' | Layout mode |
variant | 'default' | 'secondary' | 'tertiary' | 'outline' | 'transparent' | 'default' | Visual style variant |
columns | 2 | 3 | 2 | Number of grid columns when layout is "grid" |
children | ReactNode | - | Item cards, separators, and headers |
Also supports all native div HTML attributes.
ItemCardGroup.Header
Optional section heading area.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Title and description elements |
Also supports all native div HTML attributes.
ItemCardGroup.Title
Section heading rendered as an h3.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Title text |
Also supports all native h3 HTML attributes.
ItemCardGroup.Description
Section subtext rendered as a p.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Description text |
Also supports all native p HTML attributes.