Astryx Aspect Ratio

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.

Astryxby

Meta

Loading preview...

'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>
  );
}