Components
Card Slider
A generic card / image / video slider with touch swipe, arrow navigation, progress indicator (bar, dots, or counter), responsive visible count, auto-play, and full color customization.
npx neonblade add card-sliderSingle item · Bar progress · Sides buttons
SECTOR 01
Perimeter relay
Uplink 96%
SECTOR 02
Data harbor
Nodes 14
SECTOR 03
Pulse corridor
Flow 2.4 Tb/s
SECTOR 04
Drone lane
ETA 03:12
SECTOR 05
Vault ingress
Heat 42C
SECTOR 06
Skybridge
Latency 3ms
Responsive · 1→2→3 visible · Dot progress · Bottom buttons · Frame corners
SECTOR 01
Perimeter relay
Uplink 96%
SECTOR 02
Data harbor
Nodes 14
SECTOR 03
Pulse corridor
Flow 2.4 Tb/s
SECTOR 04
Drone lane
ETA 03:12
SECTOR 05
Vault ingress
Heat 42C
SECTOR 06
Skybridge
Latency 3ms
2 visible · Counter progress · Hover buttons · Plus corners · Pink
NEXUS
Quantum lane
Ping 12ms
VOID
Shadow channel
Load 68%
PULSE
Signal tower
Burst x14
FLUX
Transit vault
ETA 01:08
Auto-play · Scan lines · Green
NODE A
Eco reactor
Yield 94%
NODE B
Grid uplink
Load 31%
NODE C
Storage bay
Vault 72%
NODE D
Drone dock
ETA 00:42
NODE E
Relay gate
Jitter 1.9ms
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Slides to render. Pass any ReactNode: <img>, <video>, custom cards, etc. Each child occupies one slide slot. |
visibleCount | number | { sm?: number; md?: number; lg?: number; xl?: number } | 1 | Number of items visible simultaneously. Accepts a plain number (same at all breakpoints) or a responsive object (sm ≥ 640 px, md ≥ 768 px, lg ≥ 1024 px, xl ≥ 1280 px). |
gap | number | 16 | Gap between slide items in pixels. |
showButtons | boolean | true | Show previous / next arrow navigation buttons. |
buttonPosition | "sides" | "bottom" | "sides" | Where to render navigation buttons. "sides" floats them over the left/right edges of the viewport; "bottom" places them in the footer row beside the progress indicator. |
buttonVisibility | "always" | "hover" | "always" | Controls when navigation buttons are visible. "always" keeps them visible at all times; "hover" fades them in only when the slider is hovered. |
buttonCornerSize | number | 10 | Size of the diagonal corner cut on navigation buttons in pixels. |
prevButtonCorner | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "bottom-left" | Which corner is cut on the previous (left) navigation button. |
nextButtonCorner | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "bottom-right" | Which corner is cut on the next (right) navigation button. |
enableSwipe | boolean | true | Enable touch-swipe and mouse-drag navigation. |
swipeThreshold | number | 50 | Minimum drag distance in pixels required to trigger a slide change. |
showProgress | boolean | true | Show a progress indicator below the viewport. |
progressStyle | "bar" | "dots" | "counter" | "bar" | Visual style of the progress indicator. "bar" renders a neon fill bar; "dots" renders corner-cut dot buttons; "counter" shows a "03 / 10" numeric readout. |
loop | boolean | false | Loop back to the first slide after the last one. |
autoPlay | boolean | false | Auto-advance slides at the interval set by autoPlayInterval. Pauses on hover. |
autoPlayInterval | number | 3000 | Interval between auto-advance steps in milliseconds. |
accentColor | string | "#00f3ff" | Primary accent / neon glow color. Used for buttons, progress, corner accents, and all glow effects. |
edgeFadeColor | string | "#000000" | Color for the gradient edge-fades. Set this to your page background color for a natural blend. |
showEdgeFades | boolean | false | Overlay gradient fades on the left and right edges of the viewport. |
showCornerAccents | boolean | true | Display corner accent decorations on each slide/card item. |
cornerAccentStyle | "frame" | "plus" | "frame" | Visual style of the corner accent decorations. "frame" renders L-shaped targeting reticle lines on each corner; "plus" renders an SVG plus/cross icon centered on each corner. |
scanLines | boolean | false | Overlay subtle CRT horizontal scan-lines on the viewport for a retro cyberpunk effect. |
className | string | "" | Additional CSS classes applied to the root wrapper element. |
viewportClassName | string | "" | Additional CSS classes applied to the overflow-hidden viewport element. |
itemClassName | string | "" | Additional CSS classes applied to each slide item slot. |