Blocks

Ready-made blocks built with lily components. Open them full-screen, resize the preview, and copy the source into your apps.

A simple sidebar with navigation grouped by section

A simple sidebar with navigation grouped by section.

routes/sidebar-01/+page.svelte

<script lang="ts">
  import AppSidebar from '$lib/components/app-sidebar.svelte';
  import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
  import { Separator } from '$lib/components/ui/separator/index.js';
  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
</script>

<Sidebar.Provider>
  <AppSidebar />
  <Sidebar.Inset>
    <header class="flex h-14 shrink-0 items-center gap-2 border-b border-(--text)/8 px-4">
      <Sidebar.Trigger class="-ms-1" />
      <Separator orientation="vertical" class="me-2 h-4!" />
      <Breadcrumb.Root>
        <Breadcrumb.List>
          <Breadcrumb.Item class="hidden md:block">
            <Breadcrumb.Link href="##">Building Your Application</Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Separator class="hidden md:block" />
          <Breadcrumb.Item>
            <Breadcrumb.Page>Data Fetching</Breadcrumb.Page>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb.Root>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="grid auto-rows-min gap-4 md:grid-cols-3">
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
      </div>
      <div class="min-h-[100vh] flex-1 rounded-2xl bg-(--text)/5 md:min-h-min"></div>
    </div>
  </Sidebar.Inset>
</Sidebar.Provider>

A sidebar with collapsible sections

A sidebar with collapsible sections.

routes/sidebar-02/+page.svelte

<script lang="ts">
  import AppSidebar from '$lib/components/app-sidebar.svelte';
  import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
  import { Separator } from '$lib/components/ui/separator/index.js';
  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
</script>

<Sidebar.Provider>
  <AppSidebar />
  <Sidebar.Inset>
    <header class="flex h-14 shrink-0 items-center gap-2 border-b border-(--text)/8 px-4">
      <Sidebar.Trigger class="-ms-1" />
      <Separator orientation="vertical" class="me-2 h-4!" />
      <Breadcrumb.Root>
        <Breadcrumb.List>
          <Breadcrumb.Item class="hidden md:block">
            <Breadcrumb.Link href="##">Building Your Application</Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Separator class="hidden md:block" />
          <Breadcrumb.Item>
            <Breadcrumb.Page>Data Fetching</Breadcrumb.Page>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb.Root>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="grid auto-rows-min gap-4 md:grid-cols-3">
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
      </div>
      <div class="min-h-[100vh] flex-1 rounded-2xl bg-(--text)/5 md:min-h-min"></div>
    </div>
  </Sidebar.Inset>
</Sidebar.Provider>

A sidebar with submenus

A sidebar with submenus.

routes/sidebar-03/+page.svelte

<script lang="ts">
  import AppSidebar from '$lib/components/app-sidebar.svelte';
  import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
  import { Separator } from '$lib/components/ui/separator/index.js';
  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
</script>

<Sidebar.Provider>
  <AppSidebar />
  <Sidebar.Inset>
    <header class="flex h-14 shrink-0 items-center gap-2 border-b border-(--text)/8 px-4">
      <Sidebar.Trigger class="-ms-1" />
      <Separator orientation="vertical" class="me-2 h-4!" />
      <Breadcrumb.Root>
        <Breadcrumb.List>
          <Breadcrumb.Item class="hidden md:block">
            <Breadcrumb.Link href="##">Building Your Application</Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Separator class="hidden md:block" />
          <Breadcrumb.Item>
            <Breadcrumb.Page>Data Fetching</Breadcrumb.Page>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb.Root>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="grid auto-rows-min gap-4 md:grid-cols-3">
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
      </div>
      <div class="min-h-[100vh] flex-1 rounded-2xl bg-(--text)/5 md:min-h-min"></div>
    </div>
  </Sidebar.Inset>
</Sidebar.Provider>

A floating sidebar with submenus

A floating sidebar with submenus.

routes/sidebar-04/+page.svelte

<script lang="ts">
  import AppSidebar from '$lib/components/app-sidebar.svelte';
  import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
  import { Separator } from '$lib/components/ui/separator/index.js';
  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
</script>

<Sidebar.Provider>
  <AppSidebar />
  <Sidebar.Inset>
    <header class="flex h-14 shrink-0 items-center gap-2 px-4">
      <Sidebar.Trigger class="-ms-1" />
      <Separator orientation="vertical" class="me-2 h-4!" />
      <Breadcrumb.Root>
        <Breadcrumb.List>
          <Breadcrumb.Item class="hidden md:block">
            <Breadcrumb.Link href="##">Building Your Application</Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Separator class="hidden md:block" />
          <Breadcrumb.Item>
            <Breadcrumb.Page>Data Fetching</Breadcrumb.Page>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb.Root>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="grid auto-rows-min gap-4 md:grid-cols-3">
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
      </div>
      <div class="min-h-[100vh] flex-1 rounded-2xl bg-(--text)/5 md:min-h-min"></div>
    </div>
  </Sidebar.Inset>
</Sidebar.Provider>

A sidebar that collapses to icons

A sidebar that collapses to icons.

routes/sidebar-05/+page.svelte

<script lang="ts">
  import AppSidebar from '$lib/components/app-sidebar.svelte';
  import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
  import { Separator } from '$lib/components/ui/separator/index.js';
  import * as Sidebar from '$lib/components/ui/sidebar/index.js';
</script>

<Sidebar.Provider>
  <AppSidebar collapsible="icon" />
  <Sidebar.Inset>
    <header class="flex h-14 shrink-0 items-center gap-2 border-b border-(--text)/8 px-4">
      <Sidebar.Trigger class="-ms-1" />
      <Separator orientation="vertical" class="me-2 h-4!" />
      <Breadcrumb.Root>
        <Breadcrumb.List>
          <Breadcrumb.Item class="hidden md:block">
            <Breadcrumb.Link href="##">Acme Inc</Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Separator class="hidden md:block" />
          <Breadcrumb.Item>
            <Breadcrumb.Page>Playground</Breadcrumb.Page>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb.Root>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="grid auto-rows-min gap-4 md:grid-cols-3">
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
        <div class="aspect-video rounded-2xl bg-(--text)/5"></div>
      </div>
      <div class="min-h-[100vh] flex-1 rounded-2xl bg-(--text)/5 md:min-h-min"></div>
    </div>
  </Sidebar.Inset>
</Sidebar.Provider>