7 Context7 Widget

Design system contract

Make the widget look native.

Start with a preset, override stable CSS variables, then use shadow parts only for targeted block-level styling. The public surface below is safe to theme without depending on internal class names.

CSS variables Shadow parts
Product style baseline
context7-widget[widget-id="docs"] {
  --c7-accent: #7cffb2;
  --c7-accent-contrast: #07120c;
  --c7-font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  --c7-panel-background: #101513;
  --c7-panel-color: #f7f2e8;
  --c7-border-color: rgba(247, 242, 232, 0.18);
  --c7-muted-color: rgba(247, 242, 232, 0.66);
}

Playbook

Customize in layers, not by reaching into internals.

Start with a preset

Choose `minimal`, `glass`, `neo`, `terminal`, or `brutalist` as the starting visual language.

Apply brand tokens

Map product tokens to `--c7-*` variables on the widget host or on one `widget-id` scoped instance.

Polish stable parts

Use `::part` selectors for direct styling of the panel, launcher, composer, messages, and tool blocks.

Stay on the public surface

Keep internal `.c7-*` selectors out of app CSS. They can change without breaking the public contract.

Complete variable map

Stable CSS variables you can override.

Set these on `context7-widget`, on a scoped instance such as `context7-widget[widget-id="docs"]`, or inside theme/preset selectors. Runtime anchor variables are intentionally not listed because the widget writes them while positioning anchored panels.

Brand and type

Brand color, contrast, text stack, muted text, and focus halo.

  • --c7-accent
  • --c7-accent-contrast
  • --c7-font-family
  • --c7-muted-color
  • --c7-focus-ring

Panel shell

The main dialog surface, dimensions, border, radius, shadow, spacing, and stacking level.

  • --c7-panel-background
  • --c7-panel-backdrop-filter
  • --c7-panel-color
  • --c7-panel-width
  • --c7-panel-height
  • --c7-panel-radius
  • --c7-panel-shadow
  • --c7-border-color
  • --c7-spacing
  • --c7-z-index

Launcher

The built-in fixed launcher button. Ignored when a custom trigger replaces it.

  • --c7-launcher-background
  • --c7-launcher-color
  • --c7-launcher-gap
  • --c7-launcher-radius
  • --c7-launcher-shadow
  • --c7-launcher-size

Backdrop

The modal/backdrop layer used by centered flows and any explicit backdrop-enabled widget.

  • --c7-backdrop
  • --c7-backdrop-filter

Header and footer

Top and bottom panel chrome.

  • --c7-header-background
  • --c7-footer-background

Messages

Assistant, user, and error bubbles.

  • --c7-message-assistant-background
  • --c7-message-assistant-color
  • --c7-message-user-background
  • --c7-message-user-color
  • --c7-message-radius
  • --c7-error-background
  • --c7-error-color

Controls

Input and send control tokens.

  • --c7-control-background
  • --c7-control-border
  • --c7-control-color

Vue managed trigger

Only applies to the Vue package managed trigger after importing `@desource/context7-widget-vue/styles.css`.

  • --c7-vue-trigger-background
  • --c7-vue-trigger-border
  • --c7-vue-trigger-color
  • --c7-vue-trigger-focus
  • --c7-vue-trigger-radius
  • --c7-vue-trigger-shadow

Shadow parts

Safe block selectors for targeted overrides.

Use `::part(...)` when a product system needs direct styling for one surface. Prefer variables for colors, radius, spacing, and typography; use parts for layout-neutral changes such as text transform, borders, and component-level shadows.

backdrop

Backdrop overlay behind the panel.

panel

Main dialog/popover surface.

header

Header bar containing title and close button.

title

Widget title text.

close-button

Close icon button.

messages

Scrollable message list.

message

Any message bubble.

assistant-message

Assistant message bubble.

user-message

User message bubble.

error-message

Error message bubble.

typing

Typing indicator bubble.

tool-call

Backend tool-call container.

tool-toggle

Button that expands tool results.

code-block

Markdown code block inside answers.

composer

Composer form area.

input

Question input.

send-button

Submit button.

footer

Powered-by footer container.

powered-by

Powered-by Context7 link.

launcher

Built-in floating launcher.

Copyable CSS blocks

Recipes that are safe to paste into product apps.

Brand token override
context7-widget[widget-id="docs"] {
  --c7-accent: #7cffb2;
  --c7-accent-contrast: #07120c;
  --c7-font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  --c7-panel-background: #101513;
  --c7-panel-color: #f7f2e8;
  --c7-border-color: rgba(247, 242, 232, 0.18);
  --c7-muted-color: rgba(247, 242, 232, 0.66);
}
Scoped dark theme
context7-widget[widget-id="docs"][theme="dark"] {
  --c7-panel-background: #070b09;
  --c7-header-background: #0c120f;
  --c7-footer-background: #0c120f;
  --c7-control-background: #101513;
  --c7-control-border: rgba(247, 242, 232, 0.18);
  --c7-control-color: #f7f2e8;
}

@media (prefers-color-scheme: dark) {
  context7-widget[widget-id="docs"][theme="auto"] {
    --c7-panel-background: #070b09;
    --c7-header-background: #0c120f;
    --c7-footer-background: #0c120f;
    --c7-control-background: #101513;
    --c7-control-border: rgba(247, 242, 232, 0.18);
    --c7-control-color: #f7f2e8;
  }
}
Dense product panel
context7-widget[widget-id="dashboard-docs"] {
  --c7-panel-width: min(420px, calc(100vw - 24px));
  --c7-panel-height: min(540px, calc(100vh - 96px));
  --c7-panel-radius: 8px;
  --c7-message-radius: 8px;
  --c7-spacing: 12px;
  --c7-launcher-size: 46px;
}
Shadow part polish
context7-widget::part(panel) {
  border-width: 1px;
}

context7-widget::part(title) {
  font-size: 0.875rem;
  letter-spacing: 0;
}

context7-widget::part(send-button) {
  min-width: 5rem;
  text-transform: uppercase;
}

context7-widget::part(code-block) {
  border: 1px solid rgba(255, 255, 255, 0.12);
}
Vue managed trigger
@import "@desource/context7-widget-vue/styles.css";

.context7-widget-trigger {
  --c7-vue-trigger-background: #111827;
  --c7-vue-trigger-color: #f8fafc;
  --c7-vue-trigger-radius: 8px;
  --c7-vue-trigger-shadow: none;
}
Centered dialog surface
context7-widget[position="center"] {
  --c7-backdrop: rgba(2, 6, 23, 0.68);
  --c7-backdrop-filter: blur(10px);
  --c7-panel-width: min(720px, calc(100vw - 32px));
  --c7-panel-height: min(680px, calc(100vh - 32px));
  --c7-panel-radius: 12px;
  --c7-panel-shadow: 0 32px 120px rgba(0, 0, 0, 0.36);
}

Rule of thumb

Variables are the contract. Parts are the escape hatch.

Avoid styling `.c7-*` classes inside the shadow DOM. They are implementation details. The variables and `::part` names documented here are the intended stable customization layer.