> [ SALTAR AL CONTENIDO PRINCIPAL ]
0xRYUKAMI_UI // SCORCH_OS v4.1.0
RYUKAMI // UI
// 02_MODULAR_BLOCKS_LIBRARY

BLOCKS & TEMPLATES

Pantallas completas, formularios de autenticación, matrices de características, paneles de telemetría y pies de página listos para copiar y pegar estilo 8bitcn / shadcn blocks.

TOTAL: 10 PLANTILLAS LISTAS
IR A: #hero #features #cta #faq #login #bento #table #shell #ascii #gaming-hud #footer
// BLOCK 01: HERO HEADER SECTION MARKETING
deps: button, badge, icon HeroBlock.astro
v2.4 // PRODUCTION READY

CONSOLA TUI & SISTEMA NEO-BRUTALISTA

// ARQUITECTURA DE SOFTWARE MODERNO

Componentes sólidos con esquinas de 0px, bordes de 2px, sombras duras hacia abajo-izquierda y síntesis acústica en tiempo real con Web Audio API.

> EXPLORAR COMPONENTES VER GUÍA CLI
src/blocks/HeroBlock.astro ASTRO
01 import HeroBlock from '@/blocks/HeroBlock.astro';
02  
03 <HeroBlock
04 tag="v2.4 // PRODUCTION READY"
05 title="CONSOLA TUI & SISTEMA NEO-BRUTALISTA"
06 primaryCtaText="EXPLORAR COMPONENTES"
07 primaryCtaHref="/docs/components"
08 />
// BLOCK 02: FEATURES GRID MATRIX MARKETING
deps: badge FeaturesBlock.astro
FEATURE_MATRIX
4 FEATURES

CARACTERÍSTICAS DEL SISTEMA // CAPABILITIES

[01] 0px RADIUS

ZERO BORDER RADIUS

Estética mecánica cruda sin curvas decorativas. Bordes sólidos de 2px y contraste WCAG AA.

[02] -4px 4px

SOMBRAS DURAS BRUTALISTAS

Sombras proyectadas abajo-izquierda con 0px de desenfoque y animación de click acelerada por GPU.

[03] 0 KiB ASSETS

SÍNTESIS WEB AUDIO API

Síntesis acústica procedural en tiempo real emulando pulsadores Cherry MX mecánicos sin archivos MP3.

[04] APPSEC

CLI & INTEGRIDAD SHA-256

Instalador autónomo con verificación de firma hash y prevención estricta de Path Traversal.

src/blocks/FeaturesBlock.astro ASTRO
01 import FeaturesBlock from '@/blocks/FeaturesBlock.astro';
02  
03 <FeaturesBlock title="CAPACIDADES DEL NÚCLEO" />
// BLOCK 03: CTA CONVERSIÓN & NEWSLETTER MARKETING
deps: button, input, badge CtaBlock.astro
CTA_DISPATCH
TERMINAL_BROADCAST // READY

CONVIÉRTETE EN OPERADOR DE RYUKAMI

Recibe actualizaciones de nuevos bloques, componentes y tokens W3C directamente en tu terminal.

tty://
src/blocks/CtaBlock.astro ASTRO
01 import CtaBlock from '@/blocks/CtaBlock.astro';
02  
03 <CtaBlock title="CONVIÉRTETE EN OPERADOR" buttonText="REGISTRAR TTY" />
// BLOCK 04: ACCORDION FAQ BLOCK APPLICATION
deps: accordion, badge FaqBlock.astro
FAQ_DATABASE
4 ITEMS // ACCESSIBLE

PREGUNTAS FRECUENTES (FAQ)

01 ¿Por qué cero border-radius (0px) en todo el sistema?

El Neo-Brutalismo prescinde de curvas para emular la precisión táctil de consolas industriales y terminales CRT clásicas.

02 ¿Cómo funciona la instalación vía CLI ryukami-ui?

Ejecutas "ryukami-ui add <componente>" y el CLI descarga el código Astro directamente a tu directorio src/components/ verificando su hash criptográfico SHA-256.

03 ¿Se requiere JavaScript en el cliente para los diálogos?

No. Componentes como Modal, Drawer y Popover utilizan las APIs estándar <dialog closedby="any"> y popover="auto" con cero dependencias externas.

04 ¿Cómo se integra el servidor MCP con agentes de IA?

Corriendo "ryukami-ui mcp", el CLI expone un servidor JSON-RPC 2.0 por stdio para herramientas como Claude, Antigravity y OpenCode.

src/blocks/FaqBlock.astro ASTRO
01 import FaqBlock from '@/blocks/FaqBlock.astro';
02  
03 <FaqBlock />
// BLOCK 05: LOGIN / OPERATOR AUTH FORM APPLICATION
deps: input, button, checkbox, badge LoginBlock.astro
SESSION_LOGIN
TTY1 // SECURE

0xAUTH // ACCESO OPERADOR

Introduce tus credenciales para autenticar tu terminal en el clúster Scorch.

id://
key://
¿Olvidaste clave?
src/blocks/LoginBlock.astro ASTRO
01 import LoginBlock from '@/blocks/LoginBlock.astro';
02  
03 <LoginBlock title="0xAUTH // ACCESO OPERADOR" />
// BLOCK 06: BENTO DASHBOARD MATRIX APPLICATION
deps: bento-grid BentoGrid.astro
0xVAULT // OBSIDIAN_BRIDGE SYNCED
// W3C DESIGN TOKENS
35 MÓDULOS

Sincronización directa entre ryukami-ui y tu bóveda de notas.

BENTO_CELL // 2X ● ACTIVE
0xSHA256 // INTEGRITY VERIFIED
// SUPPLY CHAIN
100% PASS

Auditoría local de integridad con ryukami-ui diff.

BENTO_CELL // 1X ● ACTIVE
0xMCP // AI_SERVER AGENT
// JSON-RPC 2.0
STDIO READY

Servidor MCP integrado para agentes de inteligencia artificial.

BENTO_CELL // 1X ● ACTIVE
0xSCORCH // ZERO_JS PERF
// HTML5 NATIVE DIALOGS
0 KiB BUNDLE

Componentes accesibles con dialog nativo y aceleración por GPU.

BENTO_CELL // 2X ● ACTIVE
src/components/BentoGrid.astro ASTRO
01 import BentoGrid from '@/components/BentoGrid.astro';
02  
03 <BentoGrid
04 columns={3}
05 items={[
06 { title: '0xVAULT', metric: '35 MÓDULOS', span: '2', variant: 'crimson' },
07 { title: '0xSHA256', metric: '100% PASS', span: '1', variant: 'cyan' },
08 ]}
09 />
// BLOCK 07: TUI SERVICE REGISTRY TABLE APPLICATION
deps: data-table, badge DataTable.astro
ACTIVE_CLUSTER_NODES // 0xGRID 4 ROWS
FILTER //
PostgreSQL 17.2 tcp://5432 99.98% ● ONLINE
Redis 7.2 LTS tcp://6379 100.0% ● ONLINE
Cloudflare Pages CDN https://ryukami-ui.pages.dev 100.0% ● ONLINE
Ryukami MCP Server jsonrpc://ryukami-ui-mcp 100.0% ● STABLE
src/components/DataTable.astro ASTRO
01 import DataTable from '@/components/DataTable.astro';
02  
03 <DataTable
04 title="ACTIVE_CLUSTER_NODES"
05 columns={[{ key: 'service', label: 'Servicio' }, { key: 'status', label: 'Estado' }]}
06 rows={[{ service: 'PostgreSQL 17.2', status: 'ONLINE' }]}
07 />
// BLOCK 08: LIVE TUI 0xSCORCH_SHELL STUDIO
deps: terminal-emulator TerminalEmulator.astro
0xSCORCH_SHELL
TTY1 // ROOT
COMANDOS RÁPIDOS:
◆ Ryukami Scorch-OS v4.1 — Escribe help o pulsa cualquiera de los botones superiores. 
  ╔══════════════════════════════════════════════════════════════╗
  ║  [0xKERNEL] RYUKAMI LABS // SCORCH SYSTEM ONLINE (v4.1.0)    ║
  ║  Stack: Astro 7.4.0 · Tailwind 4.3.3 · TypeScript 7.0.2      ║
  ╚══════════════════════════════════════════════════════════════╝
src/components/TerminalEmulator.astro ASTRO
01 import TerminalEmulator from '@/components/TerminalEmulator.astro';
02  
03 <TerminalEmulator />
// BLOCK 09: 8-BIT ASCII FORGE ENGINE STUDIO
deps: ascii-generator AsciiGenerator.astro
0xSCORCH_ASCII // LIVE_MATRIX_FORGE WEB ENGINE v1.0
>_
PRESETS:
TINTA:
STDOUT // 8-BIT BITMAP MATRIX 
 
 
 
  
 
 
 
  src/components/AsciiGenerator.astro  ASTRO  
 
  
 
 
 
 
  01  import AsciiGenerator from '@/components/AsciiGenerator.astro'; 
  02    
  03  <AsciiGenerator /> 
 
 
 
  
 
  
 
 
 // BLOCK 10: 8-BIT RPG GAMING HUD & TELEMETRY  APPLICATION  
 
 deps: progress-bar, badge, button GamingHudBlock.astro 
 
 
 
 
  
0xRPG_HUD // GAMING_TELEMETRY
 
 
 - □ × 
 
 
 
 
 
 

[>_]

 
 OPERADOR ACTIVO RYU_OPERATOR_01 
  LVL 42   ARCHITECT  
 
 
 
 
 CLASE: SCORCH_ENGINEER 
 
 ARMADURA: NEO_BRUTAL_MK4 
 
 SECTOR: 0xSECTOR_404 
 
 
  
 ACCIONES RÁPIDAS: 
 
 [1] POTION 
 
 [2] MANA 
 
 [3] SHIELD 
 
 [4] BURST 
 
 
 
  
 
 
// ESTADO VITAL & ENERGÍA
 
[ESTADO: COMBATE_ACTIVO]
 
  
 
 
  VIDA [HP]  850 / 1000 HP   
 
   85%
 
 
  
 
   
 
  
 
 
  ENERGÍA [MP]  320 / 500 MP   
 
   64%
 
 
  
 
   
 
  
 
 
  EXPERIENCIA [XP]  100 / 100 XP   [ ! ] LEVEL UP!  
 
   100%
 
 
  
 
   
 
  
 
 
OBJETIVO EN RANGO: 0xBOSS_CORRUPT
 4,200 / 5,000 HP 
 
 
 
  BOSS INTEGRITY   
 
   84%
 
 
  
 
   
 
 
 
 
 
 
 
 
 
  src/blocks/GamingHudBlock.astro  ASTRO  
 
  
 
 
 
 
  01  import GamingHudBlock from '@/blocks/GamingHudBlock.astro'; 
  02    
  03  <GamingHudBlock playerName="RYU_OPERATOR_01" level={42} /> 
 
 
 
  
 
   
 
    
    
   0xCOMMAND_PALETTE // SCORCH_CLI  
  
  
 
 
  
 >_  
  
  
 
  ↑   ↓  Navegar  Enter  Abrir  Esc  Salir 
 RYUKAMI // v2.4.0