Aspect Ratio

Displays content within a desired ratio.

package examples import "github.com/axadrn/shadcn-templ/v2/components/aspectratio"

package examples import "github.com/axadrn/shadcn-templ/v2/components/aspectratio" templ AspectRatioDemo() {	@aspectratio.AspectRatio(aspectratio.Props{		Ratio: "16/9",		Class: "w-full max-w-sm rounded-lg bg-muted",	}) {		<img			src="/assets/img/aspect_ratio_placeholder.jpeg"			alt="Photo"			class="absolute inset-0 h-full w-full rounded-lg object-cover grayscale dark:brightness-20"		/>	}}

Installation

shadcn-templ add aspect-ratio

Copy and paste the following code into your project.

components/aspectratio/aspectratio.templ

package aspectratio import "github.com/axadrn/shadcn-templ/v2/utils" type Props struct {	ID         string	Class      string	Attributes templ.Attributes	// Ratio is the aspect ratio as a CSS ratio value, e.g. "16/9".	Ratio string} templ AspectRatio(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="aspect-ratio"		if p.Ratio != "" {			style={ "--ratio: " + p.Ratio }		}		class={ utils.CN("relative aspect-(--ratio)", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>}

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/aspectratio"

@aspectratio.AspectRatio(aspectratio.Props{Ratio: "16/9"}) {	<img src="..." alt="Image" class="absolute inset-0 h-full w-full rounded-md object-cover"/>}

Square

A square aspect ratio component using the Ratio: "1/1" prop. This is useful for displaying images in a square format.

package examples import "github.com/axadrn/shadcn-templ/v2/components/aspectratio"

package examples import "github.com/axadrn/shadcn-templ/v2/components/aspectratio" templ AspectRatioSquare() {	@aspectratio.AspectRatio(aspectratio.Props{		Ratio: "1/1",		Class: "w-full max-w-[12rem] rounded-lg bg-muted",	}) {		<img			src="/assets/img/aspect_ratio_placeholder.jpeg"			alt="Photo"			class="absolute inset-0 h-full w-full rounded-lg object-cover grayscale dark:brightness-20"		/>	}}

Portrait

A portrait aspect ratio component using the Ratio: "9/16" prop. This is useful for displaying images in a portrait format.

package examples import "github.com/axadrn/shadcn-templ/v2/components/aspectratio"

package examples import "github.com/axadrn/shadcn-templ/v2/components/aspectratio" templ AspectRatioPortrait() {	@aspectratio.AspectRatio(aspectratio.Props{		Ratio: "9/16",		Class: "w-full max-w-[10rem] rounded-lg bg-muted",	}) {		<img			src="/assets/img/aspect_ratio_placeholder.jpeg"			alt="Photo"			class="absolute inset-0 h-full w-full rounded-lg object-cover grayscale dark:brightness-20"		/>	}}

API Reference

AspectRatio

The AspectRatio component displays content within a desired ratio.

Prop	Type	Default
`Ratio`	`string`	-
`Class`	`string`	-

Alert Dialog Avatar

On This Page

Installation Usage Square Portrait API Reference AspectRatio

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.