---
name: "@8starlabs-ui"
slug: "8starlabs-ui"
description: "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."
category: "Niche/single-purpose"
tags: ["accessibility", "aesthetic", "ai", "animation", "audio", "buttons", "cards", "charts", "dashboard", "forms", "hooks", "maps", "media", "navigation", "overlays"]
framework: "react"
license: "MIT"
author: "8starlabs"
website: "https://ui.8starlabs.com"
github: "https://github.com/8starlabs/ui"
registry: "https://ui.8starlabs.com/r/registry.json"
pro: false
pro_url: null
github_stars: 117
component_count: 74
generated_at: "2026-07-28T08:59:05.895Z"
---

# @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.

## Links

- Website: https://ui.8starlabs.com
- GitHub: https://github.com/8starlabs/ui
- Registry JSON: https://ui.8starlabs.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/8starlabs-ui
- This file: https://sh4dcn.vercel.app/md/8starlabs-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.8starlabs.com/r/registry.json
pnpm dlx shadcn@latest add https://ui.8starlabs.com/r/registry.json
bunx shadcn@latest add https://ui.8starlabs.com/r/registry.json
# clone the source repo
git clone https://github.com/8starlabs/ui.git
# fetch the raw registry index
curl -s https://ui.8starlabs.com/r/registry.json
```

## Components (74)

| name | type | description | install |
| --- | --- | --- | --- |
| button | registry:ui | A shadcn-compatible button with an optional Stripe-style arrow animation | `npx shadcn@latest add https://ui.8starlabs.com/r/button.json` |
| button-demo | registry:example | A button demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/button-demo.json` |
| collapsible | registry:ui | A Base UI collapsible component | `npx shadcn@latest add https://ui.8starlabs.com/r/collapsible.json` |
| dropdown-menu | registry:ui | A Base UI dropdown menu component | `npx shadcn@latest add https://ui.8starlabs.com/r/dropdown-menu.json` |
| input | registry:ui | A styled input component | `npx shadcn@latest add https://ui.8starlabs.com/r/input.json` |
| label | registry:ui | A styled label component | `npx shadcn@latest add https://ui.8starlabs.com/r/label.json` |
| separator | registry:ui | A Base UI separator component | `npx shadcn@latest add https://ui.8starlabs.com/r/separator.json` |
| tooltip | registry:ui | A Base UI tooltip component | `npx shadcn@latest add https://ui.8starlabs.com/r/tooltip.json` |
| heatmap | registry:ui | A heatmap component | `npx shadcn@latest add https://ui.8starlabs.com/r/heatmap.json` |
| heatmap-demo | registry:example | A heatmap demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-demo.json` |
| heatmap-interpolate-demo | registry:example | A heatmap demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-interpolate-demo.json` |
| heatmap-display-style-demo | registry:example | A heatmap demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-display-style-demo.json` |
| heatmap-days-of-week-demo | registry:example | A heatmap demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-days-of-week-demo.json` |
| heatmap-size-demo | registry:example | A heatmap demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-size-demo.json` |
| heatmap-custom-colors-demo | registry:example | A heatmap demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-custom-colors-demo.json` |
| heatmap-custom-display-demo | registry:example | A heatmap demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/heatmap-custom-display-demo.json` |
| partition-bar | registry:ui | A partition bar component | `npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar.json` |
| partition-bar-demo | registry:example | A partition bar demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar-demo.json` |
| partition-bar-size-demo | registry:example | A partition bar demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar-size-demo.json` |
| partition-bar-alignment-demo | registry:example | A partition bar demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar-alignment-demo.json` |
| partition-bar-width-demo | registry:example | A partition bar demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar-width-demo.json` |
| partition-bar-custom-colours-demo | registry:example | A partition bar demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar-custom-colours-demo.json` |
| partition-bar-variants-demo | registry:example | A partition bar demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/partition-bar-variants-demo.json` |
| flip-clock | registry:ui | A flip clock component | `npx shadcn@latest add https://ui.8starlabs.com/r/flip-clock.json` |
| flip-clock-demo | registry:example | A flip clock demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/flip-clock-demo.json` |
| flip-clock-size-demo | registry:example | A flip clock demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/flip-clock-size-demo.json` |
| flip-clock-variants-demo | registry:example | A flip clock demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/flip-clock-variants-demo.json` |
| flip-clock-countdown-demo | registry:example | A flip clock demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/flip-clock-countdown-demo.json` |
| flip-clock-showdays-demo | registry:example | A flip clock demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/flip-clock-showdays-demo.json` |
| status-indicator | registry:ui | A status indicator component | `npx shadcn@latest add https://ui.8starlabs.com/r/status-indicator.json` |
| status-monitor | registry:ui | A compact status history bar for showing service uptime across days or hours. | `npx shadcn@latest add https://ui.8starlabs.com/r/status-monitor.json` |
| transport-badge | registry:ui | A transport badge component | `npx shadcn@latest add https://ui.8starlabs.com/r/transport-badge.json` |
| system-banner | registry:ui | A system banner component | `npx shadcn@latest add https://ui.8starlabs.com/r/system-banner.json` |
| status-indicator-demo | registry:example | A status indicator demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/status-indicator-demo.json` |
| status-monitor-demo | registry:example | A status monitor demo with daily uptime history. | `npx shadcn@latest add https://ui.8starlabs.com/r/status-monitor-demo.json` |
| status-monitor-hours-demo | registry:example | A status monitor demo with hourly incident history. | `npx shadcn@latest add https://ui.8starlabs.com/r/status-monitor-hours-demo.json` |
| status-monitor-sparse-demo | registry:example | A status monitor demo showing sparse data and empty states. | `npx shadcn@latest add https://ui.8starlabs.com/r/status-monitor-sparse-demo.json` |
| transport-badge-demo-multi-station | registry: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 | registry: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 | registry: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 | registry: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 | registry:example | A transport badge demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/transport-badge-demo.json` |
| timeline | registry:ui | A timeline component | `npx shadcn@latest add https://ui.8starlabs.com/r/timeline.json` |
| timeline-demo | registry:example | A timeline demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/timeline-demo.json` |
| timeline-hollow-demo | registry:example | A timeline hollow demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/timeline-hollow-demo.json` |
| timeline-nocards-demo | registry:example | A timeline no cards demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/timeline-nocards-demo.json` |
| timeline-not-alternating-demo | registry:example | A timeline not alternating demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/timeline-not-alternating-demo.json` |
| timeline-vertical-demo | registry:example | A timeline vertical demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/timeline-vertical-demo.json` |
| transport-badge-demo-hk | registry:example | A transport badge demo for Hong Kong MTR | `npx shadcn@latest add https://ui.8starlabs.com/r/transport-badge-demo-hk.json` |
| marquee | registry:ui | A marquee component | `npx shadcn@latest add https://ui.8starlabs.com/r/marquee.json` |
| marquee-demo | registry:example | A marquee demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/marquee-demo.json` |
| marquee-grayscale-demo | registry:example | A marquee grayscale demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/marquee-grayscale-demo.json` |
| marquee-reverse-demo | registry:example | A marquee reverse demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/marquee-reverse-demo.json` |
| json-viewer | registry:ui | A JSON viewer component | `npx shadcn@latest add https://ui.8starlabs.com/r/json-viewer.json` |
| json-viewer-demo | registry:example | A JSON viewer demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/json-viewer-demo.json` |
| json-viewer-features-demo | registry: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 | registry:ui | A video player component | `npx shadcn@latest add https://ui.8starlabs.com/r/video-player.json` |
| video-player-demo | registry:example | A video player demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/video-player-demo.json` |
| video-player-minimal-controls-demo | registry: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-demo | registry: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-demo | registry: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-demo | registry:example | A video player demo showing repeat playback | `npx shadcn@latest add https://ui.8starlabs.com/r/video-player-repeat-demo.json` |
| video-player-auto-demo | registry: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-demo | registry: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-hide-center-controls-demo | registry: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 | registry: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 | registry:example | A shake demo component | `npx shadcn@latest add https://ui.8starlabs.com/r/shake-demo.json` |
| open-in-chat | registry:ui | A component that opens an LLM chat with a pre-filled prompt. | `npx shadcn@latest add https://ui.8starlabs.com/r/open-in-chat.json` |
| open-in-chat-demo | registry:example | An open in chat demo with the default providers. | `npx shadcn@latest add https://ui.8starlabs.com/r/open-in-chat-demo.json` |
| open-in-chat-custom-providers-demo | registry:example | An open in chat demo with selected provider links. | `npx shadcn@latest add https://ui.8starlabs.com/r/open-in-chat-custom-providers-demo.json` |
| open-in-chat-custom-link-demo | registry:example | An open in chat demo with a custom provider link. | `npx shadcn@latest add https://ui.8starlabs.com/r/open-in-chat-custom-link-demo.json` |
| open-in-chat-custom-trigger-demo | registry:example | An open in chat demo with a custom trigger. | `npx shadcn@latest add https://ui.8starlabs.com/r/open-in-chat-custom-trigger-demo.json` |
| open-in-chat-horizontal-demo | registry:example | An open in chat demo with horizontal provider icons. | `npx shadcn@latest add https://ui.8starlabs.com/r/open-in-chat-horizontal-demo.json` |
| open-in-chat-positioning-demo | registry:example | An open in chat demo showing dropdown-menu alignment and side positioning. | `npx shadcn@latest add https://ui.8starlabs.com/r/open-in-chat-positioning-demo.json` |

## For AI agents

```text
You are adding components from @8starlabs-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/8starlabs-ui.md) for the component list.
2. Fetch the machine-readable index: https://ui.8starlabs.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: 8starlabs-ui).
```