INDEX // EXPLORER 35 MODS

// 00_GETTING_STARTED

> Introducción
> Instalador CLI
> Servidor MCP (IA)

// 01_CORE UI & TELEMETRY

> Button
> Badge
> Card (TUI Window)
> Kbd
> ProgressBar
> Avatar
> Skeleton
> StatCard v2.4
> Tooltip

// 02_FORM CONTROLS

> Input
> Textarea
> Select
> Slider
> RadioGroup
> Checkbox
> Switch

// 03_LAYOUT & MODALS

> Tabs
> Accordion
> Breadcrumb
> Pagination
> Popover
> Alert
> Callout
> Modal
> Drawer v2.4
> ToastContainer
> CommandPalette
> BentoGrid v2.4

// 04_SCORCH STUDIO

> DataTable v2.4
> CodeBlock
> AudioSynth
> TerminalEmulator
> ComponentPreview
> ThemeStudio
> AsciiGenerator

home / docs / Kbd

// 01_CORE_UI

KEYBOARD

Kbd

Representación física de teclas de atajos de teclado ([Ctrl] + [K]).

// VISTA PREVIA

> KBD KEYBOARD

Ctrl + K | Cmd + Shift + P

// FRAMEWORK:

src/pages/kbd-ejemplo.astro

01 ---

02 import Kbd from '@/components/Kbd.astro';

03 ---

05 <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>

01 import React from 'react';

03 export const Kbd: React.FC<{ children: React.ReactNode }> = ({ children }) => (

04 <kbd className="inline-block px-1.5 py-0.5 font-mono text-[11px] font-extrabold uppercase bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100 border border-black dark:border-slate-600 shadow-[-2px_2px_0px_0px_#000000]">

05 {children}

06 </kbd>

07 );

09 // Ejemplo de atajo:

10 export default function Shortcut() {

11 return (

12 <div className="font-mono text-xs flex items-center gap-1.5">

13 <span>Comando de búsqueda:</span>

14 <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>

15 </div>

16 );

17 }

01

02 <div class="font-mono text-xs flex items-center gap-1.5 text-slate-900 dark:text-slate-100">

03 <span>Comando de búsqueda:</span>

04 <kbd class="inline-block px-1.5 py-0.5 font-mono text-[11px] font-extrabold uppercase bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100 border border-black shadow-[-2px_2px_0px_0px_#000000]">Ctrl</kbd>

05 <span>+</span>

06 <kbd class="inline-block px-1.5 py-0.5 font-mono text-[11px] font-extrabold uppercase bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100 border border-black shadow-[-2px_2px_0px_0px_#000000]">K</kbd>

07 </div>

// INSTALACIÓN

Terminal // Bash BASH

ryukami-ui add kbd

// CÓDIGO DE USO

src/pages/kbd-demo.astro ASTRO