Tile UISolid
Source code

Tile UI · SolidJS

CSR · SSR · SSG

AspectRatio

An SSR-safe SolidJS container that preserves a requested width-to-height ratio.

16:9
import { AspectRatio } from '@tile-ui/solid';
export default function AspectRatioDemo() {
	return (
		<div style={{ width: '100%', 'max-width': '32rem' }}>
			<AspectRatio ratio={16 / 9} style={{ background: 'var(--docs-surface-hover)' }}>
				<div style={{ display: 'grid', width: '100%', height: '100%', 'place-items': 'center' }}>

Use AspectRatio to reserve stable media and preview geometry during SSR.

Registry install

pnpm dlx shadcn@latest add @tile-ui/aspect-ratio

Package usage

import { AspectRatio } from '@tile-ui/solid';

<AspectRatio ratio={16 / 9}>
	<img src="https://example.com/poster.png" alt="Poster" />
</AspectRatio>

Highlights

  • Ratio prop
  • Fills its container

Registry dependencies

Item Purpose
aspect-ratio Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

AspectRatio

Prop Type Default
ratio number 1