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

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