Klarhimmel UI
Klarhimmel ↗

Source note

Stable

A quiet provenance message next to the data: source, freshness and limitations.

npx shadcn add @klarhimmel/source-note

When to use

  • Use for

    Source, freshness and coverage beside partial or cached data.

  • Not for

    Urgent errors needing an immediate announcement. Use Banner.

  • Pairs with

    Operational summaries, details and reports.

Preview

Local reception copy
Last synchronized at 08:40. Changes made elsewhere may not appear here yet.
source-note.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { SourceNote } from '@/components/klarhimmel/ui/source-note';

export default function Example() {
  return (
    <Theme theme="brand">
      <SourceNote source="Local copy">Last synchronized at 08:40. Changes elsewhere may be missing.</SourceNote>
    </Theme>
  );
}

Install

Import

import { SourceNote } from '@/components/klarhimmel/ui/source-note';
Lands in
components/klarhimmel/ui/source-note.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

API reference

PropTypeDefaultDescription
sourceReactNoderequiredVisible source name.
childrenReactNode—Freshness, coverage or other limitations.