Make it yours

Bring your design into the conversation.

Bring your fonts, colors, and attention to detail into the conversation. Start with a preset, then style the panel, messages, and buttons to match your site.

CSS variables Shadow parts

Start here

Start with a preset, then make it yours.

Start with a preset

Choose minimal, glass, neo, terminal, or brutalist. Pick the look closest to your site and build from there.

Bring in your design

Connect your fonts, colors, spacing, and border radius to the widget’s CSS variables.

Finish the details

Style the panel, launcher, input, messages, and code blocks through their public part names.

Keep updates simple

Use documented variables and parts so your styles do not depend on the widget’s internal markup.

CSS variables

Use the design choices you have already made.

Set these variables on context7-widget for core, or .context7-widget for a native framework package. Style one instance with [widget-id="docs"], or use theme and preset selectors to refine each look.

Brand and type

Accent color, font family, secondary text, and keyboard focus ring.

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

Panel

Panel background, size, borders, corners, shadow, spacing, and stacking order.

--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 overlay behind a centered dialog or any widget with its backdrop enabled.

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

Header and footer

Background colors for the top and bottom of the panel.

--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

Background, border, and text colors for the input and send button.

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

Framework managed trigger

Applies to managed triggers rendered by a native framework package after its stylesheet is imported.

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

Shadow parts

Give each detail your own treatment.

Style individual elements with ::part(...) on the core custom element, or [part~='...'] in native framework markup. Use these for details beyond the CSS variables, such as a custom border on code blocks or a different header layout.

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

A few lines of CSS can change the whole feel.

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

Style individual parts

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

Framework managed trigger

/* Import the Vue, React, Svelte, or Angular package stylesheet first. */
.context7-widget-trigger {
  --c7-trigger-background: #111827;
  --c7-trigger-color: #f8fafc;
  --c7-trigger-radius: 8px;
  --c7-trigger-shadow: none;
}

Centered dialog

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

Keep your styles maintainable

Build on the public CSS API.

CSS variables, core ::part selectors, and framework [part] selectors are the supported styling options. Avoid internal .c7-* classes, which can change between releases.