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

export default function CardShowcase() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <Card width={320}>
        <Stack direction="vertical" gap={2}>
          <Heading level={4}>Card title</Heading>
          <Text type="body" color="secondary">
            Cards group related content with a border and background. Use them for
            profiles, settings panels, or data summaries.
          </Text>
        </Stack>
      </Card>
    </div>
  );
}