Components
Aspect Ratio
Constrains content to a fixed width/height ratio. Purely presentational.
Installation
npx kosmesis add aspect-ratiopnpm dlx kosmesis add aspect-ratioyarn dlx kosmesis add aspect-ratiobunx kosmesis add aspect-ratioCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { Component } from "@praxisjs/decorators";import type { Children } from "@praxisjs/shared";import { cn } from "@/lib/utils";export interface AspectRatioProps { /** Width / height ratio, e.g. 16 / 9. Defaults to 1 (a square). */ ratio?: number; class?: string; id?: string; children?: Children;}/** Purely presentational — no Morphos equivalent, same as upstream shadcn/ui. */@Component()export class AspectRatio extends StatelessComponent<AspectRatioProps> { render() { const { ratio = 1, class: cls, id, children } = this.props; return ( <div id={id} class={cn("relative w-full", cls)} style={{ aspectRatio: String(ratio) }}> {children} </div> ); }}Install the following dependencies:
npm install @praxisjs/csspnpm add @praxisjs/cssyarn add @praxisjs/cssbun add @praxisjs/cssCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { cx, Stylesheet, Styled } from "@praxisjs/css";import { Component } from "@praxisjs/decorators";import type { Children } from "@praxisjs/shared";class AspectRatioStyles extends Stylesheet { $root = this.css({ position: "relative", width: "100%" });}export interface AspectRatioProps { /** Width / height ratio, e.g. 16 / 9. Defaults to 1 (a square). */ ratio?: number; class?: string; id?: string; children?: Children;}/** Purely presentational — no Morphos equivalent, same as upstream shadcn/ui. */@Component()export class AspectRatio extends StatelessComponent<AspectRatioProps> { @Styled(AspectRatioStyles) $s!: AspectRatioStyles; render() { const { ratio = 1, class: cls, id, children } = this.props; return ( <div id={id} class={cx(this.$s.$root, cls)} style={{ aspectRatio: String(ratio) }}> {children} </div> ); }}Examples
Usage
import { AspectRatio } from "@/components/ui/aspect-ratio";
<AspectRatio ratio={16 / 9} class="overflow-hidden rounded-md bg-muted">
<img src="/photo.jpg" alt="" class="size-full object-cover" />
</AspectRatio>Props
| Prop | Type | Default |
|---|---|---|
ratio | number | 1 |