# jal-co/ui

> jalco ui is a React component library by Justin Levine. It ships polished, composable components for React and Next.js projects, distributed via a shadcn-compatible registry. Install any component with a single command or copy the source directly.

## Install

Components are installed using the shadcn CLI. No npm package to install — each component is copied into your project as source code.

```
npx shadcn@latest add https://ui.justinlevine.me/r/<component-name>.json
```

Replace `<component-name>` with any component name listed below.

## Key details

- Built with React 19, Next.js 15, Tailwind CSS v4, and Radix UI primitives
- All components are server-component-first where possible
- No wrapper package — components are copied as source into your project
- Uses class-variance-authority for variant systems
- Designed for accessibility, composability, and copy-paste ergonomics
- Source: https://github.com/jal-co/ui

## Components

- [Pretext Hooks](https://ui.justinlevine.me/docs/components/pretext): React hooks for DOM-free text measurement using @chenglou/pretext. Provides prepare/layout lifecycle, shrinkwrap search, and balanced-width computation.
- [Code Line](https://ui.justinlevine.me/docs/components/code-line): Compact single-line code snippet with syntax highlighting and an inline copy button. Ideal for imports, CLI commands, env vars, and config values.
- [API Reference Table](https://ui.justinlevine.me/docs/components/api-ref-table): Expandable prop reference table with color-coded types, optional descriptions, and full-type details. Designed for component documentation pages.
- [Code Block](https://ui.justinlevine.me/docs/components/code-block): Syntax-highlighted code block with bundled language icon, copy button, and optional scrollable or collapsible overflow. Server component powered by shiki.
- [Code Block Command](https://ui.justinlevine.me/docs/components/code-block-command): Tabbed CLI command block with package manager switching (pnpm, yarn, npm, bun, shadcn), bundled SVG icons, copy button, and localStorage persistence.
- [AI Copy Button](https://ui.justinlevine.me/docs/components/ai-copy-button): Split button with a primary copy action and a dropdown of AI destinations. Copy content, view as markdown, or open in v0, ChatGPT, Claude, or Gemini.
- [Request Viewer](https://ui.justinlevine.me/docs/components/request-viewer): Network request inspector showing headers, response body, and timing waterfall. Designed for dev dashboards, API documentation, and debugging tools.
- [GitHub Stars Button](https://ui.justinlevine.me/docs/components/github-stars-button): Link button showing a GitHub repo's star count with the octocat icon. Async server component — fetches data at build time with ISR.
- [GitHub Button Group](https://ui.justinlevine.me/docs/components/github-button-group): Segmented button group displaying multiple GitHub repo metrics with per-segment links. Async server component — fetches data at build time with ISR.
- [Activity Graph](https://ui.justinlevine.me/docs/components/activity-graph): GitHub-style activity heatmap that visualizes daily counts as a color-intensity grid with month labels, day labels, and a Less/More legend. Includes a helper to fetch real GitHub contribution data by username.
- [Crypto + Tip Jar](https://ui.justinlevine.me/docs/components/tip-jar): Donation and tipping component with QR code, wallet address or handle display, and copy-to-clipboard. Supports crypto chains (Ethereum, Bitcoin, Solana, and more) and platforms (PayPal, Ko-fi, Patreon). Six layout variants for different contexts.
- [Cron Schedule](https://ui.justinlevine.me/docs/components/cron-schedule): Visual cron expression display with field breakdown, human-readable summary, and optional next-run preview. Designed for dashboards, serverless function docs, and scheduling UIs.
- [JSON Viewer](https://ui.justinlevine.me/docs/components/json-viewer): Collapsible, syntax-colored JSON tree with path copying, search, expand/collapse controls, and 65 editor color themes. Designed for dev dashboards, API documentation, and debugging tools.
- [Env Table](https://ui.justinlevine.me/docs/components/env-table): Read-only environment variable table with masked values, click-to-reveal, per-row copy, and bulk copy as .env. Designed for settings pages, deploy previews, and documentation.
- [Log Viewer](https://ui.justinlevine.me/docs/components/log-viewer): Scrollable log output component for displaying streaming logs or CLI-style output in web apps. Three variants: terminal (full CLI-style with toolbar, line numbers, search), minimal (compact scrolling lines), and filterable (level filtering with counts). Supports colored log levels, timestamps, auto-scrolling, copy, and export.
- [Stepper](https://ui.justinlevine.me/docs/components/stepper): Numbered step-by-step layout with vertical connector lines, auto-incrementing step numbers, and status indicators. Designed for installation guides, tutorials, onboarding flows, and multi-step documentation. Composable — nest any content inside each step.
- [Product Hunt Button](https://ui.justinlevine.me/docs/components/producthunt-button): Link button showing a Product Hunt post's upvote count with the PH cat icon. Two layouts: inline button and expanded card. Async server component — fetches data at build time with ISR.
- [File Tree](https://ui.justinlevine.me/docs/components/file-tree): Collapsible file and folder tree with file-type icons, highlights, and configurable expand state. Designed for project structure docs, README displays, and dev-tool file explorers.
- [npm Badge](https://ui.justinlevine.me/docs/components/npm-badge): Live npm package badge showing version, weekly downloads, license, and last publish date. Three layouts: inline pill, horizontal row, and expanded card. Async server component — fetches data at build time with ISR.
- [Diff Viewer](https://ui.justinlevine.me/docs/components/diff-viewer): Code diff viewer with line numbers and add/remove coloring. Supports unified and split layouts.
- [Kbd](https://ui.justinlevine.me/docs/components/kbd): Keyboard shortcut key rendered as a styled keycap. Three visual profiles: flat, raised, and sculpted.
- [Status Indicator](https://ui.justinlevine.me/docs/components/status-indicator): Operational status badge with colored dot and label for dashboards, status pages, and header bars.
- [Contributor Grid](https://ui.justinlevine.me/docs/components/contributor-grid): GitHub contributor display with avatar grid and detailed list layouts. Async server component with ISR caching.
- [Commit Graph](https://ui.justinlevine.me/docs/components/commit-graph): Git commit history as a vertical timeline with hashes, messages, author avatars, and branch/tag labels.
- [Logo Cloud](https://ui.justinlevine.me/docs/components/logo-cloud): "Trusted by" logo display with static grid and infinite-scroll marquee layouts. Grayscale by default, color on hover.
- [Testimonial](https://ui.justinlevine.me/docs/components/testimonial): Customer testimonial display with standalone card, responsive grid, and infinite-scroll marquee layouts.
- [License Badge](https://ui.justinlevine.me/docs/components/license-badge): Software license badge with SPDX identifier, category color-coding, and OSI-approved indicator. Three layouts: inline pill, segmented row, and expanded card. Accepts a license string directly or fetches from the GitHub API.
- [Repo Card](https://ui.justinlevine.me/docs/components/repo-card): GitHub repository preview card with description, language dot, star and fork counts, license, and topic tags. Async server component — fetches data at build time with ISR.
- [Color Palette](https://ui.justinlevine.me/docs/components/color-palette): Color swatch display with name, hex/hsl/rgb values, and click-to-copy. Grid and horizontal scale strip layouts for design system documentation.
- [Pretext Chat Bubble](https://ui.justinlevine.me/docs/components/chat-bubble): Message bubble with Pretext shrinkwrap that finds the tightest width for the same line count, eliminating dead space CSS fit-content leaves behind.
- [Pretext Balanced Text](https://ui.justinlevine.me/docs/components/balanced-text): Text wrapper that uses Pretext to balance line widths so all lines are roughly equal length. Deterministic and cross-browser consistent.
- [Pretext Masonry Grid](https://ui.justinlevine.me/docs/components/masonry-grid): Text-aware masonry layout where card heights are predicted by Pretext without DOM measurement. Zero layout shift.
- [Release Badge](https://ui.justinlevine.me/docs/components/release-badge): Live GitHub release badge showing latest tag, publish date, and pre-release indicator. Three layouts: inline pill, horizontal row, and expanded card. Async server component — fetches data at build time with ISR.
- [Discord Badge](https://ui.justinlevine.me/docs/components/discord-badge): Live Discord server badge showing server name and online count with the Discord icon. Two layouts: inline pill and expanded card. Async server component — fetches data at build time with ISR via the public widget API.
- [Download Sparkline](https://ui.justinlevine.me/docs/components/download-sparkline): Tiny inline SVG sparkline showing npm download trends over time. Three chart types, trend indicator, date range, and average baseline. Pure SVG, zero charting dependencies. Async server component — fetches data at build time with ISR.
- [CI Badge](https://ui.justinlevine.me/docs/components/ci-badge): GitHub Actions CI status badge showing passing, failing, pending, or cancelled state with colored status dot and optional duration. Two layouts: inline pill and expanded card. Async server component — fetches data at build time with ISR.

## Registry JSON

- [pretext.json](https://ui.justinlevine.me/r/pretext.json): Registry JSON for Pretext Hooks
- [code-line.json](https://ui.justinlevine.me/r/code-line.json): Registry JSON for Code Line
- [api-ref-table.json](https://ui.justinlevine.me/r/api-ref-table.json): Registry JSON for API Reference Table
- [code-block.json](https://ui.justinlevine.me/r/code-block.json): Registry JSON for Code Block
- [code-block-command.json](https://ui.justinlevine.me/r/code-block-command.json): Registry JSON for Code Block Command
- [ai-copy-button.json](https://ui.justinlevine.me/r/ai-copy-button.json): Registry JSON for AI Copy Button
- [request-viewer.json](https://ui.justinlevine.me/r/request-viewer.json): Registry JSON for Request Viewer
- [github-stars-button.json](https://ui.justinlevine.me/r/github-stars-button.json): Registry JSON for GitHub Stars Button
- [github-button-group.json](https://ui.justinlevine.me/r/github-button-group.json): Registry JSON for GitHub Button Group
- [activity-graph.json](https://ui.justinlevine.me/r/activity-graph.json): Registry JSON for Activity Graph
- [tip-jar.json](https://ui.justinlevine.me/r/tip-jar.json): Registry JSON for Crypto + Tip Jar
- [cron-schedule.json](https://ui.justinlevine.me/r/cron-schedule.json): Registry JSON for Cron Schedule
- [json-viewer.json](https://ui.justinlevine.me/r/json-viewer.json): Registry JSON for JSON Viewer
- [env-table.json](https://ui.justinlevine.me/r/env-table.json): Registry JSON for Env Table
- [log-viewer.json](https://ui.justinlevine.me/r/log-viewer.json): Registry JSON for Log Viewer
- [stepper.json](https://ui.justinlevine.me/r/stepper.json): Registry JSON for Stepper
- [producthunt-button.json](https://ui.justinlevine.me/r/producthunt-button.json): Registry JSON for Product Hunt Button
- [file-tree.json](https://ui.justinlevine.me/r/file-tree.json): Registry JSON for File Tree
- [npm-badge.json](https://ui.justinlevine.me/r/npm-badge.json): Registry JSON for npm Badge
- [diff-viewer.json](https://ui.justinlevine.me/r/diff-viewer.json): Registry JSON for Diff Viewer
- [kbd.json](https://ui.justinlevine.me/r/kbd.json): Registry JSON for Kbd
- [status-indicator.json](https://ui.justinlevine.me/r/status-indicator.json): Registry JSON for Status Indicator
- [contributor-grid.json](https://ui.justinlevine.me/r/contributor-grid.json): Registry JSON for Contributor Grid
- [commit-graph.json](https://ui.justinlevine.me/r/commit-graph.json): Registry JSON for Commit Graph
- [logo-cloud.json](https://ui.justinlevine.me/r/logo-cloud.json): Registry JSON for Logo Cloud
- [testimonial.json](https://ui.justinlevine.me/r/testimonial.json): Registry JSON for Testimonial
- [license-badge.json](https://ui.justinlevine.me/r/license-badge.json): Registry JSON for License Badge
- [repo-card.json](https://ui.justinlevine.me/r/repo-card.json): Registry JSON for Repo Card
- [color-palette.json](https://ui.justinlevine.me/r/color-palette.json): Registry JSON for Color Palette
- [chat-bubble.json](https://ui.justinlevine.me/r/chat-bubble.json): Registry JSON for Pretext Chat Bubble
- [balanced-text.json](https://ui.justinlevine.me/r/balanced-text.json): Registry JSON for Pretext Balanced Text
- [masonry-grid.json](https://ui.justinlevine.me/r/masonry-grid.json): Registry JSON for Pretext Masonry Grid
- [release-badge.json](https://ui.justinlevine.me/r/release-badge.json): Registry JSON for Release Badge
- [discord-badge.json](https://ui.justinlevine.me/r/discord-badge.json): Registry JSON for Discord Badge
- [download-sparkline.json](https://ui.justinlevine.me/r/download-sparkline.json): Registry JSON for Download Sparkline
- [ci-badge.json](https://ui.justinlevine.me/r/ci-badge.json): Registry JSON for CI Badge

## Optional

- [Installation guide](https://ui.justinlevine.me/docs/installation): How to set up jalco ui in a new or existing project
- [Color Themes](https://ui.justinlevine.me/docs/themes): Available color themes and how to customize them
- [GitHub](https://github.com/jal-co/ui): Source code repository