Styling

Customize the appearance of CitationComponent using CSS custom properties, class names, and Tailwind utilities.

CSS Custom Properties

Override these CSS variables to theme all DeepCitation components at once:

:root {
  /* Status indicator colors */
  --dc-verified: #10b981;   /* Emerald - verified/exact match (default: emerald-500) */
  --dc-partial: #f59e0b;    /* Amber - partial match (default: amber-500) */
  --dc-destructive: #ef4444;      /* Red - not found/hallucination (default: red-500) */
  --dc-pending: #9ca3af;    /* Gray - loading/pending (default: gray-400) */

  /* Wavy underline for "not found" status (non-linter variants) */
  --dc-wavy-underline-color: #ef4444;  /* Default: red-500 */

  /* Linter variant underline colors */
  --dc-linter-success: #4a7c5f;   /* Solid muted green underline for verified */
  --dc-linter-warning: #f59e0b;   /* Dashed amber underline for partial */
  --dc-linter-error: #c0605f;     /* Wavy muted red underline for not found */
  --dc-linter-pending: #9ca3af;   /* Dotted gray underline for pending */

  /* Popover dimensions */
  --dc-popover-width: 384px;      /* Popover container width */

  /* Proof image canvas (keyhole + expanded page + drawer) */
  --dc-document-canvas-bg-light: #f3f4f6; /* Light-mode neutral canvas */
  --dc-document-canvas-bg-dark: #1f2937;  /* Dark-mode neutral canvas */
}

Dark Mode 

@media (prefers-color-scheme: dark) {
  :root {
    --dc-verified: #34d399;     /* emerald-400 */
    --dc-partial: #fbbf24;      /* amber-400 */
    --dc-destructive: #f87171;        /* red-400 */
    --dc-pending: #6b7280;      /* gray-500 */
    --dc-linter-success: #6aab85;
    --dc-linter-warning: #fbbf24;
    --dc-linter-error: #d47d7c;
    --dc-linter-pending: #6b7280;
    --dc-document-canvas-bg-light: #f3f4f6;
    --dc-document-canvas-bg-dark: #1f2937;
  }
}

/* Or with a class-based approach (Tailwind dark mode) */
.dark {
  --dc-verified: #34d399;
  --dc-partial: #fbbf24;
  --dc-destructive: #f87171;
  --dc-pending: #6b7280;
  --dc-document-canvas-bg-light: #f3f4f6;
  --dc-document-canvas-bg-dark: #1f2937;
}

Indicator Variants

The indicatorVariant prop controls whether status is shown as icons (checkmarks, spinners, X) or subtle colored dots:

// Icon indicators (default)
<CitationComponent citation={citation} verification={verification} />

// Dot indicators (like GitHub status dots)
<CitationComponent citation={citation} verification={verification} indicatorVariant="dot" />

Dot indicators use Tailwind bg-* classes for color (bg-green-600, bg-amber-500, bg-red-500, bg-gray-400) and rounded-full for shape. The pending dot uses animate-pulse for subtle animation.

The dot size is controlled by the DOT_INDICATOR_SIZE_STYLE constant (0.45em, min 6px), which is roughly half the size of icon indicators (0.85em, min 10px).

Using className Prop

Pass custom classes to the component:

<CitationComponent
  citation={citation}
  verification={verification}
  className="my-custom-citation"
/>

Tailwind CSS Integration

If using Tailwind CSS, components work out of the box. You can add utility classes:

<CitationComponent
  citation={citation}
  verification={verification}
  className="font-semibold hover:underline"
/>

Or define component styles in your CSS:

@layer components {
  .citation-legal {
    @apply font-serif text-blue-800 dark:text-blue-300;
  }

  .citation-medical {
    @apply font-mono text-sm text-green-700 dark:text-green-400;
  }
}

Without Tailwind CSS

Import the bundled stylesheet:

import "deepcitation/styles.css";

Or reference the Tailwind source for your own build:

import "deepcitation/tailwind.css";

CSS Class Targets

Target specific citation elements using data attributes and selectors:

/* All citations with verified status */
[data-dc-indicator="verified"] {
  font-weight: 500;
}

/* Verified citations - specific styling */
[data-dc-indicator="verified"] {
  color: var(--dc-verified);
}

/* Partial match citations */
[data-dc-indicator="partial"] {
  color: var(--dc-partial);
}

/* Not found / hallucination citations */
[data-dc-indicator="error"] {
  color: var(--dc-destructive);
}

/* Pending / loading citations */
[data-dc-indicator="pending"] {
  color: var(--dc-pending);
}

/* Citation trigger element */
[data-citation-id] {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* On hover */
[data-citation-id]:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-citation-id]:hover:dark {
  background-color: rgba(255, 255, 255, 0.05);
}

Available Data Attributes

Attribute Values Description
data-dc-indicator verified, partial, pending, error Citation status indicator
data-citation-id string Unique citation identifier (present on trigger element)

Animation

Add animations to citations:

/* Pulse animation for pending state */
.dc-citation-wrapper[data-status="pending"] {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

Optimize for printing:

@media print {
  .dc-citation-wrapper {
    color: black !important;
    text-decoration: underline;
  }

  .dc-citation-indicator {
    display: none;
  }

  .dc-citation-popover {
    display: none;
  }
}

Back to top

© 2026 DeepCitation — a product of FileLasso, Inc.