Box

The most fundamental layout component that renders a div by default and can be styled with any CSS classes. It serves as a building block for creating other components.

Anatomy

<script>
  import { Box } from "@saas-ui/svelte/layout/box";
</script>

<Box class="p-4 bg-gray-100 rounded">
  Content goes here
</Box>

Examples

As Prop Accessibility

Use the as prop to render Box as a different HTML element while maintaining all styling capabilities.

<Box as="section" class="text-fg-default bg-bg-subtle rounded-md p-4">
	This is a Box rendered as a section
</Box>

Basic Accessibility

Basic Box component with padding and background styling applied via classes.

<Box class="text-fg-inverted w-full bg-(--colors-red-solid) p-4"
	>This is the Box</Box>

Border Accessibility

Apply border styles using Tailwind border utilities for outlined containers.

<Box class="border-border-default text-fg-muted rounded-md border p-4">
	Box with border
</Box>

Composition Accessibility

Compose Box with other components to create complex layouts and card-like structures.

<Box
	class="border-border-default max-w-sm overflow-hidden rounded-lg border"
>
	<img
		src="https://bit.ly/2Z4KKcF"
		alt="Rear view of modern home with pool"
		class="h-48 w-full object-cover"
	/>
	<Box class="space-y-2 p-4">
		<HStack>
			<Badge colour="teal" variant="solid">Superhost</Badge>
			<HStack gap={1} class="font-medium">
				<Icon as={Star} colour="orange" weight="fill" size="sm" />
				<Text>4.5 (34)</Text>
			</HStack>
		</HStack>
		<Text weight="medium">
			Modern home in city center in the heart of historic Los Angeles
		</Text>
		<Text class="text-fg-muted">$435 - 3 beds</Text>
	</Box>
</Box>

Nested Accessibility

Nest multiple Box components to create layered layouts with different styling contexts.

<Box class="bg-bg-subtle rounded-lg p-4">
	<Box class="bg-bg-default rounded-md p-4 shadow-sm">
		<Box class="bg-bg-emphasized rounded p-4">Nested boxes</Box>
	</Box>
</Box>

Shadow Accessibility

Apply shadow effects using Tailwind shadow utilities for elevated appearance.

<Box class="bg-bg-default rounded-md p-4 shadow-md">Box with shadow</Box>

Shorthand Accessibility

Use Tailwind utility classes directly on Box for quick styling without creating custom components.

<Box
	class="w-full rounded-lg bg-(--colors-orange-solid) p-4 text-(--colors-orange-contrast)"
>
	This is the Box with shorthand classes
</Box>

Props

Prop	Type	Default	Description
`as`	`text`	`div`	The HTML element to render.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.