Invoice table 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 { INVOICE_SAMPLE_LINES, InvoiceTable } from "@/components/ui/bjork-invoice-table";
const previewLines = [INVOICE_SAMPLE_LINES[0], INVOICE_SAMPLE_LINES[1], INVOICE_SAMPLE_LINES[4]];
function SourceDemo(){
const isPreview = false;
const previewTheme = null;
const tableTheme = previewTheme === "light" || previewTheme === "dark" ? previewTheme : "auto";
return <>
<InvoiceTable
theme={tableTheme}
enableAnimations={!isPreview}
defaultLines={isPreview ? previewLines : undefined}
onChange={(_, totals) => console.log("Invoice total (minor units)", totals.total)}
/>
</>;
}
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>}