Astryx Aspect Ratio

Component 1

About

Maintains a fixed width-to-height ratio for its children, regardless of screen size, from Meta's Astryx design system. Use it for media containers like videos, images, thumbnails, or any content that needs consistent proportions. Supports rectangle and ellipse shapes.

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

Code

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

Usage.tsx

'use client';

import AspectRatio from '@/components/ui/astryx-aspect-ratio';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Skeleton} from '@astryxdesign/core/Skeleton';
import {Center} from '@astryxdesign/core/Center';

export default function AspectRatioWithSkeleton() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Center width={600}>
          <AspectRatio ratio={16 / 9}>
            <Skeleton width="100%" height="100%" />
          </AspectRatio>
        </Center>
      </div>
    </Theme>
  );
}