Components Showcase
A comprehensive collection of highly tactile skeuomorphic UI components. All components are interactive and ready to use in your projects.
Buttons
Premium Glass Buttons
These glass buttons trace the mouse cursor to render a photorealistic specular highlight reflecting within the polished acrylic enclosure.
Heavy Machinery & Alerts
Heavy-duty metallic flip switch with realistic lighting, specular reflections, and physical throw mechanics.
A massive deep-recessed alert button enclosed in a hazard-striped protective housing with heavy drop shadows.
Arcade & Console Buttons
Cards
Raised Card
Extruded appearance with outward shadows creating depth and elevation.
Pressed Card
Inset appearance with inward shadows creating a recessed effect.
Hoverable Card
Interactive card with lift effect on hover. Try hovering over me!
Controls
Classic toggle switch
Checkbox control
Radio buttons
Rotary Controls
Drag up/down to adjust
Step-based dial control
Audio control knob
Sliders
Horizontal Sliders
Vertical Level Sliders
Drag the knobs up or down to adjust the levels
Meters & Indicators
LED Indicators
LEDs can be in 'on' or 'off' state with realistic glow effects
Loading States
Progress Indicators
Progress Bars
Level Meters
The left meter animates automatically to simulate live audio levels
Advanced Controls
Segmented Control
Physical Switches
Interactive Pads
Drum Pad Controller
Click or tap the pads to trigger actions. Each pad provides haptic-style feedback.
Audio Mixer Panel
Channel Strip
Advanced Instruments & Panels
Analog dial meter with a physical swinging needle, curved graphics, and incandescent backlight.
LED Segment/Matrix displays with deep recessed screens, glowing digits, and unlit ghost segments.
Safety Flip Cover Toggle
Rotating Cylinder with inserted Key profile
Heavy brushed aluminum push-to-talk panel
Experimental & Animated Hardware
Nixie Tube (Glowing Wire Grids)
Vacuum Tube (Heats up over time)
CRT Radar / Oscilloscope
Mechanical Telephone Dial with click-to-rotate and spring ratcheting physics.
Reel-to-Reel Tape Deck with mechanical recording transport states.
Modular Synth Patch Bay with click-to-plug interactivity mapping massive rubber cabling.
How to Use
Importing Components
import { SkeuoButton } from '@/components/skeuomorphic/Button';
import { SkeuoKnob } from '@/components/skeuomorphic/Knob';
import { SkeuoSlider } from '@/components/skeuomorphic/Slider';
import { SkeuoSwitch } from '@/components/skeuomorphic/Switch';
import { SkeuoProgressBar } from '@/components/skeuomorphic/ProgressBar';
import { SkeuoPad } from '@/components/skeuomorphic/Pad';
// ... and more!Example Usage
<SkeuoButton variant="primary" client:load>
Click Me
</SkeuoButton>
<SkeuoKnob
min={0}
max={100}
value={50}
label="Volume"
onChange={(value) => console.log(value)}
client:load
/>
<SkeuoSwitch
label="Power Mode"
checked={true}
onChange={(checked) => console.log(checked)}
client:load
/>
<SkeuoProgressBar
value={75}
color="blue"
height="md"
client:load
/> Note: All interactive components require client:load
directive when used in Astro components to enable interactivity.