Timetable is a production-ready tables component from BJORK UI, packaged for shadcn registries.
Loading preview...
"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useSyncExternalStore } from "react";
import { Timetable, type TimetableEvent } from "@/components/ui/bjork-timetable";
const DEMO_NOW = new Date(2026, 9, 14, 11, 20);
const narrowQuery = "(max-width: 639px)";
function subscribeNarrow(onChange: () => void) {
const query = window.matchMedia(narrowQuery);
query.addEventListener("change", onChange);
return () => query.removeEventListener("change", onChange);
}
function useNarrowViewport() {
return useSyncExternalStore(
subscribeNarrow,
() => window.matchMedia(narrowQuery).matches,
() => false,
);
}
function SourceDemo(){
const isPreview = false;
const narrow = useNarrowViewport() && !isPreview;
const previewTheme = null;
const tableTheme =
previewTheme === "light" || previewTheme === "dark" ? previewTheme : "auto";
const handleEventSelect = (event: TimetableEvent) => {
console.log("Selected session:", event.id);
};
return <>
<div className={narrow ? "w-[calc(100vw-72px)]" : "w-full"}>
<Timetable
now={DEMO_NOW}
defaultSelectedId={isPreview ? "w3" : null}
onEventSelect={handleEventSelect}
theme={tableTheme}
enableAnimations={!isPreview}
/>
</div>
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}