Prev
15
Next

Day 15 - Component Challenge

Challenge UI with Livewire & Alpine.js

Source

Day 15

Day 15

Color Picker & KBD

Color picker with presets and keyboard shortcut display component

Color Picker

Advanced color picker with preset palette, RGB sliders, and hex input.

Features

  • Preset color palette
  • RGB sliders
  • Hex input with validation
  • Native color picker integration
  • Copy to clipboard
  • Livewire binding

With Livewire Binding

Presets

RGB Values

R
G
B

Selected

Selected: #3b82f6

Sizes

Small

Presets

RGB Values

R
G
B

Selected

Medium

Presets

RGB Values

R
G
B

Selected

Large

Presets

RGB Values

R
G
B

Selected

Minimal (no presets)

RGB Values

R
G
B

Selected

Theme Color Selector

Primary Color

Choose your brand color

Presets

RGB Values

R
G
B

Selected

Preview with your selected theme color

Keyboard Shortcuts (KBD)

Stylish keyboard shortcut display for documentation and UX improvement.

Features

  • Automatic key symbol conversion
  • Icon support for special keys
  • Multiple size variants
  • Style variants

Common Shortcuts

Save + S
Copy + C
Paste + V
Undo + Z
Find + F

Navigation Keys

Esc

Sizes

Small Ctrl + + P
Medium Ctrl + + P
Large Ctrl + + P

Variants

Default + K
Outline + K
Ghost + K

In Context

Press + K to open the command palette, or + + P for quick actions. Use Esc to close any dialog.

Single Keys

A S D F G H J K L

Usage Examples

Color Picker Usage

{{-- Basic Color Picker --}}
<x-ui.color-picker value="#3b82f6" />
 
{{-- With Label --}}
<x-ui.color-picker
    label="Brand Color"
    value="#22c55e"
/>
 
{{-- With Livewire Binding --}}
<x-ui.color-picker wire:model.live="color" />
 
{{-- Size Variants --}}
<x-ui.color-picker size="sm" value="#ef4444" />
<x-ui.color-picker size="md" value="#3b82f6" />
<x-ui.color-picker size="lg" value="#8b5cf6" />
 
{{-- Without Presets --}}
<x-ui.color-picker
    value="#f59e0b"
    :showPresets="false"
/>
 
{{-- Without Input Field --}}
<x-ui.color-picker
    value="#ec4899"
    :showInput="false"
/>
 
{{-- Custom Presets --}}
<x-ui.color-picker
    :presets="['#ff0000', '#00ff00', '#0000ff']"
/>

KBD Usage

{{-- Basic Shortcut --}}
<x-ui.kbd keys="cmd + s" />
 
{{-- Multiple Keys (string) --}}
<x-ui.kbd keys="ctrl + shift + p" />
 
{{-- Multiple Keys (array) --}}
<x-ui.kbd :keys="['cmd', 'k']" />
 
{{-- Navigation Keys --}}
<x-ui.kbd keys="up" />
<x-ui.kbd keys="enter" />
<x-ui.kbd keys="esc" />
<x-ui.kbd keys="tab" />
 
{{-- Size Variants --}}
<x-ui.kbd keys="cmd + k" size="sm" />
<x-ui.kbd keys="cmd + k" size="md" />
<x-ui.kbd keys="cmd + k" size="lg" />
 
{{-- Style Variants --}}
<x-ui.kbd keys="cmd + k" variant="default" />
<x-ui.kbd keys="cmd + k" variant="outline" />
<x-ui.kbd keys="cmd + k" variant="ghost" />
 
{{-- In Context --}}
<p>
    Press <x-ui.kbd keys="cmd + k" size="sm" />
    to open the command palette.
</p>