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 {Heading, Text} from '@astryxdesign/core/Text';

function CardWithSimpleContent() {
  return (
    <Card width={360}>
      <Stack direction="vertical" gap={2}>
        <Heading level={3}>Project Overview</Heading>
        <Text type="body" color="secondary">
          This project tracks the redesign of the onboarding flow. The goal is
          to reduce drop-off by 15% in Q2.
        </Text>
        <Text type="supporting" color="secondary">
          Last updated 2 hours ago
        </Text>
      </Stack>
    </Card>
  );
}

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