---
name: "@whiskeyjack"
slug: "whiskeyjack"
description: "A Tauri-first design system: thumb-first components with Metro-style pivot navigation, frosted bottom nav, and tap-again confirmations, on a CSS-variable token pipeline. Hardened across nine shipping apps before extraction."
category: "Animated components"
tags: ["accessibility", "animation", "buttons", "cards", "charts", "dashboard", "design-system", "forms", "glassmorphism", "hooks", "loaders", "maps", "mobile", "navigation", "overlays", "theming"]
framework: "react"
license: null
author: null
website: "https://whiskeyjack.net"
github: null
registry: "https://whiskeyjack.net/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 60
generated_at: "2026-09-05T09:50:59.044Z"
---

# @whiskeyjack

A Tauri-first design system: thumb-first components with Metro-style pivot navigation, frosted bottom nav, and tap-again confirmations, on a CSS-variable token pipeline. Hardened across nine shipping apps before extraction.

## Links

- Website: https://whiskeyjack.net
- Registry JSON: https://whiskeyjack.net/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/whiskeyjack
- This file: https://sh4dcn.vercel.app/md/whiskeyjack.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://whiskeyjack.net/r/registry.json
pnpm dlx shadcn@latest add https://whiskeyjack.net/r/registry.json
bunx shadcn@latest add https://whiskeyjack.net/r/registry.json
# fetch the raw registry index
curl -s https://whiskeyjack.net/r/registry.json
```

## Components (60)

| name | type | description | install |
| --- | --- | --- | --- |
| action-pill | registry:ui | Toolbar pill of icon actions that collapse and grow as the page's context changes. | `npx shadcn@latest add https://whiskeyjack.net/r/action-pill.json` |
| app-panes | registry:ui | The three-phase content row below a floating header: optional left sidebar, main region, optional right rail, each gated on the layout variants. | `npx shadcn@latest add https://whiskeyjack.net/r/app-panes.json` |
| app-shell | registry:ui | The app layout skeleton: a fixed-height shell or a document scroller, with a frosted header, nav pills, and the main scroll region. | `npx shadcn@latest add https://whiskeyjack.net/r/app-shell.json` |
| badge | registry:ui | Tone-tinted pill label on the semantic color scales, for status and classification at a glance. | `npx shadcn@latest add https://whiskeyjack.net/r/badge.json` |
| beam | registry:ui | A travelling light around an element's edge, for the one thing on a screen that needs the eye. | `npx shadcn@latest add https://whiskeyjack.net/r/beam.json` |
| bottom-drawer | registry:ui | Bottom sheet on mobile, centered dialog on desktop. Swipe, backdrop, Escape, and hardware Back all dismiss it. | `npx shadcn@latest add https://whiskeyjack.net/r/bottom-drawer.json` |
| bottom-nav | registry:ui | Pill-shaped frosted bottom navigation, hand-composed from BottomNavItem and BottomNavAction. | `npx shadcn@latest add https://whiskeyjack.net/r/bottom-nav.json` |
| button-row | registry:ui | Side-by-side buttons that share a row and stack full-width when they no longer fit. | `npx shadcn@latest add https://whiskeyjack.net/r/button-row.json` |
| button | registry:ui | The action button. Labels wrap to two lines rather than overflowing, so long translated text stays inside the pill. | `npx shadcn@latest add https://whiskeyjack.net/r/button.json` |
| calendar-heatmap | registry:ui | GitHub-contributions-style activity heatmap, in squares or check-in dots. | `npx shadcn@latest add https://whiskeyjack.net/r/calendar-heatmap.json` |
| card | registry:ui | The elevated surface primitive, with header, title, description, content, and footer slots. | `npx shadcn@latest add https://whiskeyjack.net/r/card.json` |
| checkbox-group | registry:ui | Pick-any tile grid: the multi-select counterpart to ToggleGroup. | `npx shadcn@latest add https://whiskeyjack.net/r/checkbox-group.json` |
| color-input | registry:ui | Focusable swatch button that opens the OS-native color picker and returns the chosen hex. | `npx shadcn@latest add https://whiskeyjack.net/r/color-input.json` |
| confirm-button | registry:ui | Tap-again-to-confirm destructive button, with the armed state announced to assistive tech. | `npx shadcn@latest add https://whiskeyjack.net/r/confirm-button.json` |
| disclosure-toggle | registry:ui | Caret-and-label text button that expands and collapses an adjacent region, with aria-expanded and the touch and focus floors built in. | `npx shadcn@latest add https://whiskeyjack.net/r/disclosure-toggle.json` |
| drawer-action | registry:ui | A single action in a BottomDrawer footer: plain, form-submit, or tap-again-confirm. | `npx shadcn@latest add https://whiskeyjack.net/r/drawer-action.json` |
| empty-state | registry:ui | Centered icon tile, title, subtitle, and optional call to action for an empty list or a fresh install. | `npx shadcn@latest add https://whiskeyjack.net/r/empty-state.json` |
| header-stand-in | registry:ui | Header copy of a field whose primary lives in a scroller: grows in while the primary is scrolled away, collapses when it returns. | `npx shadcn@latest add https://whiskeyjack.net/r/header-stand-in.json` |
| input | registry:ui | Labeled text field that wires a real label to the input for you. | `npx shadcn@latest add https://whiskeyjack.net/r/input.json` |
| mobile-bottom-nav | registry:ui | Data-driven bottom nav that collapses its items into a hamburger menu when they and the toolbar would overflow the viewport. | `npx shadcn@latest add https://whiskeyjack.net/r/mobile-bottom-nav.json` |
| notice | registry:ui | Inline tone-tinted status box for context-bound messages, with each tone setting its own ARIA live-region role. | `npx shadcn@latest add https://whiskeyjack.net/r/notice.json` |
| page-title-context | registry:ui | React context that lets any page set the desktop header title. | `npx shadcn@latest add https://whiskeyjack.net/r/page-title-context.json` |
| progress-bar | registry:ui | The accent progress primitive: determinate fill, busy sweep, open-ended indicator, or segment accumulation against a tally. | `npx shadcn@latest add https://whiskeyjack.net/r/progress-bar.json` |
| pull-to-refresh-indicator | registry:ui | Frosted pill and spinner that slides down as you pull; the visual companion to usePullToRefresh. | `npx shadcn@latest add https://whiskeyjack.net/r/pull-to-refresh-indicator.json` |
| reorder-list | registry:ui | Drag-to-reorder list with an accessible arrow-button fallback, so it works by pointer, touch, and keyboard. | `npx shadcn@latest add https://whiskeyjack.net/r/reorder-list.json` |
| scroll-indicator | registry:ui | Read-only auto-hiding scroll thumb for scrollers whose native scrollbar would run behind floating chrome. | `npx shadcn@latest add https://whiskeyjack.net/r/scroll-indicator.json` |
| search-field | registry:ui | Search pill: a rounded-full text input with a leading magnifier and a trailing clear button. | `npx shadcn@latest add https://whiskeyjack.net/r/search-field.json` |
| segmented-control | registry:ui | Compact pick-one control: one bordered strip, divided into segments. | `npx shadcn@latest add https://whiskeyjack.net/r/segmented-control.json` |
| select | registry:ui | Styled native select for a one-of-n choice with more options than a segmented control can show. | `npx shadcn@latest add https://whiskeyjack.net/r/select.json` |
| sidebar-tabs | registry:ui | TabBar's wide-layout counterpart: a vertical tab rail for a desktop sidebar, with each item's progress pinned to its bottom edge. | `npx shadcn@latest add https://whiskeyjack.net/r/sidebar-tabs.json` |
| slider | registry:ui | Range input with an optional mono value readout beside its label. | `npx shadcn@latest add https://whiskeyjack.net/r/slider.json` |
| tab-bar | registry:ui | Metro-style pivot tabs with a sliding accent underline that doubles as each tab's progress bar. | `npx shadcn@latest add https://whiskeyjack.net/r/tab-bar.json` |
| toast | registry:ui | Floating notification pill fixed below the header, for app-level messages and background work. | `npx shadcn@latest add https://whiskeyjack.net/r/toast.json` |
| toggle-group | registry:ui | Segmented tile control for one-of-n choices, such as a light / dark / system theme picker. | `npx shadcn@latest add https://whiskeyjack.net/r/toggle-group.json` |
| toggle | registry:ui | Switch control with a label and optional description, for a single on/off setting. | `npx shadcn@latest add https://whiskeyjack.net/r/toggle.json` |
| accent-foreground | registry:lib | Retint the whole UI from one accent color, with a WCAG-legible foreground picked automatically. | `npx shadcn@latest add https://whiskeyjack.net/r/accent-foreground.json` |
| announce | registry:lib | Announce a message to assistive technology through a shared live region. | `npx shadcn@latest add https://whiskeyjack.net/r/announce.json` |
| compact-control | registry:lib | The geometry of a compact control: a small pill, chip or segment that sits on a line with body text. | `npx shadcn@latest add https://whiskeyjack.net/r/compact-control.json` |
| direction | registry:lib | Detect right-to-left direction for JS-driven interactions that CSS cannot reach. | `npx shadcn@latest add https://whiskeyjack.net/r/direction.json` |
| material-you | registry:lib | Map Android's wallpaper-derived Material You palette onto the design-system surface and accent tokens. | `npx shadcn@latest add https://whiskeyjack.net/r/material-you.json` |
| merge-refs | registry:lib | Combine an internal ref with a forwarded one. | `npx shadcn@latest add https://whiskeyjack.net/r/merge-refs.json` |
| option-tile | registry:lib | The selectable-tile class recipe shared by ToggleGroup and CheckboxGroup. | `npx shadcn@latest add https://whiskeyjack.net/r/option-tile.json` |
| use-drag-reorder | registry:hook | Drag-to-reorder list logic with an accessible keyboard path, behind ReorderList. | `npx shadcn@latest add https://whiskeyjack.net/r/use-drag-reorder.json` |
| use-focus-trap | registry:hook | Trap focus inside an overlay while it is open, and restore it to the trigger on close. | `npx shadcn@latest add https://whiskeyjack.net/r/use-focus-trap.json` |
| use-input-type | registry:hook | Detect touch versus mouse input, for controls that phrase or size themselves differently. | `npx shadcn@latest add https://whiskeyjack.net/r/use-input-type.json` |
| use-layout-gate | registry:hook | Read the wide / xlwide layout gates in JS, for a decision CSS cannot express. | `npx shadcn@latest add https://whiskeyjack.net/r/use-layout-gate.json` |
| use-nav-reset | registry:hook | Double-tap the nav item for the page you are already on to return to the top, then to the page's start. | `npx shadcn@latest add https://whiskeyjack.net/r/use-nav-reset.json` |
| use-pull-to-refresh | registry:hook | Touch pull-to-refresh that coexists with tab swipes and overscroll-behavior: none. | `npx shadcn@latest add https://whiskeyjack.net/r/use-pull-to-refresh.json` |
| use-reduced-motion | registry:hook | Respect the user's reduced-motion preference in JS-driven motion. | `npx shadcn@latest add https://whiskeyjack.net/r/use-reduced-motion.json` |
| use-route-focus | registry:hook | Move focus to the main content on route change, so keyboard and screen-reader users land in the new page. | `npx shadcn@latest add https://whiskeyjack.net/r/use-route-focus.json` |
| use-scroll-fade | registry:hook | Vertical edge-fade masks for a height-capped scrollable panel; returns the CSS class to apply. | `npx shadcn@latest add https://whiskeyjack.net/r/use-scroll-fade.json` |
| use-scroll-indicator | registry:hook | Scroll metrics (thumb size, position, visibility) that drive ScrollIndicator. | `npx shadcn@latest add https://whiskeyjack.net/r/use-scroll-indicator.json` |
| use-scroll-region | registry:hook | Scroll the app's real scroll region – to the top on a first visit, back to where you left it on a return – whichever scroller the Layout chose. | `npx shadcn@latest add https://whiskeyjack.net/r/use-scroll-region.json` |
| use-sliding-indicator | registry:hook | Measures the active item in a tab-like container so one element can animate between items instead of the highlight jumping. | `npx shadcn@latest add https://whiskeyjack.net/r/use-sliding-indicator.json` |
| use-stand-in-target | registry:hook | Watches a field's primary instance and reports when it scrolls out of view, so a HeaderStandIn can speak for it. | `npx shadcn@latest add https://whiskeyjack.net/r/use-stand-in-target.json` |
| use-swipe-navigation | registry:hook | Swipe between tabs with an axis-locked touch gesture that flips direction under RTL. | `npx shadcn@latest add https://whiskeyjack.net/r/use-swipe-navigation.json` |
| use-tab-bar-fade | registry:hook | Edge-fade masks for a horizontally overflowing tab strip; returns the CSS class to apply. | `npx shadcn@latest add https://whiskeyjack.net/r/use-tab-bar-fade.json` |
| use-theme | registry:hook | The theme engine: light, dark, system, and OLED, with persistence and theme-color meta kept in sync. | `npx shadcn@latest add https://whiskeyjack.net/r/use-theme.json` |
| use-travel-direction | registry:hook | Names which way a sliding indicator is travelling, so each of its edges can take its own easing. | `npx shadcn@latest add https://whiskeyjack.net/r/use-travel-direction.json` |
| utils | registry:lib | Tailwind class merging (clsx plus tailwind-merge). | `npx shadcn@latest add https://whiskeyjack.net/r/utils.json` |

## For AI agents

```text
You are adding components from @whiskeyjack to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/whiskeyjack.md) for the component list.
2. Fetch the machine-readable index: https://whiskeyjack.net/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: whiskeyjack).
```