Astryx Card

Cards

About

A bordered and elevated Astryx container for discrete, self-contained content and independently interactive items.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Card to your project and fits it to your theme.

Code

How Astryx Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import {Card} from '@/components/ui/astryx-card';
import {Stack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';

const VARIANTS = [
  {variant: 'default' as const, label: 'General', note: '4 tasks due today'},
  {
    variant: 'muted' as const,
    label: 'Archived',
    note: 'No activity in 30 days',
  },
  {variant: 'blue' as const, label: 'Engineering', note: '12 open issues'},
  {variant: 'green' as const, label: 'Marketing', note: '3 campaigns active'},
  {variant: 'orange' as const, label: 'Urgent', note: '2 items need review'},
  {variant: 'purple' as const, label: 'Design', note: '5 drafts in progress'},
];

function CardVariants() {
  return (
    <Stack direction="horizontal" gap={3} style={{flexWrap: 'wrap'}}>
      {VARIANTS.map(({variant, label, note}) => (
        <Card key={variant} variant={variant} width={160} padding={4}>
          <Stack direction="vertical" gap={1}>
            <Text type="body" weight="bold">
              {label}
            </Text>
            <Text type="supporting" color="secondary">
              {note}
            </Text>
          </Stack>
        </Card>
      ))}
    </Stack>
  );
}

export default function CardVariantsDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <CardVariants />
    </div>
  );
}