Installation & details
Field Dispatch — five-day briefing rail by Kibo UI. A compact field-operations planner for choosing a briefing day, reviewing its agenda, and moving through consecutive five-day dispatch windows. The original Kibo MiniCalendar remains the date-selection and navigation source of truth. Try
React · Tailwind CSS · MIT license · Original registry
Added to PODIE · Catalog updated · Page updated
Installation and usage
The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.
01 — Set up your project
First component? Initialize shadcn once.
pnpm dlx shadcn@latest init02 — Install the component
pnpm dlx shadcn@latest add https://podie.dev/r/kibo--mini-calendar.json03 — Add it to your interface
Import the component from the path created by the installer.
'use client';
import EffectMiniCalendar from '@/components/podie/kibo--mini-calendar/demo';
export default function Example() {
return (
<div style={{ width: '100%', height: '100vh' }}>
<EffectMiniCalendar />
</div>
);
}
Example styling
These styles belong to the demo wrapper. Add them to your stylesheet to reproduce this example.
.expanded-demo { position:relative; display:flex; align-items:center; justify-content:center; width:360px; max-width:100%; min-height:180px; padding:15px; isolation:isolate }
.demo-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px }
.demo-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border, #e5e5e5); border-radius:8px; background:var(--muted, #f5f5f5); color:var(--foreground, #171717); padding:10px 16px; font-size:13px; cursor:pointer }
.demo-action:hover { background:var(--accent, #eee) }
.demo-tile { padding:16px 22px; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:12px; color:var(--foreground, #171717); font-size:15px }
.demo-art { display:flex; align-items:center; justify-content:center; min-height:140px; padding:30px; width:280px; max-width:100%; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:16px; text-align:center; font-size:25px; letter-spacing:-.7px; color:var(--foreground, #171717) }
.demo-art.h-full { height:100%; min-height:0 }
.demo-gradient { position:relative; background:linear-gradient(145deg,#b6c7d1,#d5bcd6 50%,#e2d5bb); border-radius:16px; padding:20px; color:#222 }
.demo-gradient .demo-tile { background:#ffffff48 }
.demo-scene { position:relative; width:360px; height:260px; max-width:100%; overflow:hidden; border-radius:12px }
.demo-scene-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:25px; line-height:1.3; font-weight:500; letter-spacing:-.7px; z-index:1; pointer-events:none }
.demo-dot { display:block; width:60px; height:60px; border-radius:50%; background:var(--foreground, #171717) }
.expanded-demo:has(.codrops-preview) { width:100%; max-width:none; height:100%; padding:0 }
.codrops-preview { width:100%; height:100%; border:0; border-radius:inherit }Dependencies and distribution
@radix-ui/react-use-controllable-state, date-fns, lucide-react, radix-ui, cn, class-variance-authority@^0.7.1 The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.
By Kibo UI · MIT license. Original component source and license included.
Choosing and integrating this component
PODIE source review ·
Where it fits
Selecting a day from a compact strip of dates. Selected date and the start of the visible range are separate controllable values.
Integration boundary
Editable React source. Connect onValueChange to your selected date and onStartDateChange when the application owns navigation.
Checks before shipping
This is not an availability or booking service. Validate unavailable dates, locale and timezone rules in the host application.
Recorded verification
The recorded review on 2026-10-10 passed clean npm and pnpm installation checks and the tested desktop and mobile demo flows for this registry hash. Reviewer: PODIE daily visual editor / openai/gpt-5.6-luna. These are historical results, not a new certification of every device or application state. Read the method and limitations.
No component-specific mobile performance or assistive-technology pass is claimed here. Test the final page, including its content, theme and application logic.
Reviewed source identity
Registry SHA-256: 016b12f4bd32eec3a0cd28a88e9f8b379d40445d4bb215a516381ce5bd35f530
Entry file: components/podie/kibo--mini-calendar/components/kibo-ui/mini-calendar/index.tsx. 6 files in the registry payload.