Citations

Numbered source markers inside an AI answer, with a preview of each source and a list of every source under the answer.

What are the CRA instalment deadlines for 2027?

For a corporation, instalments are due on the last day of each month of the tax year. A small CCPC that qualifies can pay quarterly instead, which for a calendar year means March 31, June 30, September 30 and December 31.

With a December 31 year end, the plan is monthly payments of about $1,533 starting January 31, 2027. Paying late or short adds interest that compounds daily, so it is worth setting these up as scheduled payments.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/citations.json

Usage

import {
  Citation,
  Citations,
  CitedText,
  SourcesList,
  type CitationSource,
} from "@/components/ui/citations"

const sources: CitationSource[] = [
  {
    id: "cra",
    type: "web",
    title: "Paying your corporation tax by instalments",
    domain: "canada.ca",
    url: "https://www.canada.ca",
    snippet: "Each payment is due on the last day of every complete month.",
    quote: "last day of every complete month",
  },
  { id: "memo", type: "file", title: "2027 tax planning memo.pdf" },
]
 
<Citations sources={sources}>
  <CitedText>Instalments are due at the end of each month [1].</CitedText>
  <p>
    The plan starts in January <Citation index={2} />.
  </p>
  <SourcesList />
</Citations>

Parts

Citations. Holds the sources for one answer and which one is highlighted. Markers and the list inside it share that state.
CitedText. A paragraph that turns [1] or [2, 3] in its text into markers. renderCitations(text) does the same and returns the nodes, for your own markup.
Citation. One marker. Pass the 1-based index or a source id. Where the pointer can hover it opens a hover card. On touch screens it opens a popover on tap. Each marker is a button described by its source title for screen readers.
SourcesList. A row of source icons with a count that opens into a numbered list. Hovering a row highlights its markers in the answer, and hovering a marker highlights its row.

Sources

Field	Description
`id`	Unique id.
`title`	Page or file name.
`type`	`web`, `file` or `note`. Picks the fallback icon.
`url`	Opens from the card and the list.
`domain`	Shown beside the icon.
`favicon`	Image URL. Falls back to an icon for its type.
`snippet`	The passage the answer used.
`quote`	Part of the snippet to highlight.
`date`	Published or uploaded date.

Checkbox Code Block

On This Page

Installation Usage Parts Sources