Item Card

Usage

LanguageChoose your preferred language

"use client";

import { ItemCard } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

Anatomy

Import the ItemCard component and access all parts using dot notation.

import { ItemCard } from "@thenamespace/uikit";

<ItemCard>
  <ItemCard.Icon />
  <ItemCard.Content>
    <ItemCard.Title />
    <ItemCard.Description />
  </ItemCard.Content>
  <ItemCard.Action />
</ItemCard>;

Device List

MacBook ProLast active: 2 minutes ago

Active

iMacLast active: 3 days ago

iPhone 15 ProLast active: 1 hour ago

"use client";

import { ItemCard } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";
import { Chip } from "@thenamespace/uikit/chip";

Email Setting

junior@namespace.ninja PrimaryNotifications and account updates will be sent to this address.

"use client";

import { ItemCard } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";
import { Chip } from "@thenamespace/uikit/chip";

Pressable

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { ItemCard } from "@thenamespace/uikit";
import { PressableFeedback } from "@thenamespace/uikit/pressable-feedback";

Title Only

Appearance

"use client";

import { ItemCard } from "@thenamespace/uikit";

import { Icon } from "@/demos/icon";

Variants

DefaultSurface background with shadow

SecondarySecondary surface, no shadow

TertiaryTertiary surface, no shadow

OutlineTransparent with border, no shadow

TransparentNo background, no border, no shadow

"use client";

import { ItemCard } from "@thenamespace/uikit";

import { Icon } from "@/demos/icon";

Vertical Stack

ProfileUpdate your personal information

SecurityManage passwords and 2FA

Cloud syncSync data across your devices

"use client";

import { ItemCard } from "@thenamespace/uikit";

import { Icon } from "@/demos/icon";

Wallet Card

SLMobbin's0x9DC5...621a

$34.99

0.021 ETH

"use client";

import { ItemCard } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

With Multi Select

Event InvitesChoose how you receive invitations

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

With Select

LanguageChoose your preferred language

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

With Switch

Dark modeUse dark theme across the app

"use client";

import { useState } from "react";

import { ItemCard } from "@thenamespace/uikit";

Without Icon

Delete accountPermanently remove your account and all data

"use client";

import { ItemCard } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";

CSS Classes

Base & Variant Classes

.item-card - Base horizontal row layout with rounded corners
.item-card--default - Default variant with surface background and shadow
.item-card--secondary - Secondary variant with surface-secondary background
.item-card--tertiary - Tertiary variant with surface-tertiary background
.item-card--outline - Outline variant with border and transparent background
.item-card--transparent - Transparent variant with no background or shadow

Element Classes

.item-card__icon - Leading icon container (rounded square with default background)
.item-card__content - Title + description area, fills available space
.item-card__title - Primary label text (truncated)
.item-card__description - Secondary text (truncated)
.item-card__action - Trailing slot for buttons, toggles, etc.

API Reference

ItemCard

The root component. Renders a horizontal row container.

Prop	Type	Default	Description
`variant`	`'default' \| 'secondary' \| 'tertiary' \| 'outline' \| 'transparent'`	`'default'`	Visual style variant
`children`	`ReactNode`	-	Card content
`className`	`string`	-	Additional CSS class
`render`	`DOMRenderFunction`	-	Custom render function to override the default `div` element

Also supports all native div HTML attributes.

ItemCard.Icon

Leading icon container.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Icon element

Also supports all native div HTML attributes.

ItemCard.Content

Container for title and description, fills available space.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Title and description elements

Also supports all native div HTML attributes.

ItemCard.Title

Primary label text rendered as a span.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Title text

Also supports all native span HTML attributes.

ItemCard.Description

Secondary descriptive text rendered as a span.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Description text

Also supports all native span HTML attributes.

ItemCard.Action

Trailing action slot for buttons, toggles, or other controls.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Action content

Also supports all native div HTML attributes.