Get Started
Migration
Components
- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Formsnap
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Range Calendar
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle Group
- Toggle
- Tooltip
- Typography
Installation
Special sponsor
We're looking for one partner to be featured here.
Support the project and reach thousands of developers.
Reach out⌘ ⇧ ⌥ ⌃ Ctrl + B
<script lang="ts">
import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>
<div class="flex flex-col items-center gap-4">
<Kbd.Group>
<Kbd.Root>⌘</Kbd.Root>
<Kbd.Root>⇧</Kbd.Root>
<Kbd.Root>⌥</Kbd.Root>
<Kbd.Root>⌃</Kbd.Root>
</Kbd.Group>
<Kbd.Group>
<Kbd.Root>Ctrl</Kbd.Root>
<span>+</span>
<Kbd.Root>B</Kbd.Root>
</Kbd.Group>
</div>
Installation
pnpm dlx shadcn-svelte@latest add kbd
npx shadcn-svelte@latest add kbd
bun x shadcn-svelte@latest add kbd
npx shadcn-svelte@latest add kbd
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>
<Kbd.Root>B</Kbd.Root>
Examples
Group
Use the Kbd.Group
component to group keyboard keys together.
Use Ctrl + B Ctrl + K to open the command palette
<script lang="ts">
import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>
<div class="flex flex-col items-center gap-4">
<p class="text-muted-foreground text-sm">
Use
<Kbd.Group>
<Kbd.Root>Ctrl + B</Kbd.Root>
<Kbd.Root>Ctrl + K</Kbd.Root>
</Kbd.Group>
to open the command palette
</p>
</div>
Button
Use the Kbd.Root
component inside a Button
component to display a keyboard key inside a button.
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>
<div class="flex flex-wrap items-center gap-4">
<Button variant="outline" size="sm" class="pr-2">
Accept <Kbd.Root>⏎</Kbd.Root>
</Button>
<Button variant="outline" size="sm" class="pr-2">
Cancel <Kbd.Root>Esc</Kbd.Root>
</Button>
</div>
Tooltip
You can use the Kbd.Root
component inside a Tooltip
component to display a tooltip with a keyboard key.
<script lang="ts">
import * as ButtonGroup from "$lib/components/ui/button-group/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import * as Kbd from "$lib/components/ui/kbd/index.js";
import * as Tooltip from "$lib/components/ui/tooltip/index.js";
</script>
<div class="flex flex-wrap gap-4">
<ButtonGroup.Root>
<Tooltip.Root>
<Tooltip.Trigger>
{#snippet child({ props })}
<Button size="sm" variant="outline" {...props}>Save</Button>
{/snippet}
</Tooltip.Trigger>
<Tooltip.Content>
<div class="flex items-center gap-2">
Save Changes <Kbd.Root>S</Kbd.Root>
</div>
</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root>
<Tooltip.Trigger>
{#snippet child({ props })}
<Button size="sm" variant="outline" {...props}>Print</Button>
{/snippet}
</Tooltip.Trigger>
<Tooltip.Content>
<div class="flex items-center gap-2">
Print Document
<Kbd.Group>
<Kbd.Root>Ctrl</Kbd.Root>
<Kbd.Root>P</Kbd.Root>
</Kbd.Group>
</div>
</Tooltip.Content>
</Tooltip.Root>
</ButtonGroup.Root>
</div>
Input Group
You can use the Kbd.Root
component inside a InputGroup.Addon
component to display a keyboard key inside an input group.
⌘ K
<script lang="ts">
import * as Kbd from "$lib/components/ui/kbd/index.js";
import * as InputGroup from "$lib/components/ui/input-group/index.js";
import SearchIcon from "@lucide/svelte/icons/search";
</script>
<div class="flex w-full max-w-xs flex-col gap-6">
<InputGroup.Root>
<InputGroup.Input placeholder="Search..." />
<InputGroup.Addon>
<SearchIcon />
</InputGroup.Addon>
<InputGroup.Addon align="inline-end">
<Kbd.Root>⌘</Kbd.Root>
<Kbd.Root>K</Kbd.Root>
</InputGroup.Addon>
</InputGroup.Root>
</div>