Styling contract

Make the widget look owned.

Start with a preset, map your product colors and radius to stable variables, then polish exact blocks with shadow parts.

CSS variables Shadow parts

Start here

Style the stable surface, not internal markup.

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.

CSS variables

Override tokens without reaching into the widget.

Set these on `context7-widget`, on a scoped instance such as `context7-widget[widget-id="docs"]`, or inside theme and preset selectors. Use them for brand color, radius, surfaces, message bubbles, controls, and layout dimensions.

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

Target exact blocks when variables are not enough.

Use `::part(...)` when a product system needs direct styling for one stable surface. Prefer variables for colors, radius, spacing, and typography; use parts for borders, shadows, text transform, and focused polish.

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

Always-visible Context7 and DeSource Labs attribution.

launcher

Built-in floating launcher.

CSS recipes

Copy a starting point, then replace the tokens.

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);
}

Public styling contract

Variables are the contract. Parts are the precision tool.

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