@8starlabs-ui

Small shadcn-compatible library (10 components) focused on high-utility UI elements absent from standard kits: Button, Flip Clock, Heatmap, JSON Viewer, Marquee, Partition Bar, Scroll Fade, Status Indicator, System Banner, Timeline, and Transport Badge. Targets Next.js + shadcn/ui projects with Tailwind CSS; ships an MCP server for AI-assisted installation. Free, MIT-licensed. Use for: dashboards or admin interfaces that need niche data-display widgets like heatmaps, partition bars, or animated flip clocks without writing them from scratch.

59 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://ui.8starlabs.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://ui.8starlabs.com/r/registry.json

bun bunx shadcn@latest add https://ui.8starlabs.com/r/registry.json

fetch registry curl -s https://ui.8starlabs.com/r/registry.json

Components

59 total

Button ui

A shadcn-compatible button with an optional Stripe-style arrow animation

npx shadcn@latest add https://ui.8starlabs.com/r/button.json

Button example

A button demo component

npx shadcn@latest add https://ui.8starlabs.com/r/button-demo.json

Heatmap ui

A heatmap component

npx shadcn@latest add https://ui.8starlabs.com/r/heatmap.json

Heatmap example

A heatmap demo component

npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-demo.json

Heatmap example

A heatmap demo component

npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-interpolate-demo.json

Heatmap example

A heatmap demo component

npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-display-style-demo.json

Heatmap example

A heatmap demo component

npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-days-of-week-demo.json

Heatmap example

A heatmap demo component

npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-size-demo.json

Heatmap example

A heatmap demo component

npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-custom-colors-demo.json

Heatmap example

A heatmap demo component

npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-custom-display-demo.json

Partition Bar ui

A partition bar component

npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar.json

Partition Bar example

A partition bar demo component

npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar-demo.json

Partition Bar example

A partition bar demo component

npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar-size-demo.json

Partition Bar example

A partition bar demo component

npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar-alignment-demo.json

Partition Bar example

A partition bar demo component

npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar-width-demo.json

Partition Bar example

A partition bar demo component

npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar-custom-colours-demo.json

Partition Bar example

A partition bar demo component

npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar-variants-demo.json

Flip clock ui

A flip clock component

npx shadcn@latest add https://ui.8starlabs.com/r/flip-clock.json

Flip clock example

A flip clock demo component

npx shadcn@latest add https://ui.8starlabs.com/r/flip-clock-demo.json

Flip clock example

A flip clock demo component

npx shadcn@latest add https://ui.8starlabs.com/r/flip-clock-size-demo.json

Flip clock example

A flip clock demo component

npx shadcn@latest add https://ui.8starlabs.com/r/flip-clock-variants-demo.json

Flip clock example

A flip clock demo component

npx shadcn@latest add https://ui.8starlabs.com/r/flip-clock-countdown-demo.json

Flip clock example

A flip clock demo component

npx shadcn@latest add https://ui.8starlabs.com/r/flip-clock-showdays-demo.json

Status indicator ui

A status indicator component

npx shadcn@latest add https://ui.8starlabs.com/r/status-indicator.json

Transport badge ui

A transport badge component

npx shadcn@latest add https://ui.8starlabs.com/r/transport-badge.json

System banner ui

A system banner component

npx shadcn@latest add https://ui.8starlabs.com/r/system-banner.json

Status indicator demo example

A status indicator demo component

npx shadcn@latest add https://ui.8starlabs.com/r/status-indicator-demo.json

Transport badge demo multi station example

A transport badge demo multi station component

npx shadcn@latest add https://ui.8starlabs.com/r/transport-badge-demo-multi-station.json

Transport badge demo single station example

A transport badge demo single station component

npx shadcn@latest add https://ui.8starlabs.com/r/transport-badge-demo-single-station.json

Transport badge demo sizes example

A transport badge demo sizes component

npx shadcn@latest add https://ui.8starlabs.com/r/transport-badge-demo-sizes.json

Transport badge demo station name example

A transport badge demo station name component

npx shadcn@latest add https://ui.8starlabs.com/r/transport-badge-demo-station-name.json

Transport badge demo example

A transport badge demo component

npx shadcn@latest add https://ui.8starlabs.com/r/transport-badge-demo.json

Timeline component ui

A timeline component

npx shadcn@latest add https://ui.8starlabs.com/r/timeline.json

Timeline demo example

A timeline demo component

npx shadcn@latest add https://ui.8starlabs.com/r/timeline-demo.json

Timeline hollow demo example

A timeline hollow demo component

npx shadcn@latest add https://ui.8starlabs.com/r/timeline-hollow-demo.json

Timeline no cards demo example

A timeline no cards demo component

npx shadcn@latest add https://ui.8starlabs.com/r/timeline-nocards-demo.json

Timeline not alternating demo example

A timeline not alternating demo component

npx shadcn@latest add https://ui.8starlabs.com/r/timeline-not-alternating-demo.json

Timeline vertical demo example

A timeline vertical demo component

npx shadcn@latest add https://ui.8starlabs.com/r/timeline-vertical-demo.json

Transport Badge Demo HK example

A transport badge demo for Hong Kong MTR

npx shadcn@latest add https://ui.8starlabs.com/r/transport-badge-demo-hk.json

Scroll Fade component ui

A scroll fade component

npx shadcn@latest add https://ui.8starlabs.com/r/scroll-fade.json

Scroll Fade Demo example

A scroll fade demo component

npx shadcn@latest add https://ui.8starlabs.com/r/scroll-fade-demo.json

Marquee component ui

A marquee component

npx shadcn@latest add https://ui.8starlabs.com/r/marquee.json

Marquee Demo example

A marquee demo component

npx shadcn@latest add https://ui.8starlabs.com/r/marquee-demo.json

Marquee Grayscale Demo example

A marquee grayscale demo component

npx shadcn@latest add https://ui.8starlabs.com/r/marquee-grayscale-demo.json

Marquee Reverse Demo example

A marquee reverse demo component

npx shadcn@latest add https://ui.8starlabs.com/r/marquee-reverse-demo.json

JSON Viewer ui

A JSON viewer component

npx shadcn@latest add https://ui.8starlabs.com/r/json-viewer.json

JSON Viewer example

A JSON viewer demo component

npx shadcn@latest add https://ui.8starlabs.com/r/json-viewer-demo.json

JSON Viewer Features example

A JSON viewer demo showcasing features like line numbers, color indentation, and truncation

npx shadcn@latest add https://ui.8starlabs.com/r/json-viewer-features-demo.json

Video Player ui

A video player component

npx shadcn@latest add https://ui.8starlabs.com/r/video-player.json

Video Player example

A video player demo component

npx shadcn@latest add https://ui.8starlabs.com/r/video-player-demo.json

Video Player Minimal Controls example

A video player demo component with minimal controls

npx shadcn@latest add https://ui.8starlabs.com/r/video-player-minimal-controls-demo.json

Video Player Fit example

A video player demo showing fit behavior

npx shadcn@latest add https://ui.8starlabs.com/r/video-player-fit-demo.json

Video Player Sizing example

A video player demo showing viewport sizing

npx shadcn@latest add https://ui.8starlabs.com/r/video-player-sizing-demo.json

Video Player Repeat example

A video player demo showing repeat playback

npx shadcn@latest add https://ui.8starlabs.com/r/video-player-repeat-demo.json

Video Player Autoplay example

A video player demo showing autoplay

npx shadcn@latest add https://ui.8starlabs.com/r/video-player-auto-demo.json

Video Player Visible Controls example

A video player demo showing always-visible controls

npx shadcn@latest add https://ui.8starlabs.com/r/video-player-visible-controls-demo.json

Video Player Hidden Center Controls example

A video player demo without center controls.

npx shadcn@latest add https://ui.8starlabs.com/r/video-player-hide-center-controls-demo.json

Shake ui

A Stripe-style perspective error shake for form fields, with a declarative wrapper and an imperative hook

npx shadcn@latest add https://ui.8starlabs.com/r/shake.json

Shake Demo example

A shake demo component

npx shadcn@latest add https://ui.8starlabs.com/r/shake-demo.json