Avalanche centre
A regional avalanche bulletin site: region tabs, today's danger level with its rose and problems, a map of zones tinted by level, a seven-day history and a searchable archive.
This example uses generated pictures and sample data from this site: art.ts and data.ts. Copy those files from the repository, or use your own images and data in their place.
"use client";
import { AvalancheCentre } from "@/components/miyuki-ui/avalanche-centre";
import { avatar, topo } from "@/registry/lib/art";
import { people } from "@/registry/lib/data";
const yuna = people.find((p) => p.name === "Yuna Sato") ?? people[0];
const avatars = {
"Yuna Sato": yuna.avatar,
"Kenta Hoshino": avatar("kenta.hoshino"),
"Mio Arai": avatar("mio.arai"),
"Daichi Kudo": avatar("daichi.kudo"),
};
export default function AvalancheCentreDemo() {
return <AvalancheCentre avatars={avatars} map={topo("northern-alps-zones", { width: 700, height: 800 })} />;
}Install
npx shadcn@latest add @miyuki-ui/avalanche-centreThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
AvalancheCentre
Prop
Type
Agent Team Chat
Conversations with several agents, in groups or one to one: a list of agents and group chats, a thread with one agent mid-reply, and an editor for the agent you opened last.
Chat Shell
The simplest working chat shell: a sidebar, an API key empty state with three steps, a composer and replies that stream in word by word.