Epicenter
Local-first, open source apps
<script lang="ts">
import * as Popover from "$lib/components/ui/popover/index.js";
import { buttonVariants } from "$lib/components/ui/button/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
</script>
<Popover.Root>
<Popover.Trigger class={buttonVariants({ variant: "outline" })}
>Open popover</Popover.Trigger
>
<Popover.Content class="w-80">
<div class="grid gap-4">
<div class="space-y-2">
<h4 class="leading-none font-medium">Dimensions</h4>
<p class="text-sm text-muted-foreground">
Set the dimensions for the layer.
</p>
</div>
<div class="grid gap-2">
<div class="grid grid-cols-3 items-center gap-4">
<Label for="width">Width</Label>
<Input id="width" value="100%" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label for="maxWidth">Max. width</Label>
<Input id="maxWidth" value="300px" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label for="height">Height</Label>
<Input id="height" value="25px" class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label for="maxHeight">Max. height</Label>
<Input id="maxHeight" value="none" class="col-span-2 h-8" />
</div>
</div>
</div>
</Popover.Content>
</Popover.Root>Installation #
pnpm dlx shadcn-svelte@latest add popovernpx shadcn-svelte@latest add popovernpx shadcn-svelte@latest add popoverbun x shadcn-svelte@latest add popoverInstall bits-ui:
pnpm i bits-ui -Dnpm i bits-ui -Dyarn install bits-ui -Dbun install bits-ui -DCopy and paste the following code into your project.
import Close from "./popover-close.svelte";
import Content from "./popover-content.svelte";
import Description from "./popover-description.svelte";
import Header from "./popover-header.svelte";
import Portal from "./popover-portal.svelte";
import Title from "./popover-title.svelte";
import Trigger from "./popover-trigger.svelte";
import Root from "./popover.svelte";
export {
Root,
Content,
Description,
Header,
Title,
Trigger,
Close,
Portal,
//
Root as Popover,
Content as PopoverContent,
Description as PopoverDescription,
Header as PopoverHeader,
Title as PopoverTitle,
Trigger as PopoverTrigger,
Close as PopoverClose,
Portal as PopoverPortal,
};
Usage #
<script lang="ts">
import * as Popover from "$lib/components/ui/popover/index.js";
</script><Popover.Root>
<Popover.Trigger>Open</Popover.Trigger>
<Popover.Content>Place content for the popover here.</Popover.Content>
</Popover.Root>Basic #
A simple popover with a header, title, and description.
<script lang="ts">
import * as Popover from "$lib/components/ui/popover/index.js";
import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
<Popover.Root>
<Popover.Trigger
class={buttonVariants({ variant: "outline", class: "w-fit" })}
>Open Popover</Popover.Trigger
>
<Popover.Content align="start">
<Popover.Header>
<Popover.Title>Dimensions</Popover.Title>
<Popover.Description
>Set the dimensions for the layer.</Popover.Description
>
</Popover.Header>
</Popover.Content>
</Popover.Root>Align #
Use the align prop on Popover.Content to control the horizontal alignment.
<script lang="ts">
import * as Popover from "$lib/components/ui/popover/index.js";
import { buttonVariants } from "$lib/components/ui/button/index.js";
const alignments = ["start", "center", "end"] as const;
</script>
<div class="flex gap-6">
{#each alignments as align (align)}
<Popover.Root>
<Popover.Trigger
class={buttonVariants({
variant: "outline",
size: "sm",
class: "capitalize"
})}
>
{align}
</Popover.Trigger>
<Popover.Content {align} class="w-40">Aligned to {align}</Popover.Content>
</Popover.Root>
{/each}
</div>With Form #
A popover with form fields inside.
<script lang="ts">
import * as Field from "$lib/components/ui/field/index.js";
import * as Popover from "$lib/components/ui/popover/index.js";
import { buttonVariants } from "$lib/components/ui/button/index.js";
import { Input } from "$lib/components/ui/input/index.js";
</script>
<Popover.Root>
<Popover.Trigger class={buttonVariants({ variant: "outline" })}
>Open Popover</Popover.Trigger
>
<Popover.Content class="w-64" align="start">
<Popover.Header>
<Popover.Title>Dimensions</Popover.Title>
<Popover.Description
>Set the dimensions for the layer.</Popover.Description
>
</Popover.Header>
<Field.Group class="gap-4">
<Field.Field orientation="horizontal">
<Field.Label for="width" class="w-1/2">Width</Field.Label>
<Input id="width" value="100%" />
</Field.Field>
<Field.Field orientation="horizontal">
<Field.Label for="height" class="w-1/2">Height</Field.Label>
<Input id="height" value="25px" />
</Field.Field>
</Field.Group>
</Popover.Content>
</Popover.Root>