30:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 31:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 32:Tb4f,import { Children, Fragment, type ComponentProps, type ReactNode } from "react"; import { cn } from "@/lib/utils"; const VARIANTS = { raised: "bg-white text-neutral-700 shadow-[inset_0_-1.5px_0_rgb(0_0_0/0.1),0_0_0_1px_rgb(0_0_0/0.08),0_1px_1px_rgb(0_0_0/0.04)] data-[pressed=true]:translate-y-px data-[pressed=true]:bg-neutral-50 data-[pressed=true]:shadow-[inset_0_1px_1px_rgb(0_0_0/0.08),0_0_0_1px_rgb(0_0_0/0.1)] dark:bg-neutral-800 dark:text-neutral-200 dark:shadow-[inset_0_-1.5px_0_rgb(0_0_0/0.5),inset_0_1px_0_rgb(255_255_255/0.06),0_0_0_1px_rgb(255_255_255/0.08)] dark:data-[pressed=true]:bg-neutral-900 dark:data-[pressed=true]:shadow-[inset_0_1px_2px_rgb(0_0_0/0.5),0_0_0_1px_rgb(255_255_255/0.08)]", outline: "text-neutral-600 ring-1 ring-inset ring-black/[0.12] data-[pressed=true]:bg-neutral-100 data-[pressed=true]:text-neutral-950 dark:text-neutral-300 dark:ring-white/[0.16] dark:data-[pressed=true]:bg-white/[0.1] dark:data-[pressed=true]:text-white", soft: "bg-neutral-100 text-neutral-600 data-[pressed=true]:bg-neutral-200 data-[pressed=true]:text-neutral-950 dark:bg-white/[0.08] dark:text-neutral-300 dark:data-[pressed=true]:bg-white/[0.16] dark:data-[pressed=true]:text-white", } as const; const SIZES = { sm: "h-5 min-w-5 rounded-[5px] px-1 text-[11px]", md: "h-6 min-w-6 rounded-md px-1.5 text-[12px]", lg: "h-8 min-w-8 rounded-lg px-2 text-[13px]", } as const; export type KbdVariant = keyof typeof VARIANTS; export type KbdSize = keyof typeof SIZES; export interface KbdProps extends ComponentProps<"kbd"> { variant?: KbdVariant; size?: KbdSize; /** Show the key held down, e.g. while the user presses it. */ pressed?: boolean; } export function Kbd({ variant = "raised", size = "md", pressed, className, ...props }: KbdProps) { return ( ); } export interface KbdGroupProps extends ComponentProps<"span"> { /** Placed between keys, e.g. "+" or "then". */ separator?: ReactNode; } export function KbdGroup({ separator, className, children, ...props }: KbdGroupProps) { const keys = Children.toArray(children); return ( {separator ? keys.map((key, i) => ( {i > 0 && {separator}} {key} )) : keys} ); } export default Kbd; 33:T51c1,import { Children, Fragment, type ComponentProps, type ReactNode } from "react"; import { cn } from "@/lib/utils"; const VARIANTS = { raised: "bg-white text-neutral-700 shadow-[inset_0_-1.5px_0_rgb(0_0_0/0.1),0_0_0_1px_rgb(0_0_0/0.08),0_1px_1px_rgb(0_0_0/0.04)] data-[pressed=true]:translate-y-px data-[pressed=true]:bg-neutral-50 data-[pressed=true]:shadow-[inset_0_1px_1px_rgb(0_0_0/0.08),0_0_0_1px_rgb(0_0_0/0.1)] dark:bg-neutral-800 dark:text-neutral-200 dark:shadow-[inset_0_-1.5px_0_rgb(0_0_0/0.5),inset_0_1px_0_rgb(255_255_255/0.06),0_0_0_1px_rgb(255_255_255/0.08)] dark:data-[pressed=true]:bg-neutral-900 dark:data-[pressed=true]:shadow-[inset_0_1px_2px_rgb(0_0_0/0.5),0_0_0_1px_rgb(255_255_255/0.08)]", outline: "text-neutral-600 ring-1 ring-inset ring-black/[0.12] data-[pressed=true]:bg-neutral-100 data-[pressed=true]:text-neutral-950 dark:text-neutral-300 dark:ring-white/[0.16] dark:data-[pressed=true]:bg-white/[0.1] dark:data-[pressed=true]:text-white", soft: "bg-neutral-100 text-neutral-600 data-[pressed=true]:bg-neutral-200 data-[pressed=true]:text-neutral-950 dark:bg-white/[0.08] dark:text-neutral-300 dark:data-[pressed=true]:bg-white/[0.16] dark:data-[pressed=true]:text-white", } as const; const SIZES = { sm: "h-5 min-w-5 rounded-[5px] px-1 text-[11px]", md: "h-6 min-w-6 rounded-md px-1.5 text-[12px]", lg: "h-8 min-w-8 rounded-lg px-2 text-[13px]", } as const; export type KbdVariant = keyof typeof VARIANTS; export type KbdSize = keyof typeof SIZES; export interface KbdProps extends ComponentProps<"kbd"> { variant?: KbdVariant; size?: KbdSize; /** Show the key held down, e.g. while the user presses it. */ pressed?: boolean; } export function Kbd({ variant = "raised", size = "md", pressed, className, ...props }: KbdProps) { return ( <kbd data-pressed={pressed || undefined} className={cn( "inline-flex shrink-0 select-none items-center justify-center gap-0.5 font-sans font-medium leading-none tabular-nums", "transition-[transform,box-shadow,background-color,color] duration-75 [&_svg]:size-[1em]", VARIANTS[variant], SIZES[size], className, )} {...props} /> ); } export interface KbdGroupProps extends ComponentProps<"span"> { /** Placed between keys, e.g. "+" or "then". */ separator?: ReactNode; } export function KbdGroup({ separator, className, children, ...props }: KbdGroupProps) { const keys = Children.toArray(children); return ( <span className={cn("inline-flex items-center gap-1 align-middle", className)} {...props}> {separator ? keys.map((key, i) => ( <Fragment key={i}> {i > 0 && <span className="text-[11px] text-neutral-400 dark:text-neutral-500">{separator}</span>} {key} </Fragment> )) : keys} </span> ); } export default Kbd; 34:T424,import { Kbd, KbdGroup } from "@/components/scalar-ui/kbd"; const shortcuts = [ { label: "Search", keys: ["⌘", "K"] }, { label: "New project", keys: ["⌘", "N"] }, { label: "Toggle sidebar", keys: ["⌘", "B"] }, { label: "Command palette", keys: ["⌘", "⇧", "P"] }, { label: "Close", keys: ["Esc"] }, ]; export default function Demo() { return ( Keyboard shortcuts {shortcuts.map((s) => ( {s.label} {s.keys.map((k) => ( {k} ))} ))} ); } 35:T2830,import { Kbd, KbdGroup } from "@/components/scalar-ui/kbd"; const shortcuts = [ { label: "Search", keys: ["⌘", "K"] }, { label: "New project", keys: ["⌘", "N"] }, { label: "Toggle sidebar", keys: ["⌘", "B"] }, { label: "Command palette", keys: ["⌘", "⇧", "P"] }, { label: "Close", keys: ["Esc"] }, ]; export default function Demo() { return ( <div className="w-full max-w-[320px] rounded-[22px] bg-white p-2 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]"> <p className="px-3 pb-1 pt-2 text-[11.5px] font-medium uppercase tracking-[0.06em] text-neutral-400">Keyboard shortcuts</p> {shortcuts.map((s) => ( <div key={s.label} className="flex items-center justify-between rounded-xl px-3 py-2.5 text-[13.5px] text-neutral-700 dark:text-neutral-300"> {s.label} <KbdGroup> {s.keys.map((k) => ( <Kbd key={k}>{k}</Kbd> ))} </KbdGroup> </div> ))} </div> ); } 36:T112e,import { Kbd } from "@/components/scalar-ui/kbd"; export default function Example() { return ( <div className="flex items-center gap-2"> <Kbd>⌘</Kbd> <Kbd>⇧</Kbd> <Kbd>⌥</Kbd> <Kbd>⌃</Kbd> <Kbd>Esc</Kbd> <Kbd>↵</Kbd> </div> ); } 37:T1530,import { Kbd, KbdGroup } from "@/components/scalar-ui/kbd"; export default function Example() { return ( <div className="flex flex-col items-center gap-4"> <KbdGroup separator="+"> <Kbd>Ctrl</Kbd> <Kbd>Shift</Kbd> <Kbd>P</Kbd> </KbdGroup> <KbdGroup separator="then"> <Kbd>G</Kbd> <Kbd>I</Kbd> </KbdGroup> </div> ); } 38:T1cd9,import { Kbd, KbdGroup } from "@/components/scalar-ui/kbd"; export default function Example() { return ( <div className="grid grid-cols-[80px_auto] items-center gap-x-6 gap-y-4 text-[13px] text-neutral-500 dark:text-neutral-400"> {(["raised", "outline", "soft"] as const).map((variant) => ( <div key={variant} className="contents"> <span className="capitalize">{variant}</span> <KbdGroup> <Kbd variant={variant}>⌘</Kbd> <Kbd variant={variant}>K</Kbd> </KbdGroup> </div> ))} </div> ); } 39:Te5a,import { Kbd } from "@/components/scalar-ui/kbd"; export default function Example() { return ( <div className="flex items-center gap-3"> <Kbd size="sm">⌘K</Kbd> <Kbd>⌘K</Kbd> <Kbd size="lg">⌘K</Kbd> </div> ); } 3a:T1369,import { Kbd, KbdGroup } from "@/components/scalar-ui/kbd"; export default function Example() { return ( <p className="max-w-[360px] text-center text-[14px] leading-7 text-neutral-600 dark:text-neutral-400"> Press{" "} <KbdGroup> <Kbd size="sm">⌘</Kbd> <Kbd size="sm">K</Kbd> </KbdGroup>{" "} to search anywhere, or <Kbd size="sm">/</Kbd> to jump to the filter bar. </p> ); } 3b:T5d9,"use client"; import { useEffect, useState } from "react"; import { Kbd } from "@/components/scalar-ui/kbd"; const rows = [ ["Q", "W", "E", "R", "T", "Y"], ["A", "S", "D", "F", "G", "H"], ["Z", "X", "C", "V", "B", "N"], ]; export default function Example() { const [held, setHeld] = useState>(new Set()); useEffect(() => { const down = (e: KeyboardEvent) => setHeld((s) => new Set(s).add(e.key.toUpperCase())); const up = (e: KeyboardEvent) => setHeld((s) => { const next = new Set(s); next.delete(e.key.toUpperCase()); return next; }); const clear = () => setHeld(new Set()); window.addEventListener("keydown", down); window.addEventListener("keyup", up); window.addEventListener("blur", clear); return () => { window.removeEventListener("keydown", down); window.removeEventListener("keyup", up); window.removeEventListener("blur", clear); }; }, []); return ( {rows.map((row, i) => ( {row.map((k) => ( {k} ))} ))} Click here, then type ); } 3c:T50d1,"use client"; import { useEffect, useState } from "react"; import { Kbd } from "@/components/scalar-ui/kbd"; const rows = [ ["Q", "W", "E", "R", "T", "Y"], ["A", "S", "D", "F", "G", "H"], ["Z", "X", "C", "V", "B", "N"], ]; export default function Example() { const [held, setHeld] = useState<Set<string>>(new Set()); useEffect(() => { const down = (e: KeyboardEvent) => setHeld((s) => new Set(s).add(e.key.toUpperCase())); const up = (e: KeyboardEvent) => setHeld((s) => { const next = new Set(s); next.delete(e.key.toUpperCase()); return next; }); const clear = () => setHeld(new Set()); window.addEventListener("keydown", down); window.addEventListener("keyup", up); window.addEventListener("blur", clear); return () => { window.removeEventListener("keydown", down); window.removeEventListener("keyup", up); window.removeEventListener("blur", clear); }; }, []); return ( <div className="flex flex-col items-center gap-4"> <div className="flex flex-col gap-1.5"> {rows.map((row, i) => ( <div key={i} className="flex gap-1.5" style={{ paddingLeft: i * 14 }}> {row.map((k) => ( <Kbd key={k} size="lg" pressed={held.has(k)}> {k} </Kbd> ))} </div> ))} </div> <p className="text-[12.5px] text-neutral-500 dark:text-neutral-400">Click here, then type</p> </div> ); } 2e:["$","section","kbd",{"id":"kbd","aria-labelledby":"kbd-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"kbd-title","className":"sr-only","children":"Kbd"}],false,false]}],false,false]}],false]}],["$","$L30",null,{"children":["$","$L31",null,{"slug":"kbd","gated":{"unlocked":true,"files":[{"name":"kbd.tsx","code":"$32","html":"$33"},{"name":"demo.tsx","code":"$34","html":"$35"}],"examples":{"default":{"name":"default.tsx","code":"import { Kbd } from \"@/components/scalar-ui/kbd\";\n\nexport default function Example() {\n return (\n \n ⌘\n ⇧\n ⌥\n ⌃\n Esc\n ↵\n \n );\n}\n","html":"$36"},"combination":{"name":"combination.tsx","code":"import { Kbd, KbdGroup } from \"@/components/scalar-ui/kbd\";\n\nexport default function Example() {\n return (\n \n \n Ctrl\n Shift\n P\n \n \n G\n I\n \n \n );\n}\n","html":"$37"},"variants":{"name":"variants.tsx","code":"import { Kbd, KbdGroup } from \"@/components/scalar-ui/kbd\";\n\nexport default function Example() {\n return (\n \n {([\"raised\", \"outline\", \"soft\"] as const).map((variant) => (\n \n {variant}\n \n ⌘\n K\n \n \n ))}\n \n );\n}\n","html":"$38"},"size":{"name":"size.tsx","code":"import { Kbd } from \"@/components/scalar-ui/kbd\";\n\nexport default function Example() {\n return (\n \n ⌘K\n ⌘K\n ⌘K\n \n );\n}\n","html":"$39"},"in-text":{"name":"in-text.tsx","code":"import { Kbd, KbdGroup } from \"@/components/scalar-ui/kbd\";\n\nexport default function Example() {\n return (\n \n Press{\" \"}\n \n ⌘\n K\n {\" \"}\n to search anywhere, or / to jump to the filter bar.\n \n );\n}\n","html":"$3a"},"live":{"name":"live.tsx","code":"$3b","html":"$3c"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add kbd","shadcn":"npx shadcn@latest add https://scalarui.com/r/kbd.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":null,"origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L3d","toolbar":"$L3e"}]}],["$L3f","$L40","$L41","$L42","$L43","$L44"]]}]

Kbd

Kbd

Default

Combination

Variants

Size

In Text

Pressed