Blocks

Blocks are opinionated, reusable arrangements of Fractalsvelte components. Import them separately from fractalsvelte/blocks; this keeps the component API focused on primitives and makes layout-level choices explicit. Visit the Blocks reference for live demos, props, and source for every block.

<script lang="ts">
	import { AppShell, Grid, Hero } from 'fractalsvelte/blocks';
</script>

Grid

Grid lays out arbitrary children responsively. Give it a single column count or a breakpoint map; use minColumnWidth when card width should decide when a column wraps.

<script lang="ts">
	import { Grid } from 'fractalsvelte/blocks';
	import { Card } from 'fractalsvelte';
</script>

<Grid columns={{ base: 1, sm: 2, lg: 3 }} gap={16} minColumnWidth="220px">
	<Card>One</Card>
	<Card>Two</Card>
	<Card>Three</Card>
</Grid>

AppShell

AppShell is the outer frame for product interfaces. Its header, footer, and two sidebar snippets are optional, so one block covers a plain application page, a left-navigation layout, a right inspector, and both-sidebars layout. Bind the sidebar state when a menu button elsewhere controls it.

<script lang="ts">
	import { AppShell } from 'fractalsvelte/blocks';

	let leftOpen = $state(true);
</script>

<AppShell bind:leftOpen>
	{#snippet header()}<header>Acme</header>{/snippet}
	{#snippet leftSidebar()}<nav>Primary navigation</nav>{/snippet}
	<main>Application content</main>
</AppShell>

On narrow screens, optional sidebars are hidden so the main content retains a usable width. Pair the bound state with a Drawer or Sheet when the small-screen navigation should open as an overlay.

NavigationSidebar

NavigationSidebar is a ready navigation block for a product area. Use it directly in an AppShell sidebar, or in any ordinary page region.

<script lang="ts">
	import { NavigationSidebar } from 'fractalsvelte/blocks';
</script>

<NavigationSidebar
	brand="Acme"
	items={[
		{ label: 'Overview', href: '/' },
		{ label: 'Settings', href: '/settings' }
	]}
	footerItems={[{ label: 'Help', href: '/help' }]}
/>

Hero

Hero is a responsive introduction block for a marketing page, documentation landing page, or major product area. Use centered for a focused message and split when a media snippet belongs beside the copy.

<script lang="ts">
	import { Hero } from 'fractalsvelte/blocks';
</script>

<Hero
	eyebrow="Fractalsvelte"
	title="Build clearer Svelte interfaces."
	description="Token-driven components and composed layout blocks for Svelte 5."
	layout="split"
	actions={[{ label: 'Get started', href: '/docs/01-introduction' }]}
>
	{#snippet media()}<img src="/preview.png" alt="Application preview" />{/snippet}
</Hero>

PageHeader

PageHeader establishes page hierarchy with optional breadcrumbs, description, and action content. Use it at the top of settings pages, dashboards, and resource lists.

<script lang="ts">
	import { PageHeader } from 'fractalsvelte/blocks';
	import { Button } from 'fractalsvelte';
</script>

<PageHeader
	title="Projects"
	description="Manage your team’s active work."
	breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Projects' }]}
>
	{#snippet actions()}<Button>Create project</Button>{/snippet}
</PageHeader>

SplitLayout

SplitLayout combines an aside and main content into a keyboard-resizable layout. It is the quick choice for navigation/content, list/detail, and inspector patterns; use Resizable directly when you need two independently named panels.

<script lang="ts">
	import { SplitLayout } from 'fractalsvelte/blocks';

	let size = $state(32);
</script>

The aside is a snippet prop. For markup, use the explicit snippet form: ```svelte
<SplitLayout bind:size>
	{#snippet aside()}<nav>Navigation</nav>{/snippet}
	<main>Detail content</main>
</SplitLayout>