TkxCard

import { TkxCard, TkxCardHeader, TkxCardBody, TkxCardFooter } from 'tekivex-ui';

<TkxCard>
  <TkxCardHeader title="Account settings" subtitle="Update your details" />
  <TkxCardBody>
    {/* … */}
  </TkxCardBody>
  <TkxCardFooter>
    <TkxButton>Save</TkxButton>
  </TkxCardFooter>
</TkxCard>

Variants

Default surface — clean and minimal.

Outlined — border-only.

Elevated — drop-shadow lift.

Default

<TkxCard>
  <TkxCardBody>Default surface — clean and minimal.</TkxCardBody>
</TkxCard>

Outlined

<TkxCard variant="outlined">
  <TkxCardBody>Border-only — for dense layouts.</TkxCardBody>
</TkxCard>

Glass

<TkxCard variant="glass">
  <TkxCardBody>Backdrop-blur over patterned backgrounds.</TkxCardBody>
</TkxCard>

Elevated

<TkxCard variant="elevated">
  <TkxCardBody>Drop-shadow lifts the card above the canvas.</TkxCardBody>
</TkxCard>

Header + body + footer

Account settings

Update your profile details

Name, email, password, two-factor authentication, and connected services. Changes save automatically.

CancelSave changes

Composed with other components

API key

rotates every 90 days

active

tkx_•••••••••••••••••8a3f

Padding scale

<TkxCard padding="sm">Compact</TkxCard>
<TkxCard padding="md">Default</TkxCard>
<TkxCard padding="lg">Roomy</TkxCard>

RSC compatible

TkxCard and its sub-components use no hooks or browser APIs. They render in Next.js Server Components without 'use client':

// app/dashboard/page.tsx — Server Component
import { TkxCard, TkxCardBody } from 'tekivex-ui';

export default async function Page() {
  const data = await fetch('https://api/...').then(r => r.json());
  return (
    <TkxCard>
      <TkxCardBody>{data.message}</TkxCardBody>
    </TkxCard>
  );
}

Props

TkxCard

Prop	Type	Required	Description
variant	'default' | 'outlined' | 'glass' | 'elevated'		Visual style. Defaults to default.
padding	'sm' | 'md' | 'lg'		Inner spacing. Defaults to md.
as	React.ElementType		Override the rendered element (default <article>).

TkxCardHeader

Prop	Type	Required	Description
title	ReactNode		Title row — text or composed element.
subtitle	ReactNode		Subtitle below the title.
action	ReactNode		Trailing action slot (e.g. menu button).

TkxCardBody / TkxCardFooter

Both accept any ReactNode children and forward style / className.

Accessibility

• Renders as <article> by default — semantic landmark.
• No interactive role unless you nest a button or link inside.
• Avoid wrapping the entire card in onClick; nest a <TkxButton as="a"> or <a> instead, so screen-reader users get the right cue.

Source

src/components/TkxCard.tsx