Component registry

Components,
structured in one place

This is the Dataprovider design system. It is the single source of truth for how Dataprovider interfaces look and behave.

Every component here is a real, working component. The same files power three things at once: the live previews on this site, the components developers copy into their work, and a registry that AI coding tools read directly.

Because everything comes from one source, the three never drift apart. What you see on this page is exactly what a developer builds with, and exactly what an AI tool generates.

For developers

Browse the components below. Each one shows a live preview, the source code, and the variants it supports.

For AI tools

The registry is served as JSON at /registry.json. Point Cursor or Claude Code at it, and they build with real Dataprovider components instead of guessing markup. The rules files in the repo tell the AI how the system works: how variants, state and theming are expressed.

One source. Two audiences. No drift.

For AI coding tools
https://ds.dataprovider.dev/registry.json
npx shadcn@latest add https://ds.dataprovider.dev/r/button.json

Foundation

tokens.css

Every colour, type, spacing, radius and shadow value lives in tokens.css as a CSS custom property. Components read these variables, so theming happens in one place.

Gold
--dp-gold-500
Blue
--dp-blue-700
Navy
--dp-navy
Link
--dp-blue-600
Canvas
--dp-blue-100
Soft
--dp-blue-200
Border
--dp-neutral-500
Success
--dp-success
Warning
--dp-warning
Danger
--dp-danger
tokens.css View source

The web app uses its own system. tokens-console.css layers a [data-theme="console"] scope on top, so the same components render in the console look. The Console and Blocks sections below use it.

Purple
--dp-brand-purple
Blue
--dp-link
Gold
--dp-accent-yellow
Active
--dp-surface-soft
Grade A
--dp-grade-a
Grade C
--dp-grade-c
Grade F
--dp-grade-f
tokens-console.css View source
Forms

Button

registry:component

Clickable action with brand variants and three sizes. Set the look with data-variant (primary, cta, secondary, outline, ghost, danger) and the size with data-size.

Link button
npx shadcn@latest add https://ds.dataprovider.dev/r/button.json Registry JSON 
<!-- Button
     Variants: primary (default), cta, secondary, outline, ghost, danger, ai
     Sizes: sm, default, lg  (set with data-size)
     Use a <button> for actions and an <a> for navigation. -->

<!-- Variants -->
<button class="dp-btn" type="button">Primary</button>
<button class="dp-btn" type="button" data-variant="cta">Book a demo</button>
<button class="dp-btn" type="button" data-variant="secondary">Secondary</button>
<button class="dp-btn" type="button" data-variant="outline">Read more</button>
<button class="dp-btn" type="button" data-variant="ghost">Ghost</button>
<button class="dp-btn" type="button" data-variant="danger">Delete</button>
<button class="dp-btn" type="button" data-variant="ai">
  Create with AI
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 3l1.9 4.6L18.5 9l-4.6 1.9L12 15l-1.9-4.1L5.5 9l4.6-1.4z"></path></svg>
</button>

<!-- Sizes -->
<button class="dp-btn" type="button" data-size="sm">Small</button>
<button class="dp-btn" type="button">Default</button>
<button class="dp-btn" type="button" data-size="lg">Large</button>

<!-- With a leading icon (inline SVG, no icon font) -->
<button class="dp-btn" type="button" data-variant="cta">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <circle cx="11" cy="11" r="7"></circle>
    <path d="m21 21-4.3-4.3"></path>
  </svg>
  Search
</button>

<!-- Disabled -->
<button class="dp-btn" type="button" disabled>Disabled</button>

<!-- As a link -->
<a class="dp-btn" data-variant="primary" href="#">Link button</a>

/* Button
   Variants are selected with data-variant, sizes with data-size.
   All colour, radius and type come from tokens.css. */

.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dp-space-2);
  font-family: var(--dp-font-sans);
  font-weight: var(--dp-weight-bold);
  font-size: var(--dp-text-base);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--dp-radius-xs);
  padding: var(--dp-space-2) var(--dp-space-5);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dp-transition),
    border-color var(--dp-transition), color var(--dp-transition),
    box-shadow var(--dp-transition);
}

.dp-btn:focus-visible {
  outline: none;
  box-shadow: var(--dp-shadow-focus);
}

.dp-btn[disabled],
.dp-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Icons sit inline and scale with the text */
.dp-btn svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* ---- Sizes ----------------------------------------------------------- */
.dp-btn[data-size="sm"] {
  font-size: var(--dp-text-sm);
  padding: var(--dp-space-1) var(--dp-space-3);
}

.dp-btn[data-size="lg"] {
  font-size: var(--dp-text-lg);
  padding: var(--dp-space-3) var(--dp-space-6);
}

/* ---- Variants -------------------------------------------------------- */
/* primary (default): brand blue */
.dp-btn,
.dp-btn[data-variant="primary"] {
  background: var(--dp-primary-bg);
  border-color: var(--dp-primary-border);
  color: var(--dp-primary-text);
}

.dp-btn:hover,
.dp-btn[data-variant="primary"]:hover {
  background: var(--dp-primary-bg-hover);
  box-shadow: inset 0 1px 0.75px rgba(255, 255, 255, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

/* cta: brand gold, navy text (the most prominent action) */
.dp-btn[data-variant="cta"] {
  background: var(--dp-cta-bg);
  border-color: var(--dp-cta-border);
  color: var(--dp-cta-text);
}

.dp-btn[data-variant="cta"]:hover {
  background: var(--dp-cta-bg-hover);
  box-shadow: inset 0 1px 0.75px rgba(255, 255, 255, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

/* secondary: navy */
.dp-btn[data-variant="secondary"] {
  background: var(--dp-secondary-bg);
  border-color: var(--dp-secondary-border);
  color: var(--dp-secondary-text);
}

.dp-btn[data-variant="secondary"]:hover {
  background: var(--dp-secondary-bg-hover);
}

/* outline: light surface, neutral border, navy text */
.dp-btn[data-variant="outline"] {
  background: var(--dp-neutral-50);
  border-color: var(--dp-border-neutral);
  color: var(--dp-navy);
}

.dp-btn[data-variant="outline"]:hover {
  border-color: var(--dp-primary-bg);
  color: var(--dp-primary-bg);
}

/* ghost: text only until hovered */
.dp-btn[data-variant="ghost"] {
  background: transparent;
  border-color: transparent;
  color: var(--dp-navy);
}

.dp-btn[data-variant="ghost"]:hover {
  background: var(--dp-surface-soft);
}

/* ai: gradient action for AI features */
.dp-btn[data-variant="ai"] {
  background: var(--dp-gradient-ai, linear-gradient(135deg, #8b5cf6, #3049dc));
  border-color: transparent;
  color: var(--dp-white);
}

.dp-btn[data-variant="ai"]:hover {
  filter: brightness(1.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* danger: destructive action */
.dp-btn[data-variant="danger"] {
  background: var(--dp-danger);
  border-color: var(--dp-danger);
  color: var(--dp-white);
}

.dp-btn[data-variant="danger"]:hover {
  filter: brightness(0.93);
}

Input

registry:component

Labelled text field with optional hint, error text, sizes and a leading-icon group. Mark an invalid field with aria-invalid.

Use the registered legal name.
Enter a valid email address.
npx shadcn@latest add https://ds.dataprovider.dev/r/input.json Registry JSON 
<!-- Input
     Wrap a label, the input and any hint or error in .dp-field.
     Sizes: sm, default, lg (data-size on the input).
     Invalid state: aria-invalid="true" on the input. -->

<!-- Default with hint -->
<div class="dp-field">
  <label class="dp-label" for="company">Company name</label>
  <input class="dp-input" id="company" type="text" placeholder="Acme B.V." />
  <span class="dp-hint">Use the registered legal name.</span>
</div>

<!-- Optional field -->
<div class="dp-field">
  <label class="dp-label" data-optional for="vat">VAT number</label>
  <input class="dp-input" id="vat" type="text" placeholder="NL000000000B00" />
</div>

<!-- Invalid -->
<div class="dp-field">
  <label class="dp-label" for="email">Email address</label>
  <input class="dp-input" id="email" type="email" value="not-an-email"
         aria-invalid="true" aria-describedby="email-error" />
  <span class="dp-error" id="email-error">Enter a valid email address.</span>
</div>

<!-- Disabled -->
<div class="dp-field">
  <label class="dp-label" for="account">Account ID</label>
  <input class="dp-input" id="account" type="text" value="DP-49210" disabled />
</div>

<!-- Search with a leading icon -->
<div class="dp-field">
  <label class="dp-label" for="search">Search domains</label>
  <div class="dp-input-group">
    <svg class="dp-input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <circle cx="11" cy="11" r="7"></circle>
      <path d="m21 21-4.3-4.3"></path>
    </svg>
    <input class="dp-input" id="search" type="search" placeholder="example.com" />
  </div>
</div>

<!-- Sizes -->
<div class="dp-field">
  <label class="dp-label" for="small">Small</label>
  <input class="dp-input" id="small" type="text" data-size="sm" placeholder="Small field" />
</div>
<div class="dp-field">
  <label class="dp-label" for="large">Large</label>
  <input class="dp-input" id="large" type="text" data-size="lg" placeholder="Large field" />
</div>

/* Input
   A labelled text field with optional hint and error text.
   Sizes are set with data-size on the input. Mark an invalid field with
   aria-invalid="true". All colour, radius and type come from tokens.css. */

.dp-field {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-2);
}

.dp-label {
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-navy);
}

.dp-label[data-optional]::after {
  content: " (optional)";
  font-weight: var(--dp-weight-regular);
  color: var(--dp-text-subtle);
}

.dp-input {
  width: 100%;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  color: var(--dp-navy);
  background: var(--dp-white);
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-xs);
  padding: var(--dp-space-2) var(--dp-space-3);
  height: 2.5rem;
  transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
}

.dp-input::placeholder {
  color: var(--dp-text-subtle);
}

.dp-input:hover {
  border-color: var(--dp-blue-400);
}

.dp-input:focus {
  outline: none;
  border-color: var(--dp-primary-bg);
  box-shadow: var(--dp-shadow-focus);
}

.dp-input:disabled {
  background: var(--dp-neutral-200);
  color: var(--dp-text-subtle);
  cursor: not-allowed;
}

.dp-input[aria-invalid="true"] {
  border-color: var(--dp-danger);
}

.dp-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

/* ---- Sizes ----------------------------------------------------------- */
.dp-input[data-size="sm"] {
  height: 2.125rem;
  font-size: var(--dp-text-sm);
}

.dp-input[data-size="lg"] {
  height: 3rem;
  font-size: var(--dp-text-lg);
}

/* ---- Hint and error text -------------------------------------------- */
.dp-hint {
  font-size: var(--dp-text-sm);
  color: var(--dp-text-subtle);
}

.dp-error {
  font-size: var(--dp-text-sm);
  color: var(--dp-danger);
}

/* ---- Input with a leading icon (e.g. search) ------------------------ */
.dp-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-input-group .dp-input-icon {
  position: absolute;
  left: var(--dp-space-3);
  width: 1.15rem;
  height: 1.15rem;
  color: var(--dp-text-subtle);
  pointer-events: none;
}

.dp-input-group .dp-input {
  padding-left: calc(var(--dp-space-3) * 2 + 1.15rem);
}

Textarea

registry:component

Multiline text field that mirrors the input styling. Supports a hint, an error and an invalid state set with aria-invalid.

Markdown is not supported.
Give at least 10 characters.
npx shadcn@latest add https://ds.dataprovider.dev/r/textarea.json Registry JSON 
<!-- Textarea
     Wrap label, textarea and hint in .dp-field.
     Invalid state: aria-invalid="true". -->

<div class="dp-field">
  <label class="dp-label" for="notes">Notes</label>
  <textarea class="dp-textarea" id="notes" placeholder="Add context for this query"></textarea>
  <span class="dp-hint">Markdown is not supported.</span>
</div>

<div class="dp-field">
  <label class="dp-label" for="reason">Reason</label>
  <textarea class="dp-textarea" id="reason" aria-invalid="true"
            aria-describedby="reason-error">x</textarea>
  <span class="dp-error" id="reason-error">Give at least 10 characters.</span>
</div>

/* Textarea
   Multiline text field. Mirrors the input field styling. Wrap label, control
   and hint in .dp-field. Mark an invalid field with aria-invalid="true".
   All colour, radius and type come from tokens.css. */

.dp-textarea {
  width: 100%;
  min-height: 6rem;
  resize: vertical;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  line-height: var(--dp-leading-normal);
  color: var(--dp-navy);
  background: var(--dp-white);
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-xs);
  padding: var(--dp-space-3);
  transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
}

.dp-textarea::placeholder {
  color: var(--dp-text-subtle);
}

.dp-textarea:hover {
  border-color: var(--dp-blue-400);
}

.dp-textarea:focus {
  outline: none;
  border-color: var(--dp-primary-bg);
  box-shadow: var(--dp-shadow-focus);
}

.dp-textarea:disabled {
  background: var(--dp-neutral-200);
  color: var(--dp-text-subtle);
  cursor: not-allowed;
}

.dp-textarea[aria-invalid="true"] {
  border-color: var(--dp-danger);
}

.dp-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

Select

registry:component

Native select styled to match the input, with a custom chevron and three sizes set with data-size.

npx shadcn@latest add https://ds.dataprovider.dev/r/select.json Registry JSON 
<!-- Select
     Native select with a custom chevron. Sizes: sm, default, lg (data-size).
     Wrap label, select and hint in .dp-field. -->

<div class="dp-field">
  <label class="dp-label" for="tld">Top level domain</label>
  <select class="dp-select" id="tld">
    <option value="">Choose a TLD</option>
    <option>.com</option>
    <option>.nl</option>
    <option>.org</option>
    <option>.io</option>
  </select>
</div>

<div class="dp-field">
  <label class="dp-label" for="rows">Rows per page</label>
  <select class="dp-select" id="rows" data-size="sm">
    <option>25</option>
    <option>50</option>
    <option>100</option>
  </select>
</div>

<div class="dp-field">
  <label class="dp-label" for="region">Region</label>
  <select class="dp-select" id="region" disabled>
    <option>Europe</option>
  </select>
</div>

/* Select
   Native select styled to match the input field, with a custom chevron.
   Sizes are set with data-size. Wrap label, control and hint in .dp-field.
   All colour, radius and type come from tokens.css. */

.dp-select {
  width: 100%;
  height: 2.5rem;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  color: var(--dp-navy);
  background-color: var(--dp-white);
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-xs);
  padding: 0 calc(var(--dp-space-3) * 2 + 1rem) 0 var(--dp-space-3);
  appearance: none;
  cursor: pointer;
  /* Chevron drawn as an inline SVG, tinted to the muted text colour */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--dp-space-3) center;
  transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
}

.dp-select:hover {
  border-color: var(--dp-blue-400);
}

.dp-select:focus {
  outline: none;
  border-color: var(--dp-primary-bg);
  box-shadow: var(--dp-shadow-focus);
}

.dp-select:disabled {
  background-color: var(--dp-neutral-200);
  color: var(--dp-text-subtle);
  cursor: not-allowed;
}

.dp-select[aria-invalid="true"] {
  border-color: var(--dp-danger);
}

.dp-select[data-size="sm"] {
  height: 2.125rem;
  font-size: var(--dp-text-sm);
}

.dp-select[data-size="lg"] {
  height: 3rem;
  font-size: var(--dp-text-lg);
}

Checkbox

registry:component

Native checkbox with a custom box and tick. Supports checked, indeterminate and disabled states, with optional helper text.

npx shadcn@latest add https://ds.dataprovider.dev/r/checkbox.json Registry JSON 
<!-- Checkbox
     Pair a native checkbox with a label inside .dp-check.
     Use the indeterminate property (set in JS) for a partial state. -->

<label class="dp-check">
  <input class="dp-checkbox" type="checkbox" checked />
  <span>Include subdomains</span>
</label>

<label class="dp-check">
  <input class="dp-checkbox" type="checkbox" />
  <span>
    Refresh monthly
    <span class="dp-check-text">Re-run this query on the first of each month.</span>
  </span>
</label>

<label class="dp-check">
  <input class="dp-checkbox" type="checkbox" disabled checked />
  <span>Locked option</span>
</label>

/* Checkbox
   Native checkbox styled with a custom box and tick. Pair with a label inside
   .dp-check. All colour, radius and type come from tokens.css. */

.dp-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--dp-space-3);
  font-size: var(--dp-text-base);
  color: var(--dp-navy);
  cursor: pointer;
}

.dp-checkbox {
  appearance: none;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  background: var(--dp-white);
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-xs);
  cursor: pointer;
  transition: background-color var(--dp-transition),
    border-color var(--dp-transition), box-shadow var(--dp-transition);
}

.dp-checkbox:hover {
  border-color: var(--dp-blue-400);
}

.dp-checkbox:checked,
.dp-checkbox:indeterminate {
  background-color: var(--dp-primary-bg);
  border-color: var(--dp-primary-bg);
  background-repeat: no-repeat;
  background-position: center;
}

.dp-checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.dp-checkbox:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.dp-checkbox:focus-visible {
  outline: none;
  box-shadow: var(--dp-shadow-focus);
}

.dp-checkbox:disabled {
  background-color: var(--dp-neutral-200);
  border-color: var(--dp-neutral-400);
  cursor: not-allowed;
}

.dp-check:has(.dp-checkbox:disabled) {
  color: var(--dp-text-subtle);
  cursor: not-allowed;
}

/* Optional helper text under the label */
.dp-check-text {
  display: block;
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

Radio

registry:component

Native radio with a custom ring and dot. Group options with a shared name and add optional helper text.

npx shadcn@latest add https://ds.dataprovider.dev/r/radio.json Registry JSON 
<!-- Radio
     Group radios with a shared name. Pair each with a label inside .dp-radio. -->

<label class="dp-radio">
  <input class="dp-radio-input" type="radio" name="export" checked />
  <span>CSV</span>
</label>

<label class="dp-radio">
  <input class="dp-radio-input" type="radio" name="export" />
  <span>
    JSON
    <span class="dp-radio-text">One object per record.</span>
  </span>
</label>

<label class="dp-radio">
  <input class="dp-radio-input" type="radio" name="export" disabled />
  <span>Parquet</span>
</label>

/* Radio
   Native radio styled with a custom ring and dot. Pair with a label inside
   .dp-radio. Group radios with a shared name. Colour and type from tokens.css. */

.dp-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--dp-space-3);
  font-size: var(--dp-text-base);
  color: var(--dp-navy);
  cursor: pointer;
}

.dp-radio-input {
  appearance: none;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  background: var(--dp-white);
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-full);
  cursor: pointer;
  transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
}

.dp-radio-input:hover {
  border-color: var(--dp-blue-400);
}

.dp-radio-input:checked {
  border-color: var(--dp-primary-bg);
  border-width: 5px;
}

.dp-radio-input:focus-visible {
  outline: none;
  box-shadow: var(--dp-shadow-focus);
}

.dp-radio-input:disabled {
  background-color: var(--dp-neutral-200);
  border-color: var(--dp-neutral-400);
  cursor: not-allowed;
}

.dp-radio:has(.dp-radio-input:disabled) {
  color: var(--dp-text-subtle);
  cursor: not-allowed;
}

.dp-radio-text {
  display: block;
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

Switch

registry:component

A toggle built from a native checkbox with a sliding track. Use for on and off settings.

npx shadcn@latest add https://ds.dataprovider.dev/r/switch.json Registry JSON 
<!-- Switch
     A toggle built from a native checkbox. Pair with a label inside .dp-switch. -->

<label class="dp-switch">
  <input class="dp-switch-input" type="checkbox" checked />
  <span>Live updates</span>
</label>

<label class="dp-switch">
  <input class="dp-switch-input" type="checkbox" />
  <span>Email alerts</span>
</label>

<label class="dp-switch">
  <input class="dp-switch-input" type="checkbox" disabled />
  <span>Beta features</span>
</label>

/* Switch
   A toggle built from a native checkbox and a sliding track. Pair with a label
   inside .dp-switch. All colour and motion come from tokens.css. */

.dp-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-3);
  font-size: var(--dp-text-base);
  color: var(--dp-navy);
  cursor: pointer;
}

.dp-switch-input {
  appearance: none;
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 1.375rem;
  margin: 0;
  background: var(--dp-neutral-500);
  border-radius: var(--dp-radius-full);
  cursor: pointer;
  transition: background-color var(--dp-transition);
}

.dp-switch-input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--dp-white);
  border-radius: var(--dp-radius-full);
  box-shadow: var(--dp-shadow-sm);
  transition: transform var(--dp-transition);
}

.dp-switch-input:checked {
  background: var(--dp-primary-bg);
}

.dp-switch-input:checked::after {
  transform: translateX(1.125rem);
}

.dp-switch-input:focus-visible {
  outline: none;
  box-shadow: var(--dp-shadow-focus);
}

.dp-switch-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dp-switch:has(.dp-switch-input:disabled) {
  color: var(--dp-text-subtle);
  cursor: not-allowed;
}

Field

registry:component

An underline-style form field (label plus borderless input) used by the marketing forms.

npx shadcn@latest add https://ds.dataprovider.dev/r/field.json Registry JSON 
<!-- Field
     An underline-style form field: a bold label above a borderless input with
     a single bottom rule. Use for marketing forms (contact, newsletter). For
     boxed inputs inside the app, use the input component instead. -->

<div class="dp-field">
  <label class="dp-field-label" for="field-name">Work email</label>
  <input class="dp-field-input" id="field-name" type="email" placeholder="you@company.com">
</div>

<div class="dp-field">
  <label class="dp-field-label" for="field-source">How did you hear about us?</label>
  <select class="dp-field-input" id="field-source">
    <option value="">Please select</option>
    <option value="search">Search engine</option>
    <option value="referral">Referral</option>
  </select>
</div>

<div class="dp-field">
  <label class="dp-field-label" for="field-msg">Message</label>
  <textarea class="dp-field-input" id="field-msg" rows="2"></textarea>
</div>

/* Field
   An underline-style form field used by the marketing forms: a bold label
   above a borderless input that carries only a bottom rule. Works for text
   inputs, textareas and selects. Colour and type from tokens.css. */

.dp-field {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-2);
}

.dp-field-label {
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-field-input {
  width: 100%;
  padding: var(--dp-space-2) 0;
  font: inherit;
  font-size: var(--dp-text-base);
  color: var(--dp-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--dp-border-strong);
  border-radius: 0;
  outline: none;
  transition: border-color 0.15s ease;
}

.dp-field-input::placeholder { color: var(--dp-text-subtle); }

.dp-field-input:focus { border-bottom-color: var(--dp-link); }

textarea.dp-field-input { resize: vertical; }

select.dp-field-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101a50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 1.1rem;
  padding-right: 1.6rem;
}
Data display

Card

registry:component

Surface that groups related content. Variants are set with data-variant (default, subtle, elevated, flat). Compose with header, body and footer sections.

Domain coverage

Updated monthly across every TLD.

Track companies and technologies across 99% of all registered domains worldwide. Every record is structured and queryable.

400M+ domains

The complete web, structured in one place.

Subtle surface

Lower contrast for secondary content.

Asset management

Read more about the use case.
npx shadcn@latest add https://ds.dataprovider.dev/r/card.json Registry JSON 
<!-- Card
     Variants: default, subtle, elevated, flat (data-variant).
     Add data-interactive for a clickable card that lifts on hover.
     Compose with .dp-card-header, .dp-card-body and .dp-card-footer. -->

<!-- Card with header, body and footer -->
<div class="dp-card">
  <div class="dp-card-header">
    <h3 class="dp-card-title">Domain coverage</h3>
    <p class="dp-card-description">Updated monthly across every TLD.</p>
  </div>
  <div class="dp-card-body">
    Track companies and technologies across 99% of all registered domains
    worldwide. Every record is structured and queryable.
  </div>
  <div class="dp-card-footer">
    <button class="dp-btn" type="button" data-size="sm">View report</button>
    <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Export</button>
  </div>
</div>

<!-- Simple body-only card -->
<div class="dp-card">
  <div class="dp-card-body">
    <h3 class="dp-card-title">400M+ domains</h3>
    <p class="dp-card-description">The complete web, structured in one place.</p>
  </div>
</div>

<!-- Subtle variant -->
<div class="dp-card" data-variant="subtle">
  <div class="dp-card-body">
    <h3 class="dp-card-title">Subtle surface</h3>
    <p class="dp-card-description">Lower contrast for secondary content.</p>
  </div>
</div>

<!-- Interactive (clickable) card -->
<a class="dp-card" data-interactive href="#"
   style="text-decoration: none; max-width: 22rem;">
  <div class="dp-card-body">
    <h3 class="dp-card-title">Asset management</h3>
    <p class="dp-card-description">Read more about the use case.</p>
  </div>
</a>

/* Card
   A surface that groups related content. Variants are set with data-variant.
   Compose with .dp-card-header, .dp-card-body and .dp-card-footer.
   All colour, radius and shadow come from tokens.css. */

.dp-card {
  display: flex;
  flex-direction: column;
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
  box-shadow: var(--dp-shadow-md);
  color: var(--dp-text);
  overflow: hidden;
}

/* ---- Variants -------------------------------------------------------- */
.dp-card[data-variant="subtle"] {
  background: var(--dp-surface-subtle);
  box-shadow: var(--dp-shadow-sm);
}

.dp-card[data-variant="elevated"] {
  border-color: var(--dp-border-strong);
  box-shadow: var(--dp-shadow-lg);
}

.dp-card[data-variant="flat"] {
  box-shadow: none;
}

/* Interactive cards lift on hover */
.dp-card[data-interactive] {
  cursor: pointer;
  transition: transform var(--dp-transition), box-shadow var(--dp-transition),
    border-color var(--dp-transition);
}

.dp-card[data-interactive]:hover {
  transform: translateY(-2px);
  box-shadow: var(--dp-shadow-lg);
  border-color: var(--dp-border-strong);
}

.dp-card[data-interactive]:focus-visible {
  outline: none;
  box-shadow: var(--dp-shadow-focus);
}

/* ---- Sections -------------------------------------------------------- */
.dp-card-header {
  padding: var(--dp-space-5) var(--dp-space-6);
  border-bottom: 1px solid var(--dp-border);
}

.dp-card-body {
  padding: var(--dp-space-6);
}

.dp-card-footer {
  display: flex;
  align-items: center;
  gap: var(--dp-space-3);
  padding: var(--dp-space-4) var(--dp-space-6);
  border-top: 1px solid var(--dp-border);
  background: var(--dp-surface-subtle);
}

/* ---- Content --------------------------------------------------------- */
.dp-card-title {
  margin: 0;
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-card-description {
  margin: var(--dp-space-2) 0 0;
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

Table

registry:component

Data table with a sticky-style header, row hover and right-aligned numeric columns. Wrap it to scroll on narrow screens.

Domain Country Pages Visits
example.com United States 1.204 98.430
dataprovider.nl Netherlands 312 24.108
acme.io Germany 87 5.642
npx shadcn@latest add https://ds.dataprovider.dev/r/table.json Registry JSON 
<!-- Table
     Wrap the table in .dp-table-wrap so it scrolls on narrow screens.
     Use data-align="end" on numeric cells and data-sortable on headers. -->

<div class="dp-table-wrap">
  <table class="dp-table">
    <thead>
      <tr>
        <th data-sortable>
          Domain
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
               stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
          </svg>
        </th>
        <th>Country</th>
        <th data-align="end">Pages</th>
        <th data-align="end">Visits</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>example.com</td>
        <td>United States</td>
        <td data-align="end">1.204</td>
        <td data-align="end">98.430</td>
      </tr>
      <tr>
        <td>dataprovider.nl</td>
        <td>Netherlands</td>
        <td data-align="end">312</td>
        <td data-align="end">24.108</td>
      </tr>
      <tr>
        <td>acme.io</td>
        <td>Germany</td>
        <td data-align="end">87</td>
        <td data-align="end">5.642</td>
      </tr>
    </tbody>
  </table>
</div>

/* Table
   A data table in the console style. Wrap in .dp-table-wrap for horizontal
   scroll on narrow screens. All colour and type come from tokens.css. */

.dp-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  background: var(--dp-surface);
}

.dp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dp-text-sm);
  color: var(--dp-text);
}

.dp-table thead th {
  text-align: left;
  font-weight: var(--dp-weight-bold);
  color: var(--dp-text-muted);
  background: var(--dp-surface-subtle);
  padding: var(--dp-space-3) var(--dp-space-4);
  border-bottom: 1px solid var(--dp-border);
  white-space: nowrap;
}

.dp-table tbody td {
  padding: var(--dp-space-3) var(--dp-space-4);
  border-bottom: 1px solid var(--dp-border);
}

.dp-table tbody tr:last-child td {
  border-bottom: 0;
}

.dp-table tbody tr:hover {
  background: var(--dp-surface-subtle);
}

/* Numeric columns align right */
.dp-table [data-align="end"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Sortable header */
.dp-table th[data-sortable] {
  cursor: pointer;
}

.dp-table th[data-sortable]:hover {
  color: var(--dp-navy);
}

.dp-table th[data-sortable] svg {
  width: 0.875em;
  height: 0.875em;
  vertical-align: -2px;
  opacity: 0.6;
}

Stat

registry:component

A single metric with a large value, a label and an optional trend. Set the trend direction with data-tone.

412M Domains tracked
99% Registered domains covered 2.1% this month
1.8s Median query time 0.3s faster
npx shadcn@latest add https://ds.dataprovider.dev/r/stat.json Registry JSON 
<!-- Stat
     Group metrics in .dp-stat-row. Set the trend direction with data-tone
     (up or down) on .dp-stat-trend. -->

<div class="dp-stat-row">
  <div class="dp-stat">
    <span class="dp-stat-value">412M</span>
    <span class="dp-stat-label">Domains tracked</span>
  </div>

  <div class="dp-stat">
    <span class="dp-stat-value">99%</span>
    <span class="dp-stat-label">Registered domains covered</span>
    <span class="dp-stat-trend" data-tone="up">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M7 17 17 7"></path><path d="M7 7h10v10"></path>
      </svg>
      2.1% this month
    </span>
  </div>

  <div class="dp-stat">
    <span class="dp-stat-value">1.8s</span>
    <span class="dp-stat-label">Median query time</span>
    <span class="dp-stat-trend" data-tone="down">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M17 7 7 17"></path><path d="M17 17H7V7"></path>
      </svg>
      0.3s faster
    </span>
  </div>
</div>

/* Stat
   A single metric: a large value with a label and an optional trend.
   Group stats in a .dp-stat-row. Status tone is set with data-tone on the
   trend. All colour and type come from tokens.css. */

.dp-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-6);
}

.dp-stat {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-1);
  min-width: 8rem;
}

.dp-stat-value {
  font-size: var(--dp-text-3xl);
  font-weight: var(--dp-weight-extrabold);
  line-height: 1;
  color: var(--dp-navy);
  font-variant-numeric: tabular-nums;
}

.dp-stat-label {
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

.dp-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-1);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-text-muted);
}

.dp-stat-trend svg {
  width: 1em;
  height: 1em;
}

.dp-stat-trend[data-tone="up"] {
  color: var(--dp-success);
}

.dp-stat-trend[data-tone="down"] {
  color: var(--dp-danger);
}

Badge

registry:component

Small status or category label. Tone is set with data-tone and style with data-variant (soft is the default, solid for high emphasis).

Primary Neutral Active Pending Blocked Info Online Primary Success Warning Danger
npx shadcn@latest add https://ds.dataprovider.dev/r/badge.json Registry JSON 
<!-- Badge
     Tone: neutral, primary (default), success, warning, danger, info.
     Variant: soft (default) or solid (data-variant="solid"). -->

<!-- Soft (default) -->
<span class="dp-badge" data-tone="primary">Primary</span>
<span class="dp-badge" data-tone="neutral">Neutral</span>
<span class="dp-badge" data-tone="success">Active</span>
<span class="dp-badge" data-tone="warning">Pending</span>
<span class="dp-badge" data-tone="danger">Blocked</span>
<span class="dp-badge" data-tone="info">Info</span>

<!-- With a leading dot icon -->
<span class="dp-badge" data-tone="success">
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="6"></circle></svg>
  Online
</span>

<!-- Solid -->
<span class="dp-badge" data-variant="solid" data-tone="primary">Primary</span>
<span class="dp-badge" data-variant="solid" data-tone="success">Success</span>
<span class="dp-badge" data-variant="solid" data-tone="warning">Warning</span>
<span class="dp-badge" data-variant="solid" data-tone="danger">Danger</span>

/* Badge
   A small status or category label. Tone is set with data-tone (neutral,
   primary, success, warning, danger, info). Style is set with data-variant
   (soft is the default, solid for high emphasis). Colour from tokens.css. */

.dp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-1);
  font-size: var(--dp-text-xs);
  font-weight: var(--dp-weight-bold);
  line-height: 1;
  padding: 4px var(--dp-space-2);
  border-radius: var(--dp-radius-full);
  white-space: nowrap;
}

.dp-badge svg {
  width: 0.875em;
  height: 0.875em;
}

/* ---- Soft (default): tinted background, strong text ------------------ */
.dp-badge,
.dp-badge[data-tone="primary"] {
  background: var(--dp-primary-soft);
  color: var(--dp-blue-700);
}

.dp-badge[data-tone="neutral"] {
  background: var(--dp-neutral-soft);
  color: var(--dp-text-muted);
}

.dp-badge[data-tone="success"] {
  background: var(--dp-success-soft);
  color: var(--dp-success);
}

.dp-badge[data-tone="warning"] {
  background: var(--dp-warning-soft);
  color: var(--dp-warning);
}

.dp-badge[data-tone="danger"] {
  background: var(--dp-danger-soft);
  color: var(--dp-danger);
}

.dp-badge[data-tone="info"] {
  background: var(--dp-info-soft);
  color: var(--dp-info);
}

/* ---- Solid: filled background, light text ---------------------------- */
.dp-badge[data-variant="solid"] {
  color: var(--dp-white);
}

.dp-badge[data-variant="solid"],
.dp-badge[data-variant="solid"][data-tone="primary"] {
  background: var(--dp-primary-bg);
}

.dp-badge[data-variant="solid"][data-tone="neutral"] {
  background: var(--dp-navy);
}

.dp-badge[data-variant="solid"][data-tone="success"] {
  background: var(--dp-success);
}

.dp-badge[data-variant="solid"][data-tone="warning"] {
  background: var(--dp-warning);
}

.dp-badge[data-variant="solid"][data-tone="danger"] {
  background: var(--dp-danger);
}

.dp-badge[data-variant="solid"][data-tone="info"] {
  background: var(--dp-info);
}

Avatar

registry:component

Circular image or initials in three sizes. Stack several in a group for an overlapping row.

BB BB BB A1 B2 C3 +5
npx shadcn@latest add https://ds.dataprovider.dev/r/avatar.json Registry JSON 
<!-- Avatar
     Initials or an image. Sizes: sm, default, lg (data-size).
     Use .dp-avatar-group for an overlapping row. -->

<!-- Initials -->
<span class="dp-avatar" data-size="sm" aria-label="Bram Bergen">BB</span>
<span class="dp-avatar" aria-label="Bram Bergen">BB</span>
<span class="dp-avatar" data-size="lg" aria-label="Bram Bergen">BB</span>

<!-- Image -->
<span class="dp-avatar">
  <img src="https://www.dataprovider.com/favicon.ico" alt="" />
</span>

<!-- Overlapping group -->
<span class="dp-avatar-group">
  <span class="dp-avatar" aria-label="User one">A1</span>
  <span class="dp-avatar" aria-label="User two">B2</span>
  <span class="dp-avatar" aria-label="User three">C3</span>
  <span class="dp-avatar" style="background: var(--dp-neutral-300); color: var(--dp-text-muted);">+5</span>
</span>

/* Avatar
   A circular image or initials. Sizes are set with data-size (sm, default,
   lg). Stack avatars in .dp-avatar-group for an overlapping row.
   Colour and type from tokens.css. */

.dp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--dp-radius-full);
  background: var(--dp-blue-200);
  color: var(--dp-blue-700);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  overflow: hidden;
  user-select: none;
  flex: none;
}

.dp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dp-avatar[data-size="sm"] {
  width: 2rem;
  height: 2rem;
  font-size: var(--dp-text-xs);
}

.dp-avatar[data-size="lg"] {
  width: 3.5rem;
  height: 3.5rem;
  font-size: var(--dp-text-xl);
}

/* Overlapping group */
.dp-avatar-group {
  display: inline-flex;
}

.dp-avatar-group .dp-avatar {
  border: 2px solid var(--dp-surface);
  margin-left: -0.625rem;
}

.dp-avatar-group .dp-avatar:first-child {
  margin-left: 0;
}
Feedback

Alert

registry:component

Inline message with an icon, title and text. Tone is set with data-tone (info, success, warning, danger).

Data refreshed The dataset was last updated on the first of this month.
Export ready Your CSV download has finished.
Approaching limit You have used 90% of this month's queries.
npx shadcn@latest add https://ds.dataprovider.dev/r/alert.json Registry JSON 
<!-- Alert
     Tone: info (default), success, warning, danger.
     Compose an icon, a title and text inside .dp-alert-body. -->

<div class="dp-alert" role="status">
  <svg class="dp-alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>
  </svg>
  <div class="dp-alert-body">
    <span class="dp-alert-title">Data refreshed</span>
    <span class="dp-alert-text">The dataset was last updated on the first of this month.</span>
  </div>
</div>

<div class="dp-alert" data-tone="success" role="status">
  <svg class="dp-alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="M20 6 9 17l-5-5"></path>
  </svg>
  <div class="dp-alert-body">
    <span class="dp-alert-title">Export ready</span>
    <span class="dp-alert-text">Your CSV download has finished.</span>
  </div>
</div>

<div class="dp-alert" data-tone="warning" role="status">
  <svg class="dp-alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3Z"></path>
    <path d="M12 9v4"></path><path d="M12 17h.01"></path>
  </svg>
  <div class="dp-alert-body">
    <span class="dp-alert-title">Approaching limit</span>
    <span class="dp-alert-text">You have used 90% of this month's queries.</span>
  </div>
</div>

<div class="dp-alert" data-tone="danger" role="alert">
  <svg class="dp-alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="10"></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6"></path>
  </svg>
  <div class="dp-alert-body">
    <span class="dp-alert-title">Query failed</span>
    <span class="dp-alert-text">The filter could not be parsed. Check the syntax and try again.</span>
  </div>
</div>

/* Alert
   An inline message. Tone is set with data-tone (info (default), success,
   warning, danger). Compose with an icon, .dp-alert-body, a title and text.
   All colour and type come from tokens.css. */

.dp-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--dp-space-3);
  padding: var(--dp-space-4) var(--dp-space-5);
  border: 1px solid transparent;
  border-radius: var(--dp-radius-md);
  color: var(--dp-text);
  background: var(--dp-info-soft);
  border-color: var(--dp-blue-300);
}

.dp-alert-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 1px;
  color: var(--dp-info);
}

.dp-alert-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dp-alert-title {
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-alert-text {
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

/* ---- Tones ----------------------------------------------------------- */
.dp-alert[data-tone="success"] {
  background: var(--dp-success-soft);
  border-color: #bbf7d0;
}
.dp-alert[data-tone="success"] .dp-alert-icon { color: var(--dp-success); }

.dp-alert[data-tone="warning"] {
  background: var(--dp-warning-soft);
  border-color: #fde68a;
}
.dp-alert[data-tone="warning"] .dp-alert-icon { color: var(--dp-warning); }

.dp-alert[data-tone="danger"] {
  background: var(--dp-danger-soft);
  border-color: #fecaca;
}
.dp-alert[data-tone="danger"] .dp-alert-icon { color: var(--dp-danger); }

Progress

registry:component

Horizontal progress bar with tone variants and an indeterminate mode for unknown durations. Set the fill width inline.

npx shadcn@latest add https://ds.dataprovider.dev/r/progress.json Registry JSON 
<!-- Progress
     Set the fill width inline and mirror it on aria-valuenow.
     Tone: default, success, warning, danger. Add data-indeterminate for an
     unknown-duration bar. -->

<div class="dp-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="35">
  <div class="dp-progress-bar" style="width: 35%;"></div>
</div>

<div class="dp-progress" data-tone="success" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
  <div class="dp-progress-bar" style="width: 100%;"></div>
</div>

<div class="dp-progress" data-tone="warning" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70">
  <div class="dp-progress-bar" style="width: 70%;"></div>
</div>

<div class="dp-progress" data-indeterminate role="progressbar" aria-label="Loading">
  <div class="dp-progress-bar"></div>
</div>

/* Progress
   A horizontal progress bar. Set the fill width inline (or from JS) and mirror
   it on the aria-valuenow attribute. Tone is set with data-tone on the track.
   Add data-indeterminate for an unknown-duration bar. Colour from tokens.css. */

.dp-progress {
  width: 100%;
  height: 0.5rem;
  background: var(--dp-blue-200);
  border-radius: var(--dp-radius-full);
  overflow: hidden;
}

.dp-progress-bar {
  height: 100%;
  width: 0;
  background: var(--dp-primary-bg);
  border-radius: inherit;
  transition: width var(--dp-transition);
}

.dp-progress[data-tone="success"] .dp-progress-bar { background: var(--dp-success); }
.dp-progress[data-tone="warning"] .dp-progress-bar { background: var(--dp-warning); }
.dp-progress[data-tone="danger"] .dp-progress-bar { background: var(--dp-danger); }

/* Indeterminate: a sliding sliver for unknown duration */
.dp-progress[data-indeterminate] .dp-progress-bar {
  width: 40%;
  animation: dp-progress-slide 1.2s ease-in-out infinite;
}

@keyframes dp-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

Spinner

registry:component

Spinning loading indicator in three sizes. Inherits the current colour or takes a neutral tone, and slows under reduced-motion.

npx shadcn@latest add https://ds.dataprovider.dev/r/spinner.json Registry JSON 
<!-- Spinner
     Sizes: sm, default, lg (data-size). Tone: default (blue) or neutral.
     Include a label for screen readers. -->

<span class="dp-spinner" data-size="sm" role="status" aria-label="Loading"></span>
<span class="dp-spinner" role="status" aria-label="Loading"></span>
<span class="dp-spinner" data-size="lg" role="status" aria-label="Loading"></span>
<span class="dp-spinner" data-tone="neutral" role="status" aria-label="Loading"></span>

/* Spinner
   A spinning loading indicator. Sizes are set with data-size (sm, default,
   lg). Inherits the current text colour, or set data-tone. Add a visually
   hidden label for screen readers. Colour from tokens.css. */

.dp-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--dp-blue-200);
  border-top-color: var(--dp-primary-bg);
  border-radius: var(--dp-radius-full);
  animation: dp-spin 0.7s linear infinite;
}

.dp-spinner[data-size="sm"] {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.dp-spinner[data-size="lg"] {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 3px;
}

.dp-spinner[data-tone="neutral"] {
  border-color: var(--dp-neutral-300);
  border-top-color: var(--dp-text-muted);
}

@keyframes dp-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dp-spinner { animation-duration: 2s; }
}

Skeleton

registry:component

Animated placeholder shown while content loads. Shapes are set with data-shape (default, text, circle).

npx shadcn@latest add https://ds.dataprovider.dev/r/skeleton.json Registry JSON 
<!-- Skeleton
     A loading placeholder. Set size inline. Shapes: default, text, circle. -->

<!-- A loading card: avatar, two lines of text and a wider block -->
<div style="display: flex; gap: var(--dp-space-4); align-items: center; max-width: 24rem;">
  <span class="dp-skeleton" data-shape="circle" style="width: 2.5rem; height: 2.5rem;"></span>
  <div style="flex: 1; display: flex; flex-direction: column; gap: var(--dp-space-2);">
    <span class="dp-skeleton" data-shape="text" style="width: 60%;"></span>
    <span class="dp-skeleton" data-shape="text" style="width: 90%;"></span>
  </div>
</div>

<span class="dp-skeleton" style="height: 8rem; max-width: 24rem; border-radius: var(--dp-radius-lg);"></span>

/* Skeleton
   A placeholder shown while content loads. Set width and height inline or with
   utility classes. Use data-shape="circle" for avatars and data-shape="text"
   for lines. Colour and motion come from tokens.css. */

.dp-skeleton {
  display: block;
  width: 100%;
  height: 1rem;
  border-radius: var(--dp-radius-sm);
  background: linear-gradient(
    90deg,
    var(--dp-blue-200) 25%,
    var(--dp-blue-100) 37%,
    var(--dp-blue-200) 63%
  );
  background-size: 400% 100%;
  animation: dp-skeleton-shimmer 1.4s ease infinite;
}

.dp-skeleton[data-shape="text"] {
  height: 0.75rem;
  border-radius: var(--dp-radius-xs);
}

.dp-skeleton[data-shape="circle"] {
  border-radius: var(--dp-radius-full);
}

@keyframes dp-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-skeleton { animation: none; }
}

Tooltip

registry:component

Label shown on hover or keyboard focus. Position is set with data-side. Add data-open to force it visible.

Refreshed monthly Shown beneath the trigger This tooltip is forced open
npx shadcn@latest add https://ds.dataprovider.dev/r/tooltip.json Registry JSON 
<!-- Tooltip
     Wrap the trigger and .dp-tooltip-content in .dp-tooltip. Shows on hover
     and keyboard focus. Position with data-side (top, bottom). The third
     example uses data-open so it stays visible. -->

<span class="dp-tooltip" tabindex="0">
  <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Hover me</button>
  <span class="dp-tooltip-content" role="tooltip">Refreshed monthly</span>
</span>

<span class="dp-tooltip" data-side="bottom" tabindex="0">
  <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Below</button>
  <span class="dp-tooltip-content" role="tooltip">Shown beneath the trigger</span>
</span>

<span class="dp-tooltip" data-open>
  <button class="dp-btn" type="button" data-size="sm">Always on</button>
  <span class="dp-tooltip-content" role="tooltip">This tooltip is forced open</span>
</span>

/* Tooltip
   A label shown on hover or focus. Wrap the trigger and .dp-tooltip-content in
   .dp-tooltip. Position is set with data-side (top (default), bottom).
   Add data-open to force it visible. Colour and type from tokens.css. */

.dp-tooltip {
  position: relative;
  display: inline-flex;
}

.dp-tooltip-content {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 20;
  background: var(--dp-navy);
  color: var(--dp-white);
  font-size: var(--dp-text-xs);
  font-weight: var(--dp-weight-semibold);
  line-height: 1.3;
  padding: var(--dp-space-2) var(--dp-space-3);
  border-radius: var(--dp-radius-sm);
  box-shadow: var(--dp-shadow-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dp-transition);
}

/* Arrow */
.dp-tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dp-navy);
}

.dp-tooltip[data-side="bottom"] .dp-tooltip-content {
  bottom: auto;
  top: calc(100% + 8px);
}

.dp-tooltip[data-side="bottom"] .dp-tooltip-content::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--dp-navy);
}

/* Shown on hover, keyboard focus, or when forced open */
.dp-tooltip:hover .dp-tooltip-content,
.dp-tooltip:focus-within .dp-tooltip-content,
.dp-tooltip[data-open] .dp-tooltip-content {
  opacity: 1;
}
Navigation

Tabs

registry:component

Tabbed panels that switch without JavaScript, driven by hidden radios. Supports up to five tabs.

Search 400M domains by technology, content and company attributes.
Plot company and technology adoption across regions.
Build reports on trends, links and ownership over time.
npx shadcn@latest add https://ds.dataprovider.dev/r/tabs.json Registry JSON 
<!-- Tabs
     Works without JavaScript. Put the radios first (shared name, one checked),
     then the labels in .dp-tablist, then the panels in .dp-tabpanels. Keep
     label and panel order in step. Use a unique name per tabs instance. -->

<div class="dp-tabs">
  <input class="dp-tab-radio" type="radio" name="dp-tabs-demo" id="dp-tab-1" checked />
  <input class="dp-tab-radio" type="radio" name="dp-tabs-demo" id="dp-tab-2" />
  <input class="dp-tab-radio" type="radio" name="dp-tabs-demo" id="dp-tab-3" />

  <div class="dp-tablist" role="tablist">
    <label class="dp-tab" for="dp-tab-1">Discover</label>
    <label class="dp-tab" for="dp-tab-2">Map</label>
    <label class="dp-tab" for="dp-tab-3">Analyze</label>
  </div>

  <div class="dp-tabpanels">
    <div class="dp-tabpanel" role="tabpanel">
      Search 400M domains by technology, content and company attributes.
    </div>
    <div class="dp-tabpanel" role="tabpanel">
      Plot company and technology adoption across regions.
    </div>
    <div class="dp-tabpanel" role="tabpanel">
      Build reports on trends, links and ownership over time.
    </div>
  </div>
</div>

/* Tabs
   A tabbed panel that works without JavaScript. Hidden radios (one group via a
   shared name) drive which label is active and which panel shows. Supports up
   to five tabs. Colour and type come from tokens.css.

   Structure: radios first, then .dp-tablist (labels), then .dp-tabpanels
   (panels). Match each label's `for` to a radio id, and keep label and panel
   order in step. */

.dp-tabs {
  display: block;
}

.dp-tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dp-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-1);
  border-bottom: 1px solid var(--dp-border);
}

.dp-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-2);
  padding: var(--dp-space-3) var(--dp-space-4);
  font-weight: var(--dp-weight-bold);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dp-transition), border-color var(--dp-transition);
}

.dp-tab:hover {
  color: var(--dp-navy);
}

.dp-tabpanels {
  padding-top: var(--dp-space-5);
}

.dp-tabpanel {
  display: none;
  color: var(--dp-text-muted);
}

/* Show the panel whose index matches the checked radio */
.dp-tab-radio:nth-of-type(1):checked ~ .dp-tabpanels .dp-tabpanel:nth-child(1),
.dp-tab-radio:nth-of-type(2):checked ~ .dp-tabpanels .dp-tabpanel:nth-child(2),
.dp-tab-radio:nth-of-type(3):checked ~ .dp-tabpanels .dp-tabpanel:nth-child(3),
.dp-tab-radio:nth-of-type(4):checked ~ .dp-tabpanels .dp-tabpanel:nth-child(4),
.dp-tab-radio:nth-of-type(5):checked ~ .dp-tabpanels .dp-tabpanel:nth-child(5) {
  display: block;
}

/* Mark the matching label active */
.dp-tab-radio:nth-of-type(1):checked ~ .dp-tablist .dp-tab:nth-child(1),
.dp-tab-radio:nth-of-type(2):checked ~ .dp-tablist .dp-tab:nth-child(2),
.dp-tab-radio:nth-of-type(3):checked ~ .dp-tablist .dp-tab:nth-child(3),
.dp-tab-radio:nth-of-type(4):checked ~ .dp-tablist .dp-tab:nth-child(4),
.dp-tab-radio:nth-of-type(5):checked ~ .dp-tablist .dp-tab:nth-child(5) {
  color: var(--dp-navy);
  border-bottom-color: var(--dp-blue-700);
}

/* Keyboard focus ring on the matching label */
.dp-tab-radio:nth-of-type(1):focus-visible ~ .dp-tablist .dp-tab:nth-child(1),
.dp-tab-radio:nth-of-type(2):focus-visible ~ .dp-tablist .dp-tab:nth-child(2),
.dp-tab-radio:nth-of-type(3):focus-visible ~ .dp-tablist .dp-tab:nth-child(3),
.dp-tab-radio:nth-of-type(4):focus-visible ~ .dp-tablist .dp-tab:nth-child(4),
.dp-tab-radio:nth-of-type(5):focus-visible ~ .dp-tablist .dp-tab:nth-child(5) {
  outline: none;
  box-shadow: var(--dp-shadow-focus);
  border-radius: var(--dp-radius-xs) var(--dp-radius-xs) 0 0;
}

Pagination

registry:component

Page navigation with previous and next controls, a current page and an ellipsis for skipped ranges.

npx shadcn@latest add https://ds.dataprovider.dev/r/pagination.json Registry JSON 
<!-- Pagination
     Mark the current page with aria-current="page". Disable prev or next with
     the disabled attribute. Use .dp-page-ellipsis to skip a range. -->

<nav class="dp-pagination" aria-label="Pagination">
  <button class="dp-page" type="button" disabled aria-label="Previous page">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="m15 18-6-6 6-6"></path>
    </svg>
  </button>
  <a class="dp-page" href="#" aria-current="page">1</a>
  <a class="dp-page" href="#">2</a>
  <a class="dp-page" href="#">3</a>
  <span class="dp-page-ellipsis" aria-hidden="true">&hellip;</span>
  <a class="dp-page" href="#">24</a>
  <button class="dp-page" type="button" aria-label="Next page">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </button>
</nav>

/* Pagination
   Page navigation. Mark the current page with aria-current="page". Disable the
   previous or next control with the disabled attribute (on a button) or
   aria-disabled (on a link). Colour and type from tokens.css. */

.dp-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-1);
}

.dp-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--dp-space-2);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--dp-radius-xs);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dp-transition), color var(--dp-transition),
    border-color var(--dp-transition);
}

.dp-page svg {
  width: 1.1em;
  height: 1.1em;
}

.dp-page:hover {
  background: var(--dp-surface-soft);
  color: var(--dp-navy);
}

.dp-page[aria-current="page"] {
  background: var(--dp-primary-bg);
  border-color: var(--dp-primary-border);
  color: var(--dp-white);
}

.dp-page:focus-visible {
  outline: none;
  box-shadow: var(--dp-shadow-focus);
}

.dp-page[disabled],
.dp-page[aria-disabled="true"] {
  color: var(--dp-text-subtle);
  cursor: not-allowed;
  pointer-events: none;
}

.dp-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  color: var(--dp-text-subtle);
}
Layout & overlay

Separator

registry:component

Divider between content. Horizontal by default, vertical inside a flex row, or labelled with centred text.

Above the line

Below the line

OR
Pages Visits Owner
npx shadcn@latest add https://ds.dataprovider.dev/r/separator.json Registry JSON 
<!-- Separator
     Horizontal by default. Use data-orientation="vertical" inside a flex row.
     Use .dp-separator-labelled for a divider with centred text. -->

<!-- Horizontal -->
<p style="margin: 0; color: var(--dp-text-muted);">Above the line</p>
<hr class="dp-separator" />
<p style="margin: 0; color: var(--dp-text-muted);">Below the line</p>

<!-- Labelled -->
<div class="dp-separator-labelled">OR</div>

<!-- Vertical, inside a row -->
<div style="display: flex; align-items: center; height: 2rem; color: var(--dp-text-muted);">
  <span>Pages</span>
  <span class="dp-separator" data-orientation="vertical" role="separator"></span>
  <span>Visits</span>
  <span class="dp-separator" data-orientation="vertical" role="separator"></span>
  <span>Owner</span>
</div>

/* Separator
   A divider between content. Horizontal by default; set
   data-orientation="vertical" for a vertical rule inside a flex row. Use
   .dp-separator-labelled for a divider with centred text. Colour from
   tokens.css. */

.dp-separator {
  border: 0;
  height: 1px;
  background: var(--dp-border);
  margin: var(--dp-space-4) 0;
}

.dp-separator[data-orientation="vertical"] {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin: 0 var(--dp-space-4);
}

.dp-separator-labelled {
  display: flex;
  align-items: center;
  gap: var(--dp-space-3);
  color: var(--dp-text-subtle);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
}

.dp-separator-labelled::before,
.dp-separator-labelled::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--dp-border);
}

Accordion

registry:component

Expandable sections built from native details and summary, so they work without JavaScript. The chevron rotates when open.

What is in the dataset
Structured records for 400M domains, refreshed monthly across every TLD.
How often is it updated
The full dataset is rebuilt on the first of each month.
Which formats can I export
CSV and JSON are available on every plan.
npx shadcn@latest add https://ds.dataprovider.dev/r/accordion.json Registry JSON 
<!-- Accordion
     Native details and summary, so it works without JavaScript. Add the open
     attribute to a details to start it expanded. Group sections in
     .dp-accordion. -->

<div class="dp-accordion">
  <details open>
    <summary>
      What is in the dataset
      <svg class="dp-accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </summary>
    <div class="dp-accordion-content">
      Structured records for 400M domains, refreshed monthly across every TLD.
    </div>
  </details>

  <details>
    <summary>
      How often is it updated
      <svg class="dp-accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </summary>
    <div class="dp-accordion-content">
      The full dataset is rebuilt on the first of each month.
    </div>
  </details>

  <details>
    <summary>
      Which formats can I export
      <svg class="dp-accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </summary>
    <div class="dp-accordion-content">
      CSV and JSON are available on every plan.
    </div>
  </details>
</div>

/* Accordion
   Expandable sections built from native details and summary, so they work
   without JavaScript. Group sections in .dp-accordion. Colour and type from
   tokens.css. */

.dp-accordion {
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  overflow: hidden;
  background: var(--dp-surface);
}

.dp-accordion details {
  border-bottom: 1px solid var(--dp-border);
}

.dp-accordion details:last-child {
  border-bottom: 0;
}

.dp-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dp-space-3);
  padding: var(--dp-space-4) var(--dp-space-5);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
  cursor: pointer;
  list-style: none;
}

.dp-accordion summary::-webkit-details-marker {
  display: none;
}

.dp-accordion summary:hover {
  background: var(--dp-surface-subtle);
}

.dp-accordion summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dp-blue-300);
}

.dp-accordion-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--dp-text-muted);
  transition: transform var(--dp-transition);
}

.dp-accordion details[open] summary .dp-accordion-icon {
  transform: rotate(180deg);
}

.dp-accordion-content {
  padding: 0 var(--dp-space-5) var(--dp-space-5);
  color: var(--dp-text-muted);
  font-size: var(--dp-text-sm);
}

Dialog

registry:component

Modal dialog panel with a header, body and footer. Wrap it in the modal backdrop, or place it inside a native dialog element.

npx shadcn@latest add https://ds.dataprovider.dev/r/dialog.json Registry JSON 
<!-- Dialog
     .dp-dialog is the panel. Shown here on its own so it renders in place.
     In use, wrap it in <div class="dp-modal"> for the centred backdrop and
     toggle that wrapper from JS, or place this panel inside a native <dialog>
     element and call showModal(). -->

<div class="dp-dialog" role="dialog" aria-modal="true" aria-labelledby="dlg-title">
  <div class="dp-dialog-header">
    <h2 class="dp-dialog-title" id="dlg-title">Delete this query</h2>
    <button class="dp-dialog-close" type="button" aria-label="Close">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
      </svg>
    </button>
  </div>
  <div class="dp-dialog-body">
    This removes the saved query and its schedule. Exported files are not
    affected. This cannot be undone.
  </div>
  <div class="dp-dialog-footer">
    <button class="dp-btn" type="button" data-variant="outline">Cancel</button>
    <button class="dp-btn" type="button" data-variant="danger">Delete query</button>
  </div>
</div>

/* Dialog
   A modal dialog. .dp-dialog is the panel; wrap it in .dp-modal for the
   centred backdrop. Toggle the backdrop's visibility from JS, or use a native
   <dialog> element with this panel inside. Colour, radius and shadow from
   tokens.css. */

.dp-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dp-space-6);
  background: var(--dp-overlay);
}

.dp-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 28rem;
  background: var(--dp-surface);
  border-radius: var(--dp-radius-xl);
  box-shadow: var(--dp-shadow-lg);
  overflow: hidden;
}

.dp-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dp-space-4);
  padding: var(--dp-space-5) var(--dp-space-6);
  border-bottom: 1px solid var(--dp-border);
}

.dp-dialog-title {
  margin: 0;
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-dialog-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--dp-text-muted);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: var(--dp-radius-xs);
}

.dp-dialog-close:hover {
  background: var(--dp-surface-soft);
  color: var(--dp-navy);
}

.dp-dialog-close svg {
  width: 1.25rem;
  height: 1.25rem;
}

.dp-dialog-body {
  padding: var(--dp-space-6);
  color: var(--dp-text-muted);
}

.dp-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--dp-space-3);
  padding: var(--dp-space-4) var(--dp-space-6);
  border-top: 1px solid var(--dp-border);
  background: var(--dp-surface-subtle);
}
Console

Trust grade

registry:component

A letter grade from A to F on a fixed colour scale. Circle by default, large, or a labelled pill.

A B C D E F A A Trust grade
npx shadcn@latest add https://ds.dataprovider.dev/r/grade.json Registry JSON 
<!-- Trust grade
     Set the grade with data-grade (a to f). Circle by default, lg for larger,
     or data-variant="pill" for a labelled pill. Shown under the console theme. -->

<!-- Circles -->
<span class="dp-grade" data-grade="a" aria-label="Grade A">A</span>
<span class="dp-grade" data-grade="b" aria-label="Grade B">B</span>
<span class="dp-grade" data-grade="c" aria-label="Grade C">C</span>
<span class="dp-grade" data-grade="d" aria-label="Grade D">D</span>
<span class="dp-grade" data-grade="e" aria-label="Grade E">E</span>
<span class="dp-grade" data-grade="f" aria-label="Grade F">F</span>

<!-- Large -->
<span class="dp-grade" data-grade="a" data-size="lg" aria-label="Grade A">A</span>

<!-- Pill with label -->
<span class="dp-grade" data-grade="a" data-variant="pill">A Trust grade</span>

/* Trust grade
   A letter grade from A to F, coloured on a fixed scale. Set the grade with
   data-grade (a, b, c, d, e, f). Use the circle by default or data-variant="pill"
   for a labelled pill. Grade colours come from the console theme in tokens.css. */

.dp-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--dp-radius-full);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-extrabold);
  color: var(--dp-white);
  background: var(--dp-grade-c);
  text-transform: uppercase;
}

.dp-grade[data-grade="a"] { background: var(--dp-grade-a); }
.dp-grade[data-grade="b"] { background: var(--dp-grade-b); }
.dp-grade[data-grade="c"] { background: var(--dp-grade-c); color: var(--dp-brand-purple, #2d145f); }
.dp-grade[data-grade="d"] { background: var(--dp-grade-d); }
.dp-grade[data-grade="e"] { background: var(--dp-grade-e); }
.dp-grade[data-grade="f"] { background: var(--dp-grade-f); }

.dp-grade[data-size="lg"] {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--dp-text-lg);
}

/* Pill variant: letter plus a label */
.dp-grade[data-variant="pill"] {
  width: auto;
  height: auto;
  gap: var(--dp-space-2);
  padding: 4px var(--dp-space-3);
  border-radius: var(--dp-radius-full);
  font-size: var(--dp-text-xs);
  font-weight: var(--dp-weight-bold);
}
Marketing

CTA band

registry:component

A call-to-action band with an eyebrow, two-tone heading, a checklist, an avatar group and a gold CTA button.

Book a free demo

And move from guesswork to data-driven decisions

  • A personalised demo, not a sales pitch
  • Completely free, zero obligations
  • 30 to 60 minutes based on your needs
AK RV MB Get your data advantage
npx shadcn@latest add https://ds.dataprovider.dev/r/cta-band.json Registry JSON 
<!-- CTA band
     A call-to-action band. Two-tone heading (bold + light), a checklist, an
     avatar group and the gold CTA button. Marketing theme. -->

<section class="dp-cta-band">
  <div class="dp-cta-lead">
    <p class="dp-cta-eyebrow">Book a free demo</p>
    <h2 class="dp-cta-heading">And move from guesswork <span class="light">to data-driven decisions</span></h2>
  </div>

  <ul class="dp-cta-list">
    <li class="dp-cta-item">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
      A personalised demo, not a sales pitch
    </li>
    <li class="dp-cta-item">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
      Completely free, zero obligations
    </li>
    <li class="dp-cta-item">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
      30 to 60 minutes based on your needs
    </li>
  </ul>

  <div class="dp-cta-action">
    <span class="dp-avatar-group">
      <span class="dp-avatar" data-size="sm" aria-label="Team member">AK</span>
      <span class="dp-avatar" data-size="sm" aria-label="Team member">RV</span>
      <span class="dp-avatar" data-size="sm" aria-label="Team member">MB</span>
    </span>
    <a class="dp-btn" data-variant="cta" href="/contact/">
      Get your data advantage
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>
    </a>
  </div>
</section>

/* CTA band
   A call-to-action band: eyebrow, two-tone heading, a checklist, an avatar
   group and a CTA button. Colour and type from tokens.css (marketing theme). */

.dp-cta-band {
  display: flex;
  align-items: center;
  gap: var(--dp-space-8);
  flex-wrap: wrap;
  padding: var(--dp-space-8) var(--dp-space-10);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
}

.dp-cta-lead {
  flex: 1 1 18rem;
  padding-right: var(--dp-space-8);
  border-right: 1px solid var(--dp-border);
}

.dp-cta-eyebrow {
  margin: 0 0 var(--dp-space-3);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-link);
}

.dp-cta-heading {
  margin: 0;
  font-size: var(--dp-text-3xl);
  line-height: var(--dp-leading-tight);
  color: var(--dp-navy);
  font-weight: var(--dp-weight-bold);
}

.dp-cta-heading .light { font-weight: var(--dp-weight-light); }

.dp-cta-list {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dp-cta-item {
  display: flex;
  align-items: center;
  gap: var(--dp-space-3);
  color: var(--dp-text);
}

.dp-cta-item svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: var(--dp-success);
}

.dp-cta-action {
  display: flex;
  align-items: center;
  gap: var(--dp-space-5);
  margin-left: auto;
}

Hero

registry:component

Marketing hero: a two-tone heading, a subtitle and a tabbed product preview with a floating stat card.

The complete web,
structured in one place

Track companies and technologies across 99% of all registered domains worldwide; every TLD, every ccTLD, refreshed monthly.

Online stores in California
13.217 12.0%
npx shadcn@latest add https://ds.dataprovider.dev/r/hero.json Registry JSON 
<!-- Hero
     Marketing hero: two-tone heading, subtitle and a tabbed product preview.
     The preview stage renders an interactive map at runtime; here it shows a
     heatmap-style backdrop with a floating stat card. Marketing theme. -->

<section class="dp-hero">
  <h1 class="dp-hero-title"><span class="light">The complete web,</span><br>structured in one place</h1>
  <p class="dp-hero-sub">Track companies and technologies across 99% of all registered domains worldwide; every TLD, every ccTLD, refreshed monthly.</p>

  <div class="dp-hero-preview">
    <div class="dp-hero-tabs" role="tablist">
      <button class="dp-hero-tab" type="button">Discover</button>
      <button class="dp-hero-tab" type="button" data-active>Map</button>
      <button class="dp-hero-tab" type="button">Analyze</button>
      <button class="dp-hero-tab" type="button">Automate</button>
    </div>
    <div class="dp-hero-stage">
      <div class="dp-hero-card">
        <div class="dp-hero-card-label">Online stores in California</div>
        <div class="dp-hero-card-row">
          <span class="dp-hero-card-val">13.217</span>
          <span class="dp-hero-card-pct">12.0%</span>
        </div>
      </div>
    </div>
  </div>
</section>

/* Hero
   The marketing hero: a two-tone heading, a subtitle and a tabbed product
   preview. Colour and type from tokens.css (marketing theme). */

.dp-hero {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--dp-space-16) var(--dp-space-6) var(--dp-space-12);
  text-align: center;
}

.dp-hero-title {
  margin: 0 0 var(--dp-space-5);
  font-size: var(--dp-text-5xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-hero-title .light { font-weight: var(--dp-weight-light); }

.dp-hero-sub {
  max-width: 46ch;
  margin: 0 auto var(--dp-space-10);
  font-size: var(--dp-text-xl);
  line-height: var(--dp-leading-snug);
  color: var(--dp-blue-600);
}

.dp-hero-preview {
  max-width: 60rem;
  margin: 0 auto;
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
  background: var(--dp-surface);
  overflow: hidden;
  box-shadow: var(--dp-shadow-lg);
}

.dp-hero-tabs {
  display: flex;
  border-bottom: 1px solid var(--dp-border);
}

.dp-hero-tab {
  flex: 1;
  padding: var(--dp-space-4);
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-text-muted);
  cursor: pointer;
}

.dp-hero-tab:hover { color: var(--dp-navy); }
.dp-hero-tab[data-active] { color: var(--dp-navy); border-bottom-color: var(--dp-blue-700); }

.dp-hero-stage {
  position: relative;
  height: 24rem;
  background: var(--dp-blue-200);
  overflow: hidden;
}

/* Heatmap-style backdrop suggesting the map preview */
.dp-hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 46%, rgba(239, 68, 68, 0.7) 0, rgba(239, 68, 68, 0) 12%),
    radial-gradient(circle at 30% 40%, rgba(250, 204, 21, 0.55) 0, rgba(250, 204, 21, 0) 8%),
    radial-gradient(circle at 55% 42%, rgba(239, 68, 68, 0.75) 0, rgba(239, 68, 68, 0) 15%),
    radial-gradient(circle at 72% 46%, rgba(45, 75, 255, 0.45) 0, rgba(45, 75, 255, 0) 10%),
    radial-gradient(circle at 48% 64%, rgba(239, 68, 68, 0.6) 0, rgba(239, 68, 68, 0) 9%);
  filter: blur(3px);
}

.dp-hero-card {
  position: absolute;
  right: var(--dp-space-6);
  bottom: var(--dp-space-6);
  min-width: 12rem;
  padding: var(--dp-space-4) var(--dp-space-5);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  box-shadow: var(--dp-shadow-md);
  text-align: left;
}

.dp-hero-card-label { font-size: var(--dp-text-sm); font-weight: var(--dp-weight-bold); color: var(--dp-navy); margin-bottom: var(--dp-space-2); }
.dp-hero-card-row { display: flex; align-items: baseline; gap: var(--dp-space-3); }
.dp-hero-card-val { font-size: var(--dp-text-2xl); font-weight: var(--dp-weight-extrabold); color: var(--dp-navy); font-variant-numeric: tabular-nums; }
.dp-hero-card-pct { font-size: var(--dp-text-base); font-weight: var(--dp-weight-bold); color: var(--dp-blue-700); }

Feature cards

registry:component

A marketing section: a centred heading and a grid of cards with an icon, title, description and read-more link.

One dataset, many use cases

Put structured web data to work across your organisation.

Asset management

Keep a live inventory of every domain, subdomain and technology your organisation runs.

Read more

Online brand protection

Detect look-alike domains and infringements before they reach your customers.

Read more

Business information

Enrich company records with technographics, contact data and firmographics.

Read more
npx shadcn@latest add https://ds.dataprovider.dev/r/feature-cards.json Registry JSON 
<!-- Feature cards
     A marketing section: centred heading and a grid of cards (icon, title,
     description, read-more). Marketing theme. -->

<section class="dp-fsection">
  <div class="dp-fsection-head">
    <h2 class="dp-fsection-title">One dataset, many use cases</h2>
    <p class="dp-fsection-sub">Put structured web data to work across your organisation.</p>
  </div>

  <div class="dp-fc-grid">
    <article class="dp-fc">
      <span class="dp-fc-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 7h-9"></path><path d="M14 17H5"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle></svg>
      </span>
      <h3 class="dp-fc-title">Asset management</h3>
      <p class="dp-fc-desc">Keep a live inventory of every domain, subdomain and technology your organisation runs.</p>
      <a class="dp-btn" data-variant="outline" href="/cases/assets/">Read more</a>
    </article>

    <article class="dp-fc">
      <span class="dp-fc-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path></svg>
      </span>
      <h3 class="dp-fc-title">Online brand protection</h3>
      <p class="dp-fc-desc">Detect look-alike domains and infringements before they reach your customers.</p>
      <a class="dp-btn" data-variant="outline" href="/cases/brand-protection/">Read more</a>
    </article>

    <article class="dp-fc">
      <span class="dp-fc-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"></path><rect width="4" height="7" x="7" y="10"></rect><rect width="4" height="12" x="15" y="5"></rect></svg>
      </span>
      <h3 class="dp-fc-title">Business information</h3>
      <p class="dp-fc-desc">Enrich company records with technographics, contact data and firmographics.</p>
      <a class="dp-btn" data-variant="outline" href="/cases/business-information/">Read more</a>
    </article>
  </div>
</section>

/* Feature cards
   A marketing section: a centred heading and a grid of cards with an icon,
   title, description and a read-more link. Colour and type from tokens.css
   (marketing theme). */

.dp-fsection {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
}

.dp-fsection-head {
  max-width: 44rem;
  margin: 0 auto var(--dp-space-8);
  text-align: center;
}

.dp-fsection-title {
  margin: 0 0 var(--dp-space-3);
  font-size: var(--dp-text-3xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-fsection-sub {
  margin: 0;
  font-size: var(--dp-text-lg);
  color: var(--dp-text-muted);
}

.dp-fc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--dp-space-6);
}

.dp-fc {
  display: flex;
  flex-direction: column;
  padding: var(--dp-space-6);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
}

.dp-fc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--dp-space-5);
  border-radius: var(--dp-radius-lg);
  background: var(--dp-blue-200);
  color: var(--dp-blue-700);
}

.dp-fc-icon svg { width: 1.5rem; height: 1.5rem; }

.dp-fc-title {
  margin: 0 0 var(--dp-space-2);
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-fc-desc {
  flex: 1;
  margin: 0 0 var(--dp-space-5);
  font-size: var(--dp-text-base);
  color: var(--dp-text-muted);
}

.dp-fc-more { align-self: flex-start; }

Stats band

registry:component

A row of large headline numbers with labels.

400M+
Domains tracked
99%
Of registered domains covered
Monthly
Full dataset refresh
700+
Data points per domain
npx shadcn@latest add https://ds.dataprovider.dev/r/stats-band.json Registry JSON 
<!-- Stats band
     A row of headline numbers with labels. Marketing theme. -->

<section class="dp-stats-band">
  <div class="dp-stat-big">
    <div class="dp-stat-big-val">400M+</div>
    <div class="dp-stat-big-label">Domains tracked</div>
  </div>
  <div class="dp-stat-big">
    <div class="dp-stat-big-val">99%</div>
    <div class="dp-stat-big-label">Of registered domains covered</div>
  </div>
  <div class="dp-stat-big">
    <div class="dp-stat-big-val">Monthly</div>
    <div class="dp-stat-big-label">Full dataset refresh</div>
  </div>
  <div class="dp-stat-big">
    <div class="dp-stat-big-val">700+</div>
    <div class="dp-stat-big-label">Data points per domain</div>
  </div>
</section>

/* Stats band
   A row of large headline numbers with labels. Colour and type from tokens.css
   (marketing theme). */

.dp-stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--dp-space-8);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
  text-align: center;
}

.dp-stat-big-val {
  font-size: var(--dp-text-4xl);
  font-weight: var(--dp-weight-extrabold);
  line-height: 1;
  color: var(--dp-navy);
  font-variant-numeric: tabular-nums;
}

.dp-stat-big-label {
  margin-top: var(--dp-space-2);
  font-size: var(--dp-text-base);
  color: var(--dp-text-muted);
}

Logo cloud

registry:component

A trusted-by strip: a label above a row of logos.

Trusted by the most data-driven enterprises

Northwind Meridian Kolibri Vantage Everest Lumen
npx shadcn@latest add https://ds.dataprovider.dev/r/logo-cloud.json Registry JSON 
<!-- Logo cloud
     A "trusted by" strip. Replace the placeholder wordmarks with real logo
     assets (inline SVG or img). Marketing theme. -->

<section class="dp-logos">
  <p class="dp-logos-label">Trusted by the most data-driven enterprises</p>
  <div class="dp-logos-row">
    <span class="dp-logo-item">Northwind</span>
    <span class="dp-logo-item">Meridian</span>
    <span class="dp-logo-item">Kolibri</span>
    <span class="dp-logo-item">Vantage</span>
    <span class="dp-logo-item">Everest</span>
    <span class="dp-logo-item">Lumen</span>
  </div>
</section>

/* Logo cloud
   A "trusted by" strip: a label above a row of logos. Placeholder wordmarks
   here; swap in real logo assets. Colour and type from tokens.css. */

.dp-logos {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-10) var(--dp-space-6);
  text-align: center;
}

.dp-logos-label {
  margin-bottom: var(--dp-space-6);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-text-muted);
}

.dp-logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--dp-space-10);
}

.dp-logo-item {
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-extrabold);
  letter-spacing: -0.01em;
  color: var(--dp-neutral-600);
}

Split section

registry:component

A two-column section with text beside a media panel. Add data-reverse to swap sides.

Technology detection

Know the full stack behind every website

Detect the platforms, payment providers, analytics and hosting used across 400M domains, and track how adoption shifts over time.

  • 9,000+ technologies detected
  • Historical adoption trends
  • Refreshed every month
Explore technology data
Shopify detected on 4.1M shops · +2.1% this month
npx shadcn@latest add https://ds.dataprovider.dev/r/split-section.json Registry JSON 
<!-- Split section
     Text beside a media panel. Add data-reverse on .dp-split to swap sides.
     The media panel is a placeholder; drop in a screenshot or illustration.
     Marketing theme. -->

<section class="dp-split">
  <div class="dp-split-body">
    <p class="dp-split-eyebrow">Technology detection</p>
    <h2 class="dp-split-title">Know the full stack behind every website</h2>
    <p class="dp-split-text">Detect the platforms, payment providers, analytics and hosting used across 400M domains, and track how adoption shifts over time.</p>
    <ul class="dp-split-list">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 9,000+ technologies detected</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Historical adoption trends</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Refreshed every month</li>
    </ul>
    <a class="dp-btn" data-variant="primary" href="/our-data/technology/">Explore technology data</a>
  </div>
  <div class="dp-split-media">
    <div class="dp-split-media-card"><b>Shopify</b> detected on 4.1M shops &middot; <b>+2.1%</b> this month</div>
  </div>
</section>

/* Split section
   A two-column section: text on one side, a media panel on the other. Add
   data-reverse to swap sides. Colour and type from tokens.css (marketing). */

.dp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dp-space-10);
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
}

@media (max-width: 760px) { .dp-split { grid-template-columns: 1fr; } }

.dp-split[data-reverse] .dp-split-body { order: 2; }

.dp-split-eyebrow {
  margin: 0 0 var(--dp-space-3);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-link);
}

.dp-split-title {
  margin: 0 0 var(--dp-space-4);
  font-size: var(--dp-text-3xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-split-text {
  margin: 0 0 var(--dp-space-6);
  font-size: var(--dp-text-lg);
  color: var(--dp-text-muted);
}

.dp-split-list {
  margin: 0 0 var(--dp-space-6);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-3);
}

.dp-split-list li {
  display: flex;
  align-items: center;
  gap: var(--dp-space-3);
  color: var(--dp-text);
}

.dp-split-list svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--dp-success); }

.dp-split-media {
  position: relative;
  height: 22rem;
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
  background: var(--dp-blue-100);
  overflow: hidden;
}

.dp-split-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(45, 75, 255, 0.14) 0, rgba(45, 75, 255, 0) 45%),
    radial-gradient(circle at 75% 70%, rgba(255, 199, 1, 0.16) 0, rgba(255, 199, 1, 0) 45%);
}

.dp-split-media-card {
  position: absolute;
  inset: auto var(--dp-space-6) var(--dp-space-6) var(--dp-space-6);
  padding: var(--dp-space-4) var(--dp-space-5);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  box-shadow: var(--dp-shadow-md);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

.dp-split-media-card b { color: var(--dp-navy); }

FAQ

registry:component

A frequently-asked-questions section built on the accordion component.

Frequently asked questions

How often is the data refreshed?
The full dataset is rebuilt on the first of every month, covering every registered domain worldwide.
Which formats can I export?
Export to CSV and JSON on every plan, or connect directly through the API and data warehouse integrations.
Can I access the data through AI tools?
Yes. The MCP server lets Claude, Cursor and ChatGPT query the dataset directly using everyday language.
npx shadcn@latest add https://ds.dataprovider.dev/r/faq.json Registry JSON 
<!-- FAQ
     A frequently-asked-questions section using the accordion component. Native
     details/summary, so it works without JavaScript. Marketing theme. -->

<section class="dp-faq">
  <h2 class="dp-faq-title">Frequently asked questions</h2>
  <div class="dp-accordion">
    <details open>
      <summary>
        How often is the data refreshed?
        <svg class="dp-accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
      </summary>
      <div class="dp-accordion-content">The full dataset is rebuilt on the first of every month, covering every registered domain worldwide.</div>
    </details>
    <details>
      <summary>
        Which formats can I export?
        <svg class="dp-accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
      </summary>
      <div class="dp-accordion-content">Export to CSV and JSON on every plan, or connect directly through the API and data warehouse integrations.</div>
    </details>
    <details>
      <summary>
        Can I access the data through AI tools?
        <svg class="dp-accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
      </summary>
      <div class="dp-accordion-content">Yes. The MCP server lets Claude, Cursor and ChatGPT query the dataset directly using everyday language.</div>
    </details>
  </div>
</section>

/* FAQ
   A frequently-asked-questions section built on the accordion component.
   Colour and type from tokens.css (marketing theme). */

.dp-faq {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
}

.dp-faq-title {
  margin: 0 0 var(--dp-space-8);
  text-align: center;
  font-size: var(--dp-text-3xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

Team

registry:component

A leadership-team grid with member photos, roles, names and LinkedIn links.

Team

Meet our leadership team

Co-founder

Marc Noël

Co-founder

Christian Branbergen

Co-founder

Gijs Barends

Privacy officer

Martin Plak

Legal counsel

Rutger Middendorf

npx shadcn@latest add https://ds.dataprovider.dev/r/team.json Registry JSON 
<!-- Team
     A leadership-team grid: an eyebrow, a heading and a grid of member cards
     with a photo, a role, a name and a LinkedIn link. Swap the placeholder
     photos for real portraits. Marketing theme. -->

<section class="dp-team">
  <p class="dp-team-eyebrow">Team</p>
  <h2 class="dp-team-title">Meet our leadership team</h2>

  <div class="dp-team-grid">
    <article class="dp-team-card">
      <div class="dp-team-photo" data-initials="MN" aria-hidden="true"></div>
      <p class="dp-team-role">Co-founder</p>
      <div class="dp-team-name-row">
        <h3 class="dp-team-name">Marc Noël</h3>
        <a class="dp-team-social" href="https://www.linkedin.com/company/dataprovidercom/" aria-label="Marc Noël on LinkedIn">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"></path></svg>
        </a>
      </div>
    </article>

    <article class="dp-team-card">
      <div class="dp-team-photo" data-initials="CB" aria-hidden="true"></div>
      <p class="dp-team-role">Co-founder</p>
      <div class="dp-team-name-row">
        <h3 class="dp-team-name">Christian Branbergen</h3>
        <a class="dp-team-social" href="https://www.linkedin.com/company/dataprovidercom/" aria-label="Christian Branbergen on LinkedIn">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"></path></svg>
        </a>
      </div>
    </article>

    <article class="dp-team-card">
      <div class="dp-team-photo" data-initials="GB" aria-hidden="true"></div>
      <p class="dp-team-role">Co-founder</p>
      <div class="dp-team-name-row">
        <h3 class="dp-team-name">Gijs Barends</h3>
        <a class="dp-team-social" href="https://www.linkedin.com/company/dataprovidercom/" aria-label="Gijs Barends on LinkedIn">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"></path></svg>
        </a>
      </div>
    </article>

    <article class="dp-team-card">
      <div class="dp-team-photo" data-initials="MP" aria-hidden="true"></div>
      <p class="dp-team-role">Privacy officer</p>
      <div class="dp-team-name-row">
        <h3 class="dp-team-name">Martin Plak</h3>
        <a class="dp-team-social" href="https://www.linkedin.com/company/dataprovidercom/" aria-label="Martin Plak on LinkedIn">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"></path></svg>
        </a>
      </div>
    </article>

    <article class="dp-team-card">
      <div class="dp-team-photo" data-initials="RM" aria-hidden="true"></div>
      <p class="dp-team-role">Legal counsel</p>
      <div class="dp-team-name-row">
        <h3 class="dp-team-name">Rutger Middendorf</h3>
        <a class="dp-team-social" href="https://www.linkedin.com/company/dataprovidercom/" aria-label="Rutger Middendorf on LinkedIn">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"></path></svg>
        </a>
      </div>
    </article>
  </div>
</section>

/* Team
   A leadership-team grid with a heading and member cards. The photo is a
   placeholder that shows the person's initials; replace with a real portrait.
   Colour and type from tokens.css (marketing theme). */

.dp-team {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
}

.dp-team-eyebrow {
  margin: 0 0 var(--dp-space-3);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-link);
}

.dp-team-title {
  margin: 0 0 var(--dp-space-8);
  font-size: var(--dp-text-3xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--dp-space-8) var(--dp-space-6);
}

.dp-team-card {
  display: flex;
  flex-direction: column;
}

.dp-team-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--dp-space-4);
  border-radius: var(--dp-radius-lg);
  background:
    linear-gradient(135deg, var(--dp-blue-200), var(--dp-blue-100));
  overflow: hidden;
}

.dp-team-photo::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--dp-text-3xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-blue-700);
  opacity: 0.55;
}

.dp-team-role {
  margin: 0 0 var(--dp-space-1);
  font-size: var(--dp-text-xs);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-text-muted);
}

.dp-team-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dp-space-3);
}

.dp-team-name {
  margin: 0;
  font-size: var(--dp-text-lg);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-team-social {
  flex: none;
  display: inline-flex;
  color: var(--dp-navy);
  transition: color 0.15s ease;
}

.dp-team-social:hover { color: var(--dp-link); }
.dp-team-social svg { width: 1.15rem; height: 1.15rem; }

Timeline

registry:component

A vertical milestone track with alternating entries and a centre line.

  1. 2012

    Dataprovider.com starts

    After three years of development, Dataprovider.com launches with one mission: make the internet searchable, measurable and explainable.

  2. 2017

    Global monthly coverage

    The platform expands to crawl the entire web, covering hundreds of millions of domains every month.

  3. 2023

    SSL Catalog and warehouse access

    We launch the largest continuously updated SSL dataset and open direct access through Snowflake and Google Cloud.

  4. 2024

    Quad9 Connection Index

    In partnership with Quad9 we introduce the Connection Index, a signal measuring real user engagement across the web.

npx shadcn@latest add https://ds.dataprovider.dev/r/timeline.json Registry JSON 
<!-- Timeline
     A vertical list of milestones with a year, a title and a description.
     Entries alternate sides of a centre line on wide screens and stack into a
     single column on narrow screens. Marketing theme. -->

<section class="dp-timeline">
  <ol class="dp-timeline-track">
    <li class="dp-timeline-item">
      <div class="dp-timeline-marker" aria-hidden="true"></div>
      <div class="dp-timeline-card">
        <p class="dp-timeline-year">2012</p>
        <h3 class="dp-timeline-heading">Dataprovider.com starts</h3>
        <p class="dp-timeline-text">After three years of development, Dataprovider.com launches with one mission: make the internet searchable, measurable and explainable.</p>
      </div>
    </li>
    <li class="dp-timeline-item">
      <div class="dp-timeline-marker" aria-hidden="true"></div>
      <div class="dp-timeline-card">
        <p class="dp-timeline-year">2017</p>
        <h3 class="dp-timeline-heading">Global monthly coverage</h3>
        <p class="dp-timeline-text">The platform expands to crawl the entire web, covering hundreds of millions of domains every month.</p>
      </div>
    </li>
    <li class="dp-timeline-item">
      <div class="dp-timeline-marker" aria-hidden="true"></div>
      <div class="dp-timeline-card">
        <p class="dp-timeline-year">2023</p>
        <h3 class="dp-timeline-heading">SSL Catalog and warehouse access</h3>
        <p class="dp-timeline-text">We launch the largest continuously updated SSL dataset and open direct access through Snowflake and Google Cloud.</p>
      </div>
    </li>
    <li class="dp-timeline-item">
      <div class="dp-timeline-marker" aria-hidden="true"></div>
      <div class="dp-timeline-card">
        <p class="dp-timeline-year">2024</p>
        <h3 class="dp-timeline-heading">Quad9 Connection Index</h3>
        <p class="dp-timeline-text">In partnership with Quad9 we introduce the Connection Index, a signal measuring real user engagement across the web.</p>
      </div>
    </li>
  </ol>
</section>

/* Timeline
   A vertical milestone track. A centre line runs the full height, with a dot
   marking each entry; cards alternate left and right on wide screens and stack
   into one column on narrow screens. Colour and type from tokens.css. */

.dp-timeline {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
}

.dp-timeline-track {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the centre line */
.dp-timeline-track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: var(--dp-border);
}

.dp-timeline-item {
  position: relative;
  width: 50%;
  padding: 0 var(--dp-space-8) var(--dp-space-8);
  box-sizing: border-box;
}

.dp-timeline-item:last-child { padding-bottom: 0; }

/* odd items on the left, even items on the right */
.dp-timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
}

.dp-timeline-item:nth-child(even) {
  left: 50%;
  text-align: left;
}

/* the dot sits on the centre line */
.dp-timeline-marker {
  position: absolute;
  top: 0.35rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--dp-radius-full);
  background: var(--dp-blue-700);
  border: 3px solid var(--dp-bg);
}

.dp-timeline-item:nth-child(odd) .dp-timeline-marker {
  right: calc(var(--dp-space-8) * -1 - 0.425rem);
  transform: translateX(1px);
}

.dp-timeline-item:nth-child(even) .dp-timeline-marker {
  left: calc(var(--dp-space-8) * -1 - 0.425rem);
  transform: translateX(-1px);
}

.dp-timeline-year {
  margin: 0 0 var(--dp-space-1);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-link);
}

.dp-timeline-heading {
  margin: 0 0 var(--dp-space-2);
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-timeline-text {
  margin: 0;
  font-size: var(--dp-text-base);
  color: var(--dp-text-muted);
}

@media (max-width: 720px) {
  .dp-timeline-track::before { left: 0.425rem; }

  .dp-timeline-item,
  .dp-timeline-item:nth-child(odd),
  .dp-timeline-item:nth-child(even) {
    width: 100%;
    left: 0;
    text-align: left;
    padding: 0 0 var(--dp-space-8) var(--dp-space-8);
  }

  .dp-timeline-item:nth-child(odd) .dp-timeline-marker,
  .dp-timeline-item:nth-child(even) .dp-timeline-marker {
    left: 0;
    right: auto;
    transform: none;
  }
}

Statement

registry:component

A two-column editorial section with a large statement and supporting copy.

The web is the world's greatest source of information chaos.

It started in 2009, when Christian Branbergen, Gijs Barends and Marc Noël set out to do what seemed almost impossible: summarise and structure the entire web.

What began as a small team of data enthusiasts has grown into a trusted partner for organisations like PayPal, GoDaddy and MarkMonitor. We collect and structure all our data ourselves, running a powerful hosting cluster in the Netherlands.

npx shadcn@latest add https://ds.dataprovider.dev/r/statement.json Registry JSON 
<!-- Statement
     A two-column editorial section: a large statement on the left and
     supporting copy on the right. Use it for mission, vision or context.
     Marketing theme. -->

<section class="dp-statement">
  <h2 class="dp-statement-lead">The web is the world's greatest source of information chaos.</h2>
  <div class="dp-statement-body">
    <p>It started in 2009, when Christian Branbergen, Gijs Barends and Marc Noël set out to do what seemed almost impossible: summarise and structure the entire web.</p>
    <p>What began as a small team of data enthusiasts has grown into a trusted partner for organisations like PayPal, GoDaddy and MarkMonitor. We collect and structure all our data ourselves, running a powerful hosting cluster in the Netherlands.</p>
  </div>
</section>

/* Statement
   A two-column editorial section. The left column carries a large statement;
   the right column carries supporting paragraphs. Colour and type from
   tokens.css (marketing theme). */

.dp-statement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dp-space-10);
  align-items: start;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
}

@media (max-width: 760px) { .dp-statement { grid-template-columns: 1fr; gap: var(--dp-space-6); } }

.dp-statement-lead {
  margin: 0;
  font-size: var(--dp-text-4xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-statement-body {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-4);
}

.dp-statement-body p {
  margin: 0;
  font-size: var(--dp-text-base);
  line-height: var(--dp-leading-normal);
  color: var(--dp-text-muted);
}

Contact form

registry:component

A demo-request section with an underline-style form and an expectations rail.

Contact

Your competitive edge awaits Book a personalised demo

npx shadcn@latest add https://ds.dataprovider.dev/r/contact-form.json Registry JSON 
<!-- Contact form
     A demo-request section: a centred two-tone heading, a form with
     underline-style fields on the left, and an expectations rail with a
     checklist, an avatar group and office locations on the right. The form
     posts nowhere by default; wire up the action attribute. Marketing theme. -->

<section class="dp-cform">
  <div class="dp-cform-head">
    <p class="dp-cform-eyebrow">Contact</p>
    <h2 class="dp-cform-title">Your competitive edge awaits <span class="light">Book a personalised demo</span></h2>
  </div>

  <div class="dp-cform-panel">
    <form class="dp-cform-form" action="#" method="post">
      <div class="dp-cform-row">
        <div class="dp-field">
          <label class="dp-field-label" for="cf-first">First name</label>
          <input class="dp-field-input" id="cf-first" name="first_name" type="text" autocomplete="given-name">
        </div>
        <div class="dp-field">
          <label class="dp-field-label" for="cf-last">Last name</label>
          <input class="dp-field-input" id="cf-last" name="last_name" type="text" autocomplete="family-name">
        </div>
      </div>

      <div class="dp-field">
        <label class="dp-field-label" for="cf-email">Work email</label>
        <input class="dp-field-input" id="cf-email" name="email" type="email" autocomplete="email">
      </div>

      <div class="dp-field">
        <label class="dp-field-label" for="cf-company">Company or organisation name</label>
        <input class="dp-field-input" id="cf-company" name="company" type="text" autocomplete="organization">
      </div>

      <div class="dp-field">
        <label class="dp-field-label" for="cf-why">Why would you like to try Dataprovider.com?</label>
        <textarea class="dp-field-input" id="cf-why" name="reason" rows="3"></textarea>
      </div>

      <div class="dp-field">
        <label class="dp-field-label" for="cf-source">How did you hear about us?</label>
        <select class="dp-field-input" id="cf-source" name="source">
          <option value="">Please select</option>
          <option value="search">Search engine</option>
          <option value="social">Social media</option>
          <option value="referral">Referral</option>
          <option value="event">Event or conference</option>
          <option value="other">Other</option>
        </select>
      </div>

      <label class="dp-cform-check">
        <input type="checkbox" name="newsletter" value="yes">
        <span>Subscribe to our newsletter.</span>
      </label>

      <button class="dp-btn" data-variant="cta" type="submit">Request a free demo</button>
    </form>

    <aside class="dp-cform-aside">
      <h3 class="dp-cform-aside-title">What can you expect?</h3>
      <ul class="dp-cform-list">
        <li>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
          A personalised demo, not a sales pitch
        </li>
        <li>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
          Completely free, zero obligations
        </li>
        <li>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
          30 to 60 minutes based on your needs
        </li>
      </ul>

      <span class="dp-avatar-group">
        <span class="dp-avatar" data-size="sm" aria-label="Team member">AK</span>
        <span class="dp-avatar" data-size="sm" aria-label="Team member">RV</span>
        <span class="dp-avatar" data-size="sm" aria-label="Team member">MB</span>
      </span>

      <div class="dp-cform-locations">
        <p class="dp-cform-loc-label">Locations</p>
        <div class="dp-cform-loc-grid">
          <address class="dp-cform-loc">
            <span class="dp-cform-loc-name">Operations</span>
            Van Elmptstraat 10<br>
            9723 ZL Groningen<br>
            The Netherlands
          </address>
          <address class="dp-cform-loc">
            <span class="dp-cform-loc-name">International</span>
            Weesperplein 4b<br>
            1018 XA Amsterdam<br>
            The Netherlands
          </address>
        </div>
      </div>
    </aside>
  </div>
</section>

/* Contact form
   A demo-request section with a centred two-tone heading and a two-column
   panel: an underline-style form on the left and an expectations rail on the
   right. Colour and type from tokens.css (marketing theme). */

.dp-cform {
  max-width: 66rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
}

.dp-cform-head {
  margin: 0 auto var(--dp-space-10);
  max-width: 40rem;
  text-align: center;
}

.dp-cform-eyebrow {
  margin: 0 0 var(--dp-space-3);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-link);
}

.dp-cform-title {
  margin: 0;
  font-size: var(--dp-text-4xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-cform-title .light {
  display: block;
  font-weight: var(--dp-weight-light);
}

.dp-cform-panel {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--dp-space-10);
  padding: var(--dp-space-8);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
  box-shadow: var(--dp-shadow-md);
}

@media (max-width: 800px) { .dp-cform-panel { grid-template-columns: 1fr; gap: var(--dp-space-8); } }

/* form */
.dp-cform-form {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-5);
}

.dp-cform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dp-space-5);
}

@media (max-width: 480px) { .dp-cform-row { grid-template-columns: 1fr; } }

/* The underline fields come from the field component. */

.dp-cform-check {
  display: flex;
  align-items: center;
  gap: var(--dp-space-3);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
  cursor: pointer;
}

.dp-cform-check input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--dp-link);
}

.dp-cform-form .dp-btn { align-self: flex-start; }

/* aside */
.dp-cform-aside {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-5);
}

.dp-cform-aside-title {
  margin: 0;
  font-size: var(--dp-text-lg);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-cform-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-3);
}

.dp-cform-list li {
  display: flex;
  align-items: center;
  gap: var(--dp-space-3);
  font-size: var(--dp-text-sm);
  color: var(--dp-text);
}

.dp-cform-list svg { width: 1rem; height: 1rem; flex: none; color: var(--dp-success); }

.dp-cform-locations {
  margin-top: var(--dp-space-2);
  padding-top: var(--dp-space-5);
  border-top: 1px solid var(--dp-border);
}

.dp-cform-loc-label {
  margin: 0 0 var(--dp-space-3);
  font-size: var(--dp-text-xs);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-text-muted);
}

.dp-cform-loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dp-space-4);
}

.dp-cform-loc {
  font-style: normal;
  font-size: var(--dp-text-sm);
  line-height: var(--dp-leading-normal);
  color: var(--dp-text-muted);
}

.dp-cform-loc-name {
  display: block;
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

Newsletter

registry:component

A two-column subscribe section with benefit copy and a name and email capture form.

Newsletter

Subscribe to get monthly web data insights

What can you expect?

  • The latest tech news
  • Exclusive insights from data experts
  • One email a month, no spam
npx shadcn@latest add https://ds.dataprovider.dev/r/newsletter.json Registry JSON 
<!-- Newsletter
     A subscribe section: an eyebrow and two-tone heading with a short benefit
     list on the left, and a name and email capture form on the right. Uses the
     underline field component. The form posts nowhere by default; wire up the
     action attribute. Marketing theme. -->

<section class="dp-newsletter">
  <div class="dp-newsletter-body">
    <p class="dp-newsletter-eyebrow">Newsletter</p>
    <h2 class="dp-newsletter-title">Subscribe to get monthly <span class="light">web data insights</span></h2>
    <p class="dp-newsletter-expect">What can you expect?</p>
    <ul class="dp-newsletter-list">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> The latest tech news</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Exclusive insights from data experts</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> One email a month, no spam</li>
    </ul>
  </div>

  <form class="dp-newsletter-form" action="#" method="post">
    <div class="dp-field">
      <label class="dp-field-label" for="nl-first">First name</label>
      <input class="dp-field-input" id="nl-first" name="first_name" type="text" autocomplete="given-name">
    </div>
    <div class="dp-field">
      <label class="dp-field-label" for="nl-last">Last name</label>
      <input class="dp-field-input" id="nl-last" name="last_name" type="text" autocomplete="family-name">
    </div>
    <div class="dp-field">
      <label class="dp-field-label" for="nl-email">Email</label>
      <input class="dp-field-input" id="nl-email" name="email" type="email" autocomplete="email">
    </div>
    <button class="dp-btn" data-variant="cta" type="submit">Subscribe</button>
  </form>
</section>

/* Newsletter
   A two-column subscribe section: benefit copy on the left, a name and email
   capture form on the right. Underline fields come from the field component.
   Colour and type from tokens.css (marketing theme). */

.dp-newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dp-space-10);
  align-items: start;
  max-width: 66rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
}

@media (max-width: 760px) { .dp-newsletter { grid-template-columns: 1fr; gap: var(--dp-space-8); } }

.dp-newsletter-eyebrow {
  margin: 0 0 var(--dp-space-3);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-link);
}

.dp-newsletter-title {
  margin: 0 0 var(--dp-space-6);
  font-size: var(--dp-text-4xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-newsletter-title .light {
  display: block;
  font-weight: var(--dp-weight-light);
}

.dp-newsletter-expect {
  margin: 0 0 var(--dp-space-4);
  font-size: var(--dp-text-lg);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-newsletter-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-3);
}

.dp-newsletter-list li {
  display: flex;
  align-items: center;
  gap: var(--dp-space-3);
  font-size: var(--dp-text-base);
  color: var(--dp-text);
}

.dp-newsletter-list svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--dp-success); }

.dp-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-5);
}

.dp-newsletter-form .dp-btn { align-self: flex-start; }

Blog grid

registry:component

A responsive grid of horizontal article cards with a cover image, reading time, title, author and date.

Reading the SaaS to AI transition through web data

Mathijs Baas29 days ago

Getting started with the Dataprovider MCP: let AI query 350 million domains for you

Gijs Barends2 months ago

Cloudflare hides the hosting company. We found it anyway.

Christian Branbergen3 months ago

Hidden prompts in HTML: the invisible threat exploiting AI browsers

Lucia Baldassini6 months ago

How we talk to a billion records with our AI Navigator

Tim Kreutz7 months ago

Websites per capita: how many websites does each EU country have per 1,000 inhabitants?

Gijs Barends8 months ago
npx shadcn@latest add https://ds.dataprovider.dev/r/blog-grid.json Registry JSON 
<!-- Blog grid
     A grid of article cards. Each card is a horizontal layout: a cover image
     with a reading-time chip on the left and the title, author and date on the
     right. Swap the placeholder covers for real images. Marketing theme. -->

<section class="dp-blog-grid">
  <a class="dp-blog-card" href="/blog/saas-to-ai-transition/">
    <div class="dp-blog-card-media" data-tint="a" aria-hidden="true"><span class="dp-blog-card-time">6 min</span></div>
    <div class="dp-blog-card-body">
      <h3 class="dp-blog-card-title">Reading the SaaS to AI transition through web data</h3>
      <p class="dp-blog-card-meta"><span class="dp-blog-card-author">Mathijs Baas</span><span class="dp-blog-card-date">29 days ago</span></p>
    </div>
  </a>

  <a class="dp-blog-card" href="/blog/getting-started-mcp/">
    <div class="dp-blog-card-media" data-tint="b" aria-hidden="true"><span class="dp-blog-card-time">5 min</span></div>
    <div class="dp-blog-card-body">
      <h3 class="dp-blog-card-title">Getting started with the Dataprovider MCP: let AI query 350 million domains for you</h3>
      <p class="dp-blog-card-meta"><span class="dp-blog-card-author">Gijs Barends</span><span class="dp-blog-card-date">2 months ago</span></p>
    </div>
  </a>

  <a class="dp-blog-card" href="/blog/cloudflare-hosting/">
    <div class="dp-blog-card-media" data-tint="c" aria-hidden="true"><span class="dp-blog-card-time">6 min</span></div>
    <div class="dp-blog-card-body">
      <h3 class="dp-blog-card-title">Cloudflare hides the hosting company. We found it anyway.</h3>
      <p class="dp-blog-card-meta"><span class="dp-blog-card-author">Christian Branbergen</span><span class="dp-blog-card-date">3 months ago</span></p>
    </div>
  </a>

  <a class="dp-blog-card" href="/blog/hidden-prompts-html/">
    <div class="dp-blog-card-media" data-tint="d" aria-hidden="true"><span class="dp-blog-card-time">5 min</span></div>
    <div class="dp-blog-card-body">
      <h3 class="dp-blog-card-title">Hidden prompts in HTML: the invisible threat exploiting AI browsers</h3>
      <p class="dp-blog-card-meta"><span class="dp-blog-card-author">Lucia Baldassini</span><span class="dp-blog-card-date">6 months ago</span></p>
    </div>
  </a>

  <a class="dp-blog-card" href="/blog/billion-records-ai-navigator/">
    <div class="dp-blog-card-media" data-tint="e" aria-hidden="true"><span class="dp-blog-card-time">5 min</span></div>
    <div class="dp-blog-card-body">
      <h3 class="dp-blog-card-title">How we talk to a billion records with our AI Navigator</h3>
      <p class="dp-blog-card-meta"><span class="dp-blog-card-author">Tim Kreutz</span><span class="dp-blog-card-date">7 months ago</span></p>
    </div>
  </a>

  <a class="dp-blog-card" href="/blog/websites-per-capita/">
    <div class="dp-blog-card-media" data-tint="a" aria-hidden="true"><span class="dp-blog-card-time">5 min</span></div>
    <div class="dp-blog-card-body">
      <h3 class="dp-blog-card-title">Websites per capita: how many websites does each EU country have per 1,000 inhabitants?</h3>
      <p class="dp-blog-card-meta"><span class="dp-blog-card-author">Gijs Barends</span><span class="dp-blog-card-date">8 months ago</span></p>
    </div>
  </a>
</section>

/* Blog grid
   A responsive grid of horizontal article cards: a cover image with a
   reading-time chip beside the title, author and date. Colour and type from
   tokens.css (marketing theme). */

.dp-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: var(--dp-space-6);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
}

.dp-blog-card {
  display: grid;
  grid-template-columns: 40% 1fr;
  overflow: hidden;
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dp-blog-card:hover {
  border-color: var(--dp-border-strong);
  box-shadow: var(--dp-shadow-md);
  transform: translateY(-2px);
}

@media (max-width: 520px) { .dp-blog-card { grid-template-columns: 1fr; } }

.dp-blog-card-media {
  position: relative;
  min-height: 10rem;
  background: linear-gradient(135deg, var(--dp-blue-200), var(--dp-blue-100));
}

.dp-blog-card-media[data-tint="b"] { background: linear-gradient(135deg, var(--dp-navy), var(--dp-blue-700)); }
.dp-blog-card-media[data-tint="c"] { background: linear-gradient(135deg, var(--dp-navy), #0b1236); }
.dp-blog-card-media[data-tint="d"] { background: linear-gradient(135deg, #0b1236, var(--dp-blue-700)); }
.dp-blog-card-media[data-tint="e"] { background: linear-gradient(135deg, var(--dp-gold-300), var(--dp-blue-200)); }

@media (max-width: 520px) { .dp-blog-card-media { min-height: 9rem; } }

.dp-blog-card-time {
  position: absolute;
  left: var(--dp-space-3);
  bottom: var(--dp-space-3);
  display: inline-flex;
  align-items: center;
  padding: var(--dp-space-1) var(--dp-space-2);
  font-size: var(--dp-text-xs);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-text);
  background: var(--dp-surface);
  border-radius: var(--dp-radius-full);
  box-shadow: var(--dp-shadow-sm);
}

.dp-blog-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--dp-space-6);
  padding: var(--dp-space-5);
}

.dp-blog-card-title {
  margin: 0;
  font-size: var(--dp-text-lg);
  line-height: var(--dp-leading-snug);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-blog-card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-1);
  margin: 0;
}

.dp-blog-card-author {
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-blog-card-date {
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}
Blocks

Login screen

registry:block

A centred sign-in card with an email field, a primary action, a separator and social sign-in buttons.

npx shadcn@latest add https://ds.dataprovider.dev/r/login.json Registry JSON 
<!-- Login block
     A sign-in screen composed from input, button and separator, under the
     console theme. Replace the wordmark with the real logo asset in use. -->

<div class="dp-block-login">
  <div class="dp-login-card">
    <div class="dp-login-logo">Dataprovider.com</div>

    <div class="dp-field">
      <label class="dp-label" for="login-email">Email address</label>
      <input class="dp-input" id="login-email" type="email" placeholder="you@company.com" />
    </div>

    <button class="dp-btn" type="button" data-variant="primary">Continue</button>

    <div class="dp-separator-labelled dp-login-sep">OR</div>

    <div class="dp-login-social">
      <button class="dp-btn" type="button" data-variant="outline">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path fill="#4285F4" d="M21.6 12.2c0-.6-.1-1.2-.2-1.8H12v3.4h5.4a4.6 4.6 0 0 1-2 3v2.5h3.2c1.9-1.7 3-4.3 3-7.1"/>
          <path fill="#34A853" d="M12 22c2.7 0 5-1 6.6-2.7l-3.2-2.5c-.9.6-2 1-3.4 1-2.6 0-4.8-1.7-5.6-4.1H3.1v2.6A10 10 0 0 0 12 22"/>
          <path fill="#FBBC05" d="M6.4 13.7a6 6 0 0 1 0-3.8V7.3H3.1a10 10 0 0 0 0 9z"/>
          <path fill="#EA4335" d="M12 5.9c1.5 0 2.8.5 3.8 1.5l2.8-2.8A10 10 0 0 0 3.1 7.3l3.3 2.6C7.2 7.5 9.4 5.9 12 5.9"/>
        </svg>
        Continue with Google
      </button>
      <button class="dp-btn" type="button" data-variant="outline">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <rect width="24" height="24" rx="3" fill="#0a66c2"/>
          <path fill="#fff" d="M7 9.5H4.6V19H7zM5.8 8.2A1.4 1.4 0 1 0 5.8 5.4a1.4 1.4 0 0 0 0 2.8M19.4 19H17v-4.6c0-1.1-.4-1.9-1.4-1.9-.8 0-1.2.5-1.4 1-.1.2-.1.5-.1.8V19h-2.4s.03-8 0-8.8h2.4v1.2c.3-.5.9-1.2 2.2-1.2 1.6 0 2.8 1 2.8 3.3z"/>
        </svg>
        Continue with LinkedIn
      </button>
      <button class="dp-btn" type="button" data-variant="outline">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <rect x="2" y="2" width="9" height="9" fill="#f25022"/>
          <rect x="13" y="2" width="9" height="9" fill="#7fba00"/>
          <rect x="2" y="13" width="9" height="9" fill="#00a4ef"/>
          <rect x="13" y="13" width="9" height="9" fill="#ffb900"/>
        </svg>
        Continue with Microsoft Account
      </button>
    </div>
  </div>
</div>

/* Login block
   A centred sign-in card composed from the input, button and separator
   components. Shown under the console theme. */

.dp-block-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--dp-space-12) var(--dp-space-6);
  background: var(--dp-bg);
}

.dp-login-card {
  width: 100%;
  max-width: 25rem;
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
  box-shadow: var(--dp-shadow-lg);
  padding: var(--dp-space-10) var(--dp-space-8);
}

.dp-login-logo {
  margin: 0 0 var(--dp-space-8);
  text-align: center;
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-extrabold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dp-brand-purple, var(--dp-navy));
}

.dp-login-card .dp-field {
  margin-bottom: var(--dp-space-4);
}

.dp-login-card > .dp-btn {
  width: 100%;
}

.dp-login-sep {
  margin: var(--dp-space-5) 0;
}

.dp-login-social {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-3);
}

.dp-login-social .dp-btn {
  width: 100%;
  justify-content: flex-start;
  gap: var(--dp-space-3);
  font-weight: var(--dp-weight-semibold);
}

.dp-login-social .dp-btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

Dashboard

registry:block

The app home: sidebar, a welcome heading, feature cards and an AI prompt with suggestions.

Welcome back, Christian Branbergen

Search through (y)our data

Search Engine

Choose relevant filters and build your dataset.

Dashboards

Personalised data, presented in interactive dashboards.

Know Your Business

Get tailored insights from the websites of your clients.

Ask AI Navigator Beta

Powerful does not have to mean complicated. Get expert web analysis through everyday language.

npx shadcn@latest add https://ds.dataprovider.dev/r/dashboard.json Registry JSON 
<!-- Dashboard block
     The app home screen: sidebar plus welcome, feature cards and an AI prompt.
     Composed from sidebar, card, input and badge under the console theme. -->

<div class="dp-shell">
  <nav class="dp-sidebar">
    <div class="dp-sidebar-head">
      <span class="dp-sidebar-logo">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </span>
      <button class="dp-sidebar-collapse" type="button" aria-label="Collapse sidebar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m11 17-5-5 5-5"></path><path d="m18 17-5-5 5-5"></path></svg>
      </button>
    </div>
    <div class="dp-sidebar-nav">
      <a class="dp-nav-item" data-active href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><path d="M9 22V12h6v10"></path></svg>
        Home
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m16 8-6 2-2 6 6-2z"></path></svg>
        AI Navigator <span class="dp-nav-beta">Beta</span>
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path></svg>
        Monitoring <span class="dp-nav-beta">Beta</span>
      </a>
      <div class="dp-nav-group">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
        Library
      </div>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg>
        Files
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 9h6v6H9z"></path></svg>
        Dashboards
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg>
        Recipes
      </a>
      <div class="dp-nav-group">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
        Products
      </div>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path></svg>
        Search Engine
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path><path d="M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20"></path></svg>
        Reverse DNS
      </a>
    </div>
    <div class="dp-sidebar-foot">
      <span class="dp-avatar" data-size="sm" style="background: var(--dp-accent-yellow, #ffd200); color: var(--dp-brand-purple, #2d145f);">CB</span>
      <span class="dp-sidebar-user">
        <span class="dp-sidebar-user-name">Christian Branbergen</span>
        <span class="dp-sidebar-user-org">Dataprovider BV</span>
      </span>
      <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Log out</button>
    </div>
  </nav>

  <main class="dp-shell-main">
    <h1 class="dp-welcome">Welcome back, Christian Branbergen</h1>

    <p class="dp-dash-label">Search through (y)our data</p>
    <div class="dp-feature-grid">
      <article class="dp-feature">
        <span class="dp-feature-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path></svg>
        </span>
        <h3 class="dp-feature-title">Search Engine</h3>
        <p class="dp-feature-desc">Choose relevant filters and build your dataset.</p>
      </article>
      <article class="dp-feature">
        <span class="dp-feature-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v4"></path><path d="M5 10a7 7 0 0 1 14 0v6H5z"></path><path d="M3 16h18"></path></svg>
        </span>
        <h3 class="dp-feature-title">Dashboards</h3>
        <p class="dp-feature-desc">Personalised data, presented in interactive dashboards.</p>
      </article>
      <article class="dp-feature">
        <span class="dp-feature-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7"></path><circle cx="12" cy="12" r="3"></circle></svg>
        </span>
        <h3 class="dp-feature-title">Know Your Business</h3>
        <p class="dp-feature-desc">Get tailored insights from the websites of your clients.</p>
      </article>
    </div>

    <section class="dp-ai-card">
      <div class="dp-ai-head">
        <span class="dp-ai-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v4"></path><path d="m5 7 2 2"></path><path d="M3 14h3"></path><path d="M9 21h6"></path><path d="M19 7l-2 2"></path><path d="M21 14h-3"></path><path d="M12 11v10"></path></svg>
        </span>
        <div>
          <div class="dp-ai-title">Ask AI Navigator <span class="dp-nav-beta">Beta</span></div>
          <p class="dp-ai-desc">Powerful does not have to mean complicated. Get expert web analysis through everyday language.</p>
        </div>
      </div>
      <input class="dp-input" type="text" placeholder="Ask me anything..." />
      <div class="dp-ai-suggestions">
        <button class="dp-suggest" type="button">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg>
          How many websites use Shopify as a shopping cart system in North America?
        </button>
        <button class="dp-suggest" type="button">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg>
          How many websites use Stripe as a payment service provider in Europe?
        </button>
        <button class="dp-suggest" type="button">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg>
          Can you make me a list with all hosting companies in Germany?
        </button>
      </div>
    </section>
  </main>
</div>

/* Dashboard block
   The app home: sidebar plus a welcome, feature cards and an AI prompt.
   Composed from sidebar, card, input and badge under the console theme. */

.dp-welcome {
  margin: 0 0 var(--dp-space-8);
  font-size: var(--dp-text-4xl);
  font-weight: var(--dp-weight-extrabold);
  color: var(--dp-navy);
  line-height: var(--dp-leading-tight);
}

.dp-dash-label {
  margin: 0 0 var(--dp-space-4);
  font-size: var(--dp-text-base);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--dp-space-5);
}

.dp-feature {
  display: flex;
  flex-direction: column;
  padding: var(--dp-space-6);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
}

.dp-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--dp-space-5);
  border-radius: var(--dp-radius-full);
  background: var(--dp-surface-soft);
  color: var(--dp-link);
}

.dp-feature-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.dp-feature-title {
  margin: 0 0 var(--dp-space-2);
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-feature-desc {
  margin: 0;
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

.dp-ai-card {
  margin-top: var(--dp-space-8);
  padding: var(--dp-space-6);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border-strong);
  border-radius: var(--dp-radius-xl);
}

.dp-ai-head {
  display: flex;
  align-items: center;
  gap: var(--dp-space-4);
  margin-bottom: var(--dp-space-5);
}

.dp-ai-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--dp-radius-full);
  background: var(--dp-surface-soft);
  color: var(--dp-link);
}

.dp-ai-title {
  display: flex;
  align-items: center;
  gap: var(--dp-space-2);
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-ai-desc {
  margin: 2px 0 0;
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

.dp-ai-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--dp-space-3);
  margin-top: var(--dp-space-4);
}

.dp-suggest {
  display: flex;
  align-items: flex-start;
  gap: var(--dp-space-2);
  padding: var(--dp-space-3) var(--dp-space-4);
  background: var(--dp-surface-subtle);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-md);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
  text-align: left;
  cursor: pointer;
}

.dp-suggest:hover {
  border-color: var(--dp-border-strong);
}

.dp-suggest svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 1px;
  color: var(--dp-link);
}

Files

registry:block

A data screen: sidebar, a hero panel, a search and sort toolbar, a data table and pagination.

Files

All your data in one place

Access all your data from across our products. You can personalise your archive by creating folders and reorganising the structure to fit your needs.

Need to recover a deleted file? View Trash

All files (1486)
Create folder
Name Records Date created
Dataprovider BV (7) -- --
Exports (474) -- --
Sent to me (66) -- --
Migration insights (1) -- --
Important data sets (1) -- May 7, 2025, 11:05
KYC Markmonitor Dashboards (3) -- Apr 9, 2024, 17:17
Upsell and new customer ideas (12) -- --
Research (5) -- Sep 27, 2021, 12:22
ZoomInfo enrichment Search Engine 43.67M Jun 11, 2026, 13:43
Migration insights Hosting company is OVH Search Engine 6.57M Jun 4, 2026, 08:28
npx shadcn@latest add https://ds.dataprovider.dev/r/files.json Registry JSON 
<!-- Files block
     A data screen: sidebar plus a hero panel, a toolbar and a data table.
     Composed from sidebar, input, button, table and pagination under the
     console theme. -->

<div class="dp-shell">
  <nav class="dp-sidebar">
    <div class="dp-sidebar-head">
      <span class="dp-sidebar-logo">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </span>
      <button class="dp-sidebar-collapse" type="button" aria-label="Collapse sidebar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m11 17-5-5 5-5"></path><path d="m18 17-5-5 5-5"></path></svg>
      </button>
    </div>
    <div class="dp-sidebar-nav">
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><path d="M9 22V12h6v10"></path></svg>
        Home
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m16 8-6 2-2 6 6-2z"></path></svg>
        AI Navigator <span class="dp-nav-beta">Beta</span>
      </a>
      <div class="dp-nav-group">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
        Library
      </div>
      <a class="dp-nav-item" data-active href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg>
        Files
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 9h6v6H9z"></path></svg>
        Dashboards
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg>
        Recipes
      </a>
      <div class="dp-nav-group">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
        Products
      </div>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path></svg>
        Search Engine
      </a>
    </div>
    <div class="dp-sidebar-foot">
      <span class="dp-avatar" data-size="sm" style="background: var(--dp-accent-yellow, #ffd200); color: var(--dp-brand-purple, #2d145f);">CB</span>
      <span class="dp-sidebar-user">
        <span class="dp-sidebar-user-name">Christian Branbergen</span>
        <span class="dp-sidebar-user-org">Dataprovider BV</span>
      </span>
      <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Log out</button>
    </div>
  </nav>

  <main class="dp-shell-main">
    <div class="dp-files-hero">
      <div class="dp-files-eyebrow">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg>
        Files
      </div>
      <h1 class="dp-files-title">All your data in one place</h1>
      <p class="dp-files-desc">Access all your data from across our products. You can personalise your archive by creating folders and reorganising the structure to fit your needs.</p>
      <button class="dp-btn" type="button" data-variant="primary">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M12 10v6"></path><path d="M9 13h6"></path></svg>
        Create folder
      </button>
      <p class="dp-files-trash">Need to recover a deleted file? <a href="#">View Trash</a></p>
    </div>

    <div class="dp-files-toolbar-head">
      <div class="dp-files-count">All files <span>(1486)</span></div>
      <a class="dp-files-create" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M12 10v6"></path><path d="M9 13h6"></path></svg>
        Create folder
      </a>
    </div>

    <div class="dp-files-toolbar">
      <div class="dp-input-group">
        <svg class="dp-input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path></svg>
        <input class="dp-input" type="search" placeholder="Search files" />
      </div>
      <button class="dp-btn" type="button" data-variant="outline">
        Sort: Date created
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
      </button>
    </div>

    <table class="dp-files-list">
      <thead>
        <tr>
          <th style="width: 1%;"><input class="dp-checkbox" type="checkbox" aria-label="Select all" /></th>
          <th class="dp-col-name">Name</th>
          <th data-align="end">Records</th>
          <th>
            <span class="dp-sort">Date created
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"></path></svg>
            </span>
          </th>
          <th style="width: 1%;"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input class="dp-checkbox" type="checkbox" aria-label="Select row" /></td>
          <td>
            <span class="dp-files-folder">
              <span class="dp-file-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path><path d="M10 6h4M10 10h4M10 14h4M10 18h4"></path></svg>
              </span>
              <b>Dataprovider BV</b> <span class="dp-files-count">(7)</span>
            </span>
          </td>
          <td data-align="end">--</td>
          <td>--</td>
          <td><button class="dp-icon-btn" type="button" aria-label="More actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="12" cy="19" r="1.6"></circle></svg></button></td>
        </tr>
        <tr>
          <td><input class="dp-checkbox" type="checkbox" aria-label="Select row" /></td>
          <td>
            <span class="dp-files-folder">
              <span class="dp-file-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"></path><path d="M14 2v5h5"></path><path d="M12 18v-6"></path><path d="m9 15 3 3 3-3"></path></svg>
              </span>
              <b>Exports</b> <span class="dp-files-count">(474)</span>
            </span>
          </td>
          <td data-align="end">--</td>
          <td>--</td>
          <td><button class="dp-icon-btn" type="button" aria-label="More actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="12" cy="19" r="1.6"></circle></svg></button></td>
        </tr>
        <tr>
          <td><input class="dp-checkbox" type="checkbox" aria-label="Select row" /></td>
          <td>
            <span class="dp-files-folder">
              <span class="dp-file-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 3 4 4-4 4"></path><path d="M20 7H4"></path><path d="m8 21-4-4 4-4"></path><path d="M4 17h16"></path></svg>
              </span>
              <b>Sent to me</b> <span class="dp-files-count">(66)</span>
            </span>
          </td>
          <td data-align="end">--</td>
          <td>--</td>
          <td><button class="dp-icon-btn" type="button" aria-label="More actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="12" cy="19" r="1.6"></circle></svg></button></td>
        </tr>
        <tr>
          <td><input class="dp-checkbox" type="checkbox" aria-label="Select row" /></td>
          <td>
            <span class="dp-files-folder">
              <span class="dp-file-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M6 9v6a9 9 0 0 0 9 9"></path></svg>
              </span>
              <b>Migration insights</b> <span class="dp-files-count">(1)</span>
            </span>
          </td>
          <td data-align="end">--</td>
          <td>--</td>
          <td><button class="dp-icon-btn" type="button" aria-label="More actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="12" cy="19" r="1.6"></circle></svg></button></td>
        </tr>
        <tr>
          <td><input class="dp-checkbox" type="checkbox" aria-label="Select row" /></td>
          <td>
            <span class="dp-files-folder">
              <svg class="dp-file-folder" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 6a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z"></path></svg>
              <b>Important data sets</b> <span class="dp-files-count">(1)</span>
            </span>
          </td>
          <td data-align="end">--</td>
          <td>May 7, 2025, 11:05</td>
          <td>
            <div class="dp-menu" data-open>
              <button class="dp-icon-btn" type="button" aria-label="More actions" aria-haspopup="true" aria-expanded="true"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="12" cy="19" r="1.6"></circle></svg></button>
              <ul class="dp-menu-list" role="menu">
                <li role="none"><a class="dp-menu-item" role="menuitem" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 14 5-5-5-5"></path><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg> Move</a></li>
                <li role="none"><button class="dp-menu-item" role="menuitem" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path><path d="M10 6h4M10 10h4M10 14h4M10 18h4"></path></svg> Move to company</button></li>
                <li role="none"><a class="dp-menu-item" role="menuitem" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"></path></svg> Rename</a></li>
                <li role="none"><button class="dp-menu-item" role="menuitem" type="button" data-tone="danger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg> Trash</button></li>
              </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td><input class="dp-checkbox" type="checkbox" aria-label="Select row" /></td>
          <td>
            <span class="dp-files-folder">
              <svg class="dp-file-folder" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 6a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z"></path></svg>
              <b>KYC Markmonitor Dashboards</b> <span class="dp-files-count">(3)</span>
            </span>
          </td>
          <td data-align="end">--</td>
          <td>Apr 9, 2024, 17:17</td>
          <td><button class="dp-icon-btn" type="button" aria-label="More actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="12" cy="19" r="1.6"></circle></svg></button></td>
        </tr>
        <tr>
          <td><input class="dp-checkbox" type="checkbox" aria-label="Select row" /></td>
          <td>
            <span class="dp-files-folder">
              <svg class="dp-file-folder" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 6a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z"></path></svg>
              <b>Upsell and new customer ideas</b> <span class="dp-files-count">(12)</span>
            </span>
          </td>
          <td data-align="end">--</td>
          <td>--</td>
          <td><button class="dp-icon-btn" type="button" aria-label="More actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="12" cy="19" r="1.6"></circle></svg></button></td>
        </tr>
        <tr>
          <td><input class="dp-checkbox" type="checkbox" aria-label="Select row" /></td>
          <td>
            <span class="dp-files-folder">
              <svg class="dp-file-folder" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 6a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z"></path></svg>
              <b>Research</b> <span class="dp-files-count">(5)</span>
            </span>
          </td>
          <td data-align="end">--</td>
          <td>Sep 27, 2021, 12:22</td>
          <td><button class="dp-icon-btn" type="button" aria-label="More actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="12" cy="19" r="1.6"></circle></svg></button></td>
        </tr>
        <tr>
          <td><input class="dp-checkbox" type="checkbox" aria-label="Select row" /></td>
          <td>
            <span class="dp-files-folder">
              <svg class="dp-file-doc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"></path><path d="M14 2v5h5"></path><circle cx="9.5" cy="14.5" r="2.5"></circle><path d="m13 18-1.8-1.8"></path></svg>
              <span class="dp-files-filetext">
                <b>ZoomInfo enrichment</b>
                <span class="dp-files-sub">Search Engine</span>
              </span>
            </span>
          </td>
          <td data-align="end">43.67M</td>
          <td>Jun 11, 2026, 13:43</td>
          <td><button class="dp-icon-btn" type="button" aria-label="More actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="12" cy="19" r="1.6"></circle></svg></button></td>
        </tr>
        <tr>
          <td><input class="dp-checkbox" type="checkbox" aria-label="Select row" /></td>
          <td>
            <span class="dp-files-folder">
              <svg class="dp-file-doc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"></path><path d="M14 2v5h5"></path><circle cx="9.5" cy="14.5" r="2.5"></circle><path d="m13 18-1.8-1.8"></path></svg>
              <span class="dp-files-filetext">
                <b>Migration insights Hosting company is OVH</b>
                <span class="dp-files-sub">Search Engine</span>
              </span>
            </span>
          </td>
          <td data-align="end">6.57M</td>
          <td>Jun 4, 2026, 08:28</td>
          <td><button class="dp-icon-btn" type="button" aria-label="More actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="12" cy="19" r="1.6"></circle></svg></button></td>
        </tr>
      </tbody>
    </table>

    <div class="dp-files-pagination">
      <nav class="dp-pagination" aria-label="Pagination">
        <button class="dp-page" type="button" disabled aria-label="Previous page">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg>
        </button>
        <a class="dp-page" href="#" aria-current="page">1</a>
        <a class="dp-page" href="#">2</a>
        <a class="dp-page" href="#">3</a>
        <span class="dp-page-ellipsis" aria-hidden="true">&hellip;</span>
        <a class="dp-page" href="#">60</a>
        <button class="dp-page" type="button" aria-label="Next page">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>
        </button>
      </nav>
    </div>
  </main>
</div>

/* Files block
   A data screen: sidebar plus a hero panel, a toolbar and a data table.
   Composed from sidebar, input, button, table and pagination under the console
   theme. */

.dp-files-hero {
  margin-bottom: var(--dp-space-8);
  padding: var(--dp-space-10);
  text-align: center;
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
}

.dp-files-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-2);
  margin-bottom: var(--dp-space-3);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

.dp-files-eyebrow svg {
  width: 1.1rem;
  height: 1.1rem;
}

.dp-files-title {
  margin: 0 0 var(--dp-space-3);
  font-size: var(--dp-text-3xl);
  font-weight: var(--dp-weight-extrabold);
  color: var(--dp-navy);
}

.dp-files-desc {
  max-width: 48ch;
  margin: 0 auto var(--dp-space-6);
  color: var(--dp-text-muted);
}

.dp-files-trash {
  margin: var(--dp-space-4) 0 0;
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

.dp-files-trash a {
  color: var(--dp-link);
  font-weight: var(--dp-weight-semibold);
}

.dp-files-toolbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dp-space-4);
  margin-bottom: var(--dp-space-4);
}

.dp-files-count {
  font-size: var(--dp-text-lg);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-files-count span {
  color: var(--dp-text-muted);
  font-weight: var(--dp-weight-regular);
}

.dp-files-create {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-2);
  color: var(--dp-link);
  font-weight: var(--dp-weight-semibold);
  font-size: var(--dp-text-sm);
  text-decoration: none;
}

.dp-files-create svg {
  width: 1.1rem;
  height: 1.1rem;
}

.dp-files-toolbar {
  display: flex;
  gap: var(--dp-space-3);
  margin-bottom: var(--dp-space-4);
}

.dp-files-toolbar .dp-input-group {
  flex: 1;
}

/* Flat data list, like the console Files table (no outer card) */
.dp-files-list {
  width: 100%;
  border-collapse: collapse;
}

.dp-files-list thead th {
  text-align: left;
  padding: var(--dp-space-3) var(--dp-space-4);
  font-size: var(--dp-text-base);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
  border-bottom: 1px solid var(--dp-border);
  white-space: nowrap;
}

/* Name column takes the remaining width, pushing the rest to the right */
.dp-files-list thead th.dp-col-name {
  width: 100%;
}

.dp-files-list .dp-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dp-files-list .dp-sort svg {
  width: 0.9rem;
  height: 0.9rem;
}

.dp-files-list tbody td {
  padding: var(--dp-space-4);
  border-bottom: 1px solid var(--dp-border);
  font-size: var(--dp-text-base);
  color: var(--dp-text-muted);
  vertical-align: middle;
  white-space: nowrap;
}

.dp-files-list tbody tr:hover {
  background: var(--dp-surface-subtle);
}

.dp-files-folder {
  display: flex;
  align-items: center;
  gap: var(--dp-space-4);
}

.dp-files-folder b {
  color: var(--dp-navy);
  font-weight: var(--dp-weight-bold);
  font-size: var(--dp-text-base);
}

.dp-files-folder .dp-files-count {
  color: var(--dp-text-muted);
}

/* System folder: icon in a grey rounded chip */
.dp-file-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--dp-radius-sm);
  background: var(--dp-neutral-300);
  color: var(--dp-neutral-600);
}

.dp-file-chip svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* User folder: filled periwinkle folder */
.dp-file-folder {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  color: #8b93f0;
}

/* File: document with a search badge */
.dp-file-doc {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  color: var(--dp-text-subtle);
}

/* Stacked name + source subtitle for dataset files */
.dp-files-filetext {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.dp-files-sub {
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-regular);
  color: var(--dp-text-muted);
}

/* Right-aligned numeric column */
.dp-files-list th[data-align="end"],
.dp-files-list td[data-align="end"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The row action menu opens from the right edge */
.dp-files-list .dp-menu-list {
  right: 0;
  left: auto;
}

/* Kebab action button: a bordered square */
.dp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-sm);
  background: var(--dp-surface);
  color: var(--dp-text-muted);
  cursor: pointer;
}

.dp-icon-btn:hover {
  background: var(--dp-surface-soft);
  color: var(--dp-navy);
}

.dp-icon-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.dp-files-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--dp-space-5);
}

Dataset workspace

registry:block

The shared product workspace used by Search Engine, Reverse DNS, SSL Catalog, Universe and Traffic: a toolbar, a filter builder, view tabs, a data sheet and a record toolbar.

Untitled dataset
Search Engine Monitor Send
Filters 416,128,812 Records
Hostname
1www.virginiemahe.fr
2www.cavallin.ch
39ofanessence.co.uk
4www.nudecakes.co.uk
5yasminstore.it
6www.charlesjacobs.co.uk
7barista-corner.ch
8www.getquipus.com
Prev of 8,322,577 Next
npx shadcn@latest add https://ds.dataprovider.dev/r/workspace.json Registry JSON 
<!-- Dataset workspace block
     The shared product workspace (Search Engine, Reverse DNS, SSL Catalog,
     Universe, Traffic): toolbar, filter builder, view tabs, data sheet and a
     record toolbar. Composed under the console theme. -->

<div class="dp-shell">
  <nav class="dp-sidebar">
    <div class="dp-sidebar-head">
      <span class="dp-sidebar-logo">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </span>
      <button class="dp-sidebar-collapse" type="button" aria-label="Collapse sidebar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m11 17-5-5 5-5"></path><path d="m18 17-5-5 5-5"></path></svg>
      </button>
    </div>
    <div class="dp-sidebar-nav">
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><path d="M9 22V12h6v10"></path></svg>
        Home
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m16 8-6 2-2 6 6-2z"></path></svg>
        AI Navigator <span class="dp-nav-beta">Beta</span>
      </a>
      <div class="dp-nav-group">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
        Library
      </div>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg>
        Files
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="14" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path><path d="M12 18v3"></path></svg>
        Dashboards
      </a>
      <div class="dp-nav-group">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
        Products
      </div>
      <a class="dp-nav-item" data-active href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path></svg>
        Search Engine
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path><path d="M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20"></path></svg>
        Reverse DNS
      </a>
    </div>
    <div class="dp-sidebar-foot">
      <span class="dp-avatar" data-size="sm" style="background: var(--dp-accent-yellow, #ffd200); color: var(--dp-brand-purple, #2d145f);">CB</span>
      <span class="dp-sidebar-user">
        <span class="dp-sidebar-user-name">Christian Branbergen</span>
        <span class="dp-sidebar-user-org">Dataprovider BV</span>
      </span>
      <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Log out</button>
    </div>
  </nav>

  <main class="dp-shell-main" style="padding: 0;">
    <div class="dp-ws">
      <!-- Toolbar + filters -->
      <section class="dp-ws-card">
        <div class="dp-ws-bar">
          <div class="dp-ws-title">
            <span class="dp-ws-title-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg>
            </span>
            Untitled dataset
          </div>
          <div class="dp-ws-actions">
            <span class="dp-ws-product">Search Engine</span>
            <a class="dp-ws-link" href="#">Monitor</a>
            <a class="dp-ws-link" href="#">Send</a>
            <span class="dp-ws-sep"></span>
            <button class="dp-ws-textbtn" type="button">New</button>
            <button class="dp-ws-textbtn" type="button">Save</button>
            <button class="dp-btn" type="button" data-variant="secondary">Export</button>
          </div>
        </div>

        <div class="dp-ws-filters">
          <div class="dp-ws-filters-head">
            <span class="dp-ws-filters-title">Filters</span>
            <span class="dp-ws-sep"></span>
            <span class="dp-ws-records">416,128,812 Records</span>
            <button class="dp-ws-iconbtn" type="button" aria-label="Undo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7v6h6"></path><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"></path></svg></button>
            <button class="dp-ws-iconbtn" type="button" aria-label="Redo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 7v6h-6"></path><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"></path></svg></button>
            <span class="dp-ws-spacer"></span>
            <button class="dp-ws-datepill" type="button">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18M8 2v4M16 2v4"></path></svg>
              May 2026
            </button>
            <button class="dp-btn" type="button" data-variant="ai">
              Create dataset with AI
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 3l1.9 4.6L18.5 9l-4.6 1.9L12 15l-1.9-4.1L5.5 9l4.6-1.4z"></path></svg>
            </button>
          </div>

          <div class="dp-ws-filter-row">
            <select class="dp-select" aria-label="Field"><option>Field</option></select>
            <select class="dp-select" aria-label="Operator"><option>Select...</option></select>
            <input class="dp-input" type="text" placeholder="Value" />
          </div>

          <div class="dp-ws-filter-actions">
            <button class="dp-btn" type="button" data-variant="secondary" data-size="sm">Add filter</button>
            <button class="dp-ws-action" type="button">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 16 4 4 4-4"></path><path d="M7 20V4"></path><path d="m21 8-4-4-4 4"></path><path d="M17 4v16"></path></svg>
              Rearrange
            </button>
            <button class="dp-ws-action" type="button">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
              Clear All
            </button>
            <button class="dp-ws-action" type="button" style="margin-left: auto;">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
              Copy Query
            </button>
          </div>
        </div>
      </section>

      <!-- View tabs + sheet -->
      <section class="dp-ws-card">
        <div class="dp-ws-tabs" role="tablist">
          <button class="dp-ws-tab" type="button" data-active>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5v14a9 3 0 0 0 18 0V5"></path><path d="M3 12a9 3 0 0 0 18 0"></path></svg>
            Sheet
          </button>
          <button class="dp-ws-tab" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12A9 9 0 1 1 12 3v9z"></path><path d="M12 3a9 9 0 0 1 9 9h-9z" opacity="0"></path><path d="M16 8a5 5 0 0 0-4-4"></path></svg>
            Statistics
          </button>
          <button class="dp-ws-tab" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"></path><path d="m19 9-5 5-4-4-3 3"></path></svg>
            Trends
          </button>
          <button class="dp-ws-tab" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"></path><rect width="3" height="7" x="7" y="11"></rect><rect width="3" height="11" x="13" y="7"></rect></svg>
            Migration insights
          </button>
          <button class="dp-ws-tab" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2z"></path><path d="M9 3v16M15 5v16"></path></svg>
            Maps
          </button>
        </div>

        <table class="dp-ws-sheet">
          <thead>
            <tr>
              <th class="dp-ws-rownum"></th>
              <th class="dp-ws-colhost">
                <span class="dp-ws-colhost-head">
                  Hostname
                  <span class="dp-ws-colicons">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"></path><path d="M9 10.76V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5.76l1.5 2.4A1 1 0 0 1 17.6 15H6.4a1 1 0 0 1-.9-1.84z"></path></svg>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg>
                  </span>
                </span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr><td class="dp-ws-rownum">1</td><td>www.virginiemahe.fr</td></tr>
            <tr><td class="dp-ws-rownum">2</td><td>www.cavallin.ch</td></tr>
            <tr><td class="dp-ws-rownum">3</td><td>9ofanessence.co.uk</td></tr>
            <tr><td class="dp-ws-rownum">4</td><td>www.nudecakes.co.uk</td></tr>
            <tr><td class="dp-ws-rownum">5</td><td>yasminstore.it</td></tr>
            <tr><td class="dp-ws-rownum">6</td><td>www.charlesjacobs.co.uk</td></tr>
            <tr><td class="dp-ws-rownum">7</td><td>barista-corner.ch</td></tr>
            <tr><td class="dp-ws-rownum">8</td><td>www.getquipus.com</td></tr>
          </tbody>
        </table>

        <div class="dp-ws-foot">
          <button class="dp-ws-foot-ctrl" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" x2="21" y1="6" y2="6"></line><line x1="8" x2="21" y1="12" y2="12"></line><line x1="8" x2="21" y1="18" y2="18"></line><line x1="3" x2="3.01" y1="6" y2="6"></line><line x1="3" x2="3.01" y1="12" y2="12"></line><line x1="3" x2="3.01" y1="18" y2="18"></line></svg>
            50 Records
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
          </button>
          <button class="dp-ws-foot-ctrl" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle></svg>
            Uniform
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
          </button>
          <button class="dp-ws-foot-ctrl" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 18 4 4 4-4"></path><path d="m8 6 4-4 4 4"></path></svg>
            Comfortable
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
          </button>
          <button class="dp-ws-foot-ctrl" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" x2="20" y1="6" y2="6"></line><line x1="4" x2="14" y1="12" y2="12"></line><line x1="4" x2="18" y1="18" y2="18"></line></svg>
            Rich text
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
          </button>
          <div class="dp-ws-pager">
            <a href="#" aria-disabled="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg> Prev</a>
            <input class="dp-ws-pagebox" type="text" value="1" aria-label="Page" />
            <span>of 8,322,577</span>
            <a href="#">Next <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></a>
          </div>
        </div>
      </section>
    </div>
  </main>
</div>

/* Dataset workspace block
   The shared product workspace used by Search Engine, Reverse DNS, SSL Catalog,
   Universe and Traffic: a toolbar, a filter builder, view tabs, a data sheet
   and a record toolbar. Composed under the console theme. */

.dp-ws {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-6);
  padding: var(--dp-space-6);
}

.dp-ws-card {
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
  overflow: hidden;
}

/* ---- Toolbar -------------------------------------------------------- */
.dp-ws-bar {
  display: flex;
  align-items: center;
  gap: var(--dp-space-4);
  padding: var(--dp-space-4) var(--dp-space-5);
  border-bottom: 1px solid var(--dp-border);
}

.dp-ws-title {
  display: flex;
  align-items: center;
  gap: var(--dp-space-3);
  font-size: var(--dp-text-2xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-ws-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-md);
  color: var(--dp-text-muted);
}

.dp-ws-title-icon svg { width: 1.25rem; height: 1.25rem; }

.dp-ws-actions {
  display: flex;
  align-items: center;
  gap: var(--dp-space-4);
  margin-left: auto;
}

.dp-ws-product {
  color: var(--dp-text-muted);
  font-weight: var(--dp-weight-semibold);
  font-size: var(--dp-text-sm);
}

.dp-ws-link {
  color: var(--dp-text-muted);
  font-weight: var(--dp-weight-semibold);
  font-size: var(--dp-text-sm);
  text-decoration: none;
  cursor: pointer;
}

.dp-ws-actions .dp-btn { font-size: var(--dp-text-sm); }

.dp-ws-link:hover { color: var(--dp-navy); }

.dp-ws-sep {
  width: 1px;
  height: 1.5rem;
  background: var(--dp-border);
}

.dp-ws-textbtn {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
  padding: var(--dp-space-2) var(--dp-space-2);
  border-radius: var(--dp-radius-xs);
  cursor: pointer;
}

.dp-ws-textbtn:hover { background: var(--dp-surface-soft); }

/* ---- Filters -------------------------------------------------------- */
.dp-ws-filters { padding: var(--dp-space-5); }

.dp-ws-filters-head {
  display: flex;
  align-items: center;
  gap: var(--dp-space-3);
  margin-bottom: var(--dp-space-4);
}

.dp-ws-filters-title {
  font-size: var(--dp-text-base);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-ws-records {
  color: var(--dp-text-muted);
  font-weight: var(--dp-weight-bold);
  font-size: var(--dp-text-sm);
}

.dp-ws-iconbtn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--dp-text-subtle);
  cursor: pointer;
  padding: 2px;
  line-height: 0;
}

.dp-ws-iconbtn:hover { color: var(--dp-navy); }
.dp-ws-iconbtn svg { width: 1.1rem; height: 1.1rem; }

.dp-ws-spacer { margin-left: auto; }

.dp-ws-datepill {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-2);
  padding: var(--dp-space-2) var(--dp-space-3);
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-xs);
  background: var(--dp-surface);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-navy);
  cursor: pointer;
}

.dp-ws-datepill svg { width: 1rem; height: 1rem; color: var(--dp-text-muted); }

.dp-ws-filter-row {
  display: flex;
  gap: var(--dp-space-3);
}

.dp-ws-filter-row .dp-select { flex: 0 0 14rem; }
.dp-ws-filter-row .dp-input { flex: 1; }

.dp-ws-filter-actions {
  display: flex;
  align-items: center;
  gap: var(--dp-space-4);
  margin-top: var(--dp-space-4);
}

.dp-ws-action {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-2);
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-text-muted);
  cursor: pointer;
}

.dp-ws-action:hover { color: var(--dp-navy); }
.dp-ws-action svg { width: 1.1rem; height: 1.1rem; }

/* ---- View tabs ------------------------------------------------------ */
.dp-ws-tabs {
  display: flex;
  gap: var(--dp-space-5);
  padding: 0 var(--dp-space-5);
  border-bottom: 1px solid var(--dp-border);
}

.dp-ws-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-2);
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--dp-space-4) 0;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}

.dp-ws-tab svg { width: 1.15rem; height: 1.15rem; }
.dp-ws-tab:hover { color: var(--dp-navy); }

.dp-ws-tab[data-active] {
  color: var(--dp-navy);
  border-bottom-color: var(--dp-blue-700);
}

.dp-ws-tab[data-active] svg { color: var(--dp-blue-700); }

/* ---- Sheet ---------------------------------------------------------- */
.dp-ws-sheet {
  border-collapse: collapse;
  font-size: var(--dp-text-sm);
  color: var(--dp-navy);
}

.dp-ws-sheet th,
.dp-ws-sheet td {
  border-bottom: 1px solid var(--dp-border);
  padding: var(--dp-space-4);
  text-align: left;
}

.dp-ws-sheet thead th {
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-ws-rownum {
  width: 64px;
  min-width: 64px;
  text-align: center;
  color: var(--dp-text-subtle);
  font-size: var(--dp-text-sm);
  border-right: 1px solid var(--dp-border);
}

.dp-ws-colhost {
  min-width: 24rem;
  border-right: 1px solid var(--dp-border);
}

.dp-ws-colhost-head {
  display: flex;
  align-items: center;
  gap: var(--dp-space-2);
}

.dp-ws-colicons {
  margin-left: auto;
  display: inline-flex;
  gap: var(--dp-space-2);
  color: var(--dp-text-subtle);
}

.dp-ws-colicons svg { width: 1rem; height: 1rem; }

.dp-ws-sheet tbody tr:hover { background: var(--dp-surface-subtle); }

/* ---- Record toolbar ------------------------------------------------- */
.dp-ws-foot {
  display: flex;
  align-items: center;
  gap: var(--dp-space-4);
  padding: var(--dp-space-3) var(--dp-space-5);
  border-top: 1px solid var(--dp-border);
}

.dp-ws-foot-ctrl {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-2);
  appearance: none;
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xs);
  padding: var(--dp-space-2) var(--dp-space-3);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-navy);
  cursor: pointer;
}

.dp-ws-foot-ctrl svg { width: 1rem; height: 1rem; color: var(--dp-text-muted); }

.dp-ws-pager {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-3);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

.dp-ws-pager a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--dp-link);
  font-weight: var(--dp-weight-semibold);
  text-decoration: none;
}

.dp-ws-pager a[aria-disabled="true"] {
  color: var(--dp-text-subtle);
  pointer-events: none;
}

.dp-ws-pager svg { width: 1rem; height: 1rem; }

.dp-ws-pagebox {
  width: 3rem;
  height: 2rem;
  text-align: center;
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-xs);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  color: var(--dp-navy);
}

Recipes

registry:block

A card-grid screen with a page header, a large search and category sections of recipe cards. Logos are placeholder tiles to swap for the real brand logo.

Recipes

Complex filter combinations made for you to get the best results

Highlighted

Bubble.io

Bubble.io is the leading no-code platform for building fully functional, data-driven web applications through a visual drag-and-drop interface.

Cloud

Flutterflow APP

FlutterFlow is a visual low-code platform built on Google's Flutter framework that enables anyone to design, build and deploy cross-platform apps.

Cloud

Bolt

Bolt.new is an AI-powered full-stack web development agent by StackBlitz that turns natural language prompts into deployable applications.

Cloud
E-commerce (48) See all

Thuiswinkel

T

Thuiswinkel Waarborg is a Dutch e-commerce trust mark for online stores.

One.com

O

One.com Webshop is a user-friendly e-commerce builder for small businesses.

Tray

Y
B3:LWSA3

Tray is a Brazilian e-commerce platform for building online stores.

Websitebuilder

W

Web.com Websitebuilder offers a hosted store and site building service.

npx shadcn@latest add https://ds.dataprovider.dev/r/recipes.json Registry JSON 
<!-- Recipes block
     A card-grid screen: page header, a large search, and category sections of
     recipe cards. Logos are placeholder tiles; swap in the real brand logo.
     Composed under the console theme. -->

<div class="dp-shell">
  <nav class="dp-sidebar">
    <div class="dp-sidebar-head">
      <span class="dp-sidebar-logo">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </span>
      <button class="dp-sidebar-collapse" type="button" aria-label="Collapse sidebar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m11 17-5-5 5-5"></path><path d="m18 17-5-5 5-5"></path></svg>
      </button>
    </div>
    <div class="dp-sidebar-nav">
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><path d="M9 22V12h6v10"></path></svg>
        Home
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m16 8-6 2-2 6 6-2z"></path></svg>
        AI Navigator <span class="dp-nav-beta">Beta</span>
      </a>
      <div class="dp-nav-group">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
        Library
      </div>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg>
        Files
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="14" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path><path d="M12 18v3"></path></svg>
        Dashboards
      </a>
      <a class="dp-nav-item" data-active href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M9 13h6"></path><path d="M9 17h3"></path></svg>
        Recipes
      </a>
      <div class="dp-nav-group">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
        Products
      </div>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path></svg>
        Search Engine
      </a>
    </div>
    <div class="dp-sidebar-foot">
      <span class="dp-avatar" data-size="sm" style="background: var(--dp-accent-yellow, #ffd200); color: var(--dp-brand-purple, #2d145f);">CB</span>
      <span class="dp-sidebar-user">
        <span class="dp-sidebar-user-name">Christian Branbergen</span>
        <span class="dp-sidebar-user-org">Dataprovider BV</span>
      </span>
      <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Log out</button>
    </div>
  </nav>

  <main class="dp-shell-main">
    <h1 class="dp-recipes-title">Recipes</h1>
    <p class="dp-recipes-desc">Complex filter combinations made for you to get the best results</p>

    <div class="dp-recipes-search">
      <svg class="dp-recipes-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path></svg>
      <input type="search" placeholder="e.g.: Google, WordPress, NYSE" />
      <svg class="dp-recipes-search-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
    </div>

    <section class="dp-recipes-section">
      <div class="dp-recipes-section-head">
        <span class="dp-recipes-section-title">Highlighted</span>
      </div>
      <div class="dp-recipe-grid">
        <article class="dp-recipe-card">
          <div class="dp-recipe-logo"><span class="dp-recipe-logo-tile">B</span></div>
          <h3 class="dp-recipe-title">Bubble.io</h3>
          <p class="dp-recipe-desc">Bubble.io is the leading no-code platform for building fully functional, data-driven web applications through a visual drag-and-drop interface.</p>
          <span class="dp-badge" data-tone="neutral">Cloud</span>
        </article>
        <article class="dp-recipe-card">
          <div class="dp-recipe-logo"><span class="dp-recipe-logo-tile">F</span></div>
          <h3 class="dp-recipe-title">Flutterflow APP</h3>
          <p class="dp-recipe-desc">FlutterFlow is a visual low-code platform built on Google's Flutter framework that enables anyone to design, build and deploy cross-platform apps.</p>
          <span class="dp-badge" data-tone="neutral">Cloud</span>
        </article>
        <article class="dp-recipe-card">
          <div class="dp-recipe-logo"><span class="dp-recipe-logo-tile">B</span></div>
          <h3 class="dp-recipe-title">Bolt</h3>
          <p class="dp-recipe-desc">Bolt.new is an AI-powered full-stack web development agent by StackBlitz that turns natural language prompts into deployable applications.</p>
          <span class="dp-badge" data-tone="neutral">Cloud</span>
        </article>
      </div>
    </section>

    <section class="dp-recipes-section">
      <div class="dp-recipes-section-head">
        <span class="dp-recipes-section-title">E-commerce <span>(48)</span></span>
        <a class="dp-recipes-seeall" href="#">See all</a>
      </div>
      <div class="dp-recipe-grid" data-compact>
        <article class="dp-recipe-card" data-compact>
          <div class="dp-recipe-head">
            <h3 class="dp-recipe-title">Thuiswinkel</h3>
            <span class="dp-recipe-logo-tile">T</span>
          </div>
          <p class="dp-recipe-desc">Thuiswinkel Waarborg is a Dutch e-commerce trust mark for online stores.</p>
        </article>
        <article class="dp-recipe-card" data-compact>
          <div class="dp-recipe-head">
            <h3 class="dp-recipe-title">One.com</h3>
            <span class="dp-recipe-logo-tile">O</span>
          </div>
          <p class="dp-recipe-desc">One.com Webshop is a user-friendly e-commerce builder for small businesses.</p>
        </article>
        <article class="dp-recipe-card" data-compact>
          <div class="dp-recipe-head">
            <h3 class="dp-recipe-title">Tray</h3>
            <span class="dp-recipe-logo-tile">Y</span>
          </div>
          <span class="dp-badge" data-tone="warning" style="margin-bottom: var(--dp-space-2);">B3:LWSA3</span>
          <p class="dp-recipe-desc">Tray is a Brazilian e-commerce platform for building online stores.</p>
        </article>
        <article class="dp-recipe-card" data-compact>
          <div class="dp-recipe-head">
            <h3 class="dp-recipe-title">Websitebuilder</h3>
            <span class="dp-recipe-logo-tile">W</span>
          </div>
          <p class="dp-recipe-desc">Web.com Websitebuilder offers a hosted store and site building service.</p>
        </article>
      </div>
    </section>
  </main>
</div>

/* Recipes block
   A card-grid screen: page header, a large search, and category sections of
   recipe cards. Composed under the console theme. */

.dp-recipes-title {
  margin: 0 0 var(--dp-space-2);
  font-size: var(--dp-text-4xl);
  font-weight: var(--dp-weight-extrabold);
  color: var(--dp-navy);
}

.dp-recipes-desc {
  margin: 0 0 var(--dp-space-6);
  font-size: var(--dp-text-lg);
  color: var(--dp-text-muted);
}

/* Large search */
.dp-recipes-search {
  position: relative;
  margin-bottom: var(--dp-space-10);
}

.dp-recipes-search input {
  width: 100%;
  height: 3.25rem;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  color: var(--dp-navy);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-lg);
  padding: 0 3rem;
}

.dp-recipes-search input::placeholder { color: var(--dp-text-subtle); }

.dp-recipes-search input:focus {
  outline: none;
  border-color: var(--dp-primary-bg);
  box-shadow: var(--dp-shadow-focus);
}

.dp-recipes-search .dp-recipes-search-icon {
  position: absolute;
  left: var(--dp-space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--dp-text-subtle);
  pointer-events: none;
}

.dp-recipes-search .dp-recipes-search-info {
  position: absolute;
  right: var(--dp-space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--dp-text-subtle);
}

/* Section */
.dp-recipes-section { margin-top: var(--dp-space-10); }

.dp-recipes-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dp-space-4);
  margin-bottom: var(--dp-space-5);
}

.dp-recipes-section-title {
  font-size: var(--dp-text-2xl);
  font-weight: var(--dp-weight-extrabold);
  color: var(--dp-navy);
}

.dp-recipes-section-title span {
  font-weight: var(--dp-weight-regular);
  color: var(--dp-text-muted);
}

.dp-recipes-seeall {
  color: var(--dp-navy);
  font-weight: var(--dp-weight-semibold);
  font-size: var(--dp-text-base);
  text-decoration: none;
}

.dp-recipes-seeall:hover { color: var(--dp-link); }

/* Cards */
.dp-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--dp-space-5);
}

.dp-recipe-grid[data-compact] {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.dp-recipe-card {
  display: flex;
  flex-direction: column;
  padding: var(--dp-space-6);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
}

.dp-recipe-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  margin-bottom: var(--dp-space-5);
}

.dp-recipe-logo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--dp-radius-lg);
  background: var(--dp-surface-soft);
  color: var(--dp-brand-purple, var(--dp-navy));
  font-size: var(--dp-text-3xl);
  font-weight: var(--dp-weight-extrabold);
}

.dp-recipe-title {
  margin: 0 0 var(--dp-space-2);
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-recipe-desc {
  flex: 1;
  margin: 0 0 var(--dp-space-4);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

/* Compact card: title and logo on one row */
.dp-recipe-card[data-compact] { padding: var(--dp-space-5); }

.dp-recipe-card[data-compact] .dp-recipe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dp-space-3);
  margin-bottom: var(--dp-space-3);
}

.dp-recipe-card[data-compact] .dp-recipe-title { margin: 0; font-size: var(--dp-text-lg); }

.dp-recipe-card[data-compact] .dp-recipe-logo-tile {
  width: 2.75rem;
  height: 2.75rem;
  font-size: var(--dp-text-lg);
  border-radius: var(--dp-radius-md);
}

Account profile

registry:block

A settings screen: two columns of cards with user-info form fields, security and social sign-in setting rows, MCP settings and access tokens.

Profile

npx shadcn@latest add https://ds.dataprovider.dev/r/account.json Registry JSON 
<!-- Account / Profile block
     A settings screen: two columns of cards with form fields, setting rows,
     social sign-in and access tokens. Composed under the console theme. -->

<div class="dp-shell">
  <nav class="dp-sidebar">
    <div class="dp-sidebar-head">
      <span class="dp-sidebar-logo">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </span>
      <button class="dp-sidebar-collapse" type="button" aria-label="Collapse sidebar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m11 17-5-5 5-5"></path><path d="m18 17-5-5 5-5"></path></svg>
      </button>
    </div>
    <div class="dp-sidebar-nav">
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><path d="M9 22V12h6v10"></path></svg>
        Home
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m16 8-6 2-2 6 6-2z"></path></svg>
        AI Navigator <span class="dp-nav-beta">Beta</span>
      </a>
      <div class="dp-nav-group">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
        Library
      </div>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg>
        Files
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg>
        Recipes
      </a>
      <div class="dp-nav-group">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
        Account
      </div>
      <a class="dp-nav-item" data-active href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"></circle><path d="M6 21v-1a6 6 0 0 1 12 0v1"></path></svg>
        Profile
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"></path><path d="m19 9-5 5-4-4-3 3"></path></svg>
        Usage
      </a>
    </div>
    <div class="dp-sidebar-foot">
      <span class="dp-avatar" data-size="sm" style="background: var(--dp-accent-yellow, #ffd200); color: var(--dp-brand-purple, #2d145f);">CB</span>
      <span class="dp-sidebar-user">
        <span class="dp-sidebar-user-name">Christian Branbergen</span>
        <span class="dp-sidebar-user-org">Dataprovider BV</span>
      </span>
      <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Log out</button>
    </div>
  </nav>

  <main class="dp-shell-main">
    <h1 class="dp-account-title">Profile</h1>

    <div class="dp-account-grid">
      <!-- Left column -->
      <div class="dp-account-col">
        <section class="dp-settings-card">
          <h2 class="dp-settings-title">User info</h2>
          <p class="dp-settings-sub">Your personal details</p>

          <div class="dp-field">
            <label class="dp-label" for="first">First name</label>
            <input class="dp-input" id="first" type="text" value="Christian" />
          </div>
          <div class="dp-field">
            <label class="dp-label" for="last">Last name</label>
            <input class="dp-input" id="last" type="text" value="Branbergen" />
          </div>
          <div class="dp-field">
            <label class="dp-label" for="email">Email address</label>
            <input class="dp-input" id="email" type="email" value="branbergen@dataprovider.com" disabled />
          </div>
          <p class="dp-settings-note">To enhance security, Dataprovider does not
            store user email addresses. Please <a href="#">contact our team</a> if
            you require an email address update.</p>

          <label class="dp-option-box dp-check">
            <input class="dp-checkbox" type="checkbox" checked />
            <span class="dp-option-text">
              <span class="dp-option-title">Subscribe to marketing emails</span>
              <span class="dp-option-desc">Get updates about new products, helpful tips, and exclusive offers.</span>
            </span>
          </label>
        </section>

        <section class="dp-settings-card">
          <div class="dp-settings-head">
            <h2 class="dp-settings-title">MCP Settings</h2>
            <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Read more about our MCP</button>
          </div>
          <p class="dp-settings-sub">Configure your MCP-related sessions</p>

          <div class="dp-mcp-url-label">MCP URL</div>
          <div class="dp-mcp-url">
            <code>https://mcp.dataprovider.com/mcp?api-key=</code>
            <button class="dp-mcp-copy" type="button" aria-label="Copy URL">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
            </button>
          </div>

          <p class="dp-settings-subhead">Visualization settings</p>
          <label class="dp-option-box dp-radio">
            <input class="dp-radio-input" type="radio" name="viz" />
            <span class="dp-option-text">
              <span class="dp-option-title">Automatic</span>
              <span class="dp-option-desc">Show visualisations in MCP sessions depending on context</span>
            </span>
          </label>
          <label class="dp-option-box dp-radio">
            <input class="dp-radio-input" type="radio" name="viz" />
            <span class="dp-option-text">
              <span class="dp-option-title">Always on</span>
              <span class="dp-option-desc">Always show visualisations in MCP sessions</span>
            </span>
          </label>
        </section>
      </div>

      <!-- Right column -->
      <div class="dp-account-col">
        <section class="dp-settings-card">
          <h2 class="dp-settings-title">Security</h2>
          <p class="dp-settings-sub">&nbsp;</p>
          <a class="dp-setting-row" href="#">
            <span class="dp-setting-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7.5" cy="15.5" r="3.5"></circle><path d="m10 13 7-7"></path><path d="m14 6 2 2 3-3-2-2z"></path></svg>
            </span>
            <span class="dp-setting-text">
              <span class="dp-setting-title">Change password</span>
              <span class="dp-setting-sub">Request password reset</span>
            </span>
            <span class="dp-setting-chevron"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></span>
          </a>
          <a class="dp-setting-row" href="#">
            <span class="dp-setting-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path><path d="m9 12 2 2 4-4"></path></svg>
            </span>
            <span class="dp-setting-text">
              <span class="dp-setting-title">Two-factor authentication</span>
              <span class="dp-setting-sub">Two-factor authentication is disabled.</span>
            </span>
            <span class="dp-setting-chevron"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></span>
          </a>
        </section>

        <section class="dp-settings-card">
          <h2 class="dp-settings-title">Social sign-in</h2>
          <p class="dp-settings-sub">Activate sign-in with one of the following services</p>
          <a class="dp-setting-row" href="#">
            <span class="dp-setting-icon">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M21.6 12.2c0-.6-.1-1.2-.2-1.8H12v3.4h5.4a4.6 4.6 0 0 1-2 3v2.5h3.2c1.9-1.7 3-4.3 3-7.1"/><path fill="#34A853" d="M12 22c2.7 0 5-1 6.6-2.7l-3.2-2.5c-.9.6-2 1-3.4 1-2.6 0-4.8-1.7-5.6-4.1H3.1v2.6A10 10 0 0 0 12 22"/><path fill="#FBBC05" d="M6.4 13.7a6 6 0 0 1 0-3.8V7.3H3.1a10 10 0 0 0 0 9z"/><path fill="#EA4335" d="M12 5.9c1.5 0 2.8.5 3.8 1.5l2.8-2.8A10 10 0 0 0 3.1 7.3l3.3 2.6C7.2 7.5 9.4 5.9 12 5.9"/></svg>
            </span>
            <span class="dp-setting-text"><span class="dp-setting-title">Link account to Google</span></span>
            <span class="dp-setting-chevron"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></span>
          </a>
          <a class="dp-setting-row" href="#">
            <span class="dp-setting-icon">
              <svg viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="3" fill="#0a66c2"/><path fill="#fff" d="M7 9.5H4.6V19H7zM5.8 8.2A1.4 1.4 0 1 0 5.8 5.4a1.4 1.4 0 0 0 0 2.8M19.4 19H17v-4.6c0-1.1-.4-1.9-1.4-1.9-.8 0-1.2.5-1.4 1-.1.2-.1.5-.1.8V19h-2.4s.03-8 0-8.8h2.4v1.2c.3-.5.9-1.2 2.2-1.2 1.6 0 2.8 1 2.8 3.3z"/></svg>
            </span>
            <span class="dp-setting-text"><span class="dp-setting-title">Link account to LinkedIn</span></span>
            <span class="dp-setting-chevron"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></span>
          </a>
          <a class="dp-setting-row" href="#">
            <span class="dp-setting-icon">
              <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="8" height="8" fill="#f25022"/><rect x="13" y="3" width="8" height="8" fill="#7fba00"/><rect x="3" y="13" width="8" height="8" fill="#00a4ef"/><rect x="13" y="13" width="8" height="8" fill="#ffb900"/></svg>
            </span>
            <span class="dp-setting-text"><span class="dp-setting-title">Link account to Microsoft</span></span>
            <span class="dp-setting-chevron"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></span>
          </a>
        </section>

        <section class="dp-settings-card">
          <div class="dp-settings-head">
            <h2 class="dp-settings-title">Access tokens</h2>
            <button class="dp-btn" type="button" data-variant="secondary" data-size="sm">Create access token</button>
          </div>
          <p class="dp-settings-sub">Manage your MCP and API tokens</p>
          <div class="dp-token-row">
            <span>
              <span class="dp-token-name">RevealVisitor</span><br>
              <span class="dp-token-meta">MCP &middot; Expires 20/05/2027, 20:29</span>
            </span>
            <button class="dp-token-del" type="button" aria-label="Delete token">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
            </button>
          </div>
          <div class="dp-token-row">
            <span>
              <span class="dp-token-name">BrandScout</span><br>
              <span class="dp-token-meta">MCP &middot; Expires 14/04/2027, 09:10</span>
            </span>
            <button class="dp-token-del" type="button" aria-label="Delete token">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
            </button>
          </div>
        </section>
      </div>
    </div>
  </main>
</div>

/* Account / Profile block
   A settings screen: two columns of cards with form fields, setting rows,
   social sign-in rows and access tokens. Composed under the console theme. */

.dp-account-title {
  margin: 0 0 var(--dp-space-6);
  font-size: var(--dp-text-4xl);
  font-weight: var(--dp-weight-extrabold);
  color: var(--dp-navy);
}

.dp-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dp-space-6);
  align-items: start;
}

@media (max-width: 980px) { .dp-account-grid { grid-template-columns: 1fr; } }

.dp-account-col {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-6);
}

.dp-settings-card {
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
  padding: var(--dp-space-6);
}

.dp-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dp-space-4);
}

.dp-settings-title {
  margin: 0;
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-settings-sub {
  margin: var(--dp-space-1) 0 var(--dp-space-5);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

.dp-settings-card .dp-field { margin-bottom: var(--dp-space-4); }

.dp-settings-note {
  margin: 0 0 var(--dp-space-4);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

.dp-settings-note a { color: var(--dp-link); }

.dp-settings-subhead {
  margin: var(--dp-space-2) 0 var(--dp-space-3);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

/* Soft box holding a checkbox or radio option */
.dp-option-box {
  display: flex;
  align-items: flex-start;
  gap: var(--dp-space-3);
  padding: var(--dp-space-4);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  background: var(--dp-surface-subtle);
}

.dp-option-box + .dp-option-box { margin-top: var(--dp-space-3); }

.dp-option-text { display: flex; flex-direction: column; gap: 2px; }
.dp-option-title { font-weight: var(--dp-weight-bold); color: var(--dp-navy); font-size: var(--dp-text-sm); }
.dp-option-desc { font-size: var(--dp-text-sm); color: var(--dp-text-muted); }

/* A setting row: icon, text and a chevron */
.dp-setting-row {
  display: flex;
  align-items: center;
  gap: var(--dp-space-4);
  padding: var(--dp-space-4);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  background: var(--dp-surface-subtle);
  text-decoration: none;
  cursor: pointer;
}

.dp-setting-row + .dp-setting-row { margin-top: var(--dp-space-3); }
.dp-setting-row:hover { border-color: var(--dp-border-strong); }

.dp-setting-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--dp-radius-md);
  background: var(--dp-surface-soft);
  color: var(--dp-blue-700);
}

.dp-setting-icon svg { width: 1.35rem; height: 1.35rem; }

.dp-setting-text { flex: 1; min-width: 0; }
.dp-setting-title { font-weight: var(--dp-weight-bold); color: var(--dp-navy); }
.dp-setting-sub { font-size: var(--dp-text-sm); color: var(--dp-text-muted); }

.dp-setting-chevron { color: var(--dp-text-subtle); flex: none; }
.dp-setting-chevron svg { width: 1.25rem; height: 1.25rem; }

/* MCP URL field */
.dp-mcp-url-label {
  margin-bottom: var(--dp-space-2);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-navy);
}

.dp-mcp-url {
  display: flex;
  align-items: center;
  gap: var(--dp-space-3);
  padding: var(--dp-space-3) var(--dp-space-4);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-md);
  background: var(--dp-surface-subtle);
}

.dp-mcp-url code {
  flex: 1;
  font-family: var(--dp-font-mono);
  font-size: var(--dp-text-sm);
  color: var(--dp-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-mcp-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-xs);
  background: var(--dp-surface);
  color: var(--dp-text-muted);
  cursor: pointer;
}

.dp-mcp-copy svg { width: 1rem; height: 1rem; }

/* Access token rows */
.dp-token-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dp-space-3);
  padding: var(--dp-space-4);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  background: var(--dp-surface-subtle);
}

.dp-token-row + .dp-token-row { margin-top: var(--dp-space-3); }
.dp-token-name { font-weight: var(--dp-weight-bold); color: var(--dp-navy); }
.dp-token-meta { font-size: var(--dp-text-sm); color: var(--dp-text-muted); }

.dp-token-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border: 1px solid #f3c0c0;
  border-radius: var(--dp-radius-xs);
  background: var(--dp-surface);
  color: var(--dp-danger);
  cursor: pointer;
}

.dp-token-del svg { width: 1.1rem; height: 1.1rem; }

Dataset statistics

registry:block

The Statistics tab of the dataset workspace: a chart panel with a chart-type select, a bar chart, a legend and a data table. Shares the workspace chrome.

Untitled dataset
Search Engine Monitor Send
Filters 181,776,249 Records
Top-level domain
240M200M160M120M80M40M0

Top-level domain (Coverage 100.0%)  |  Count: Absolute counts from total detected/filled

Name Percentage Count
com 100% 181.78M
npx shadcn@latest add https://ds.dataprovider.dev/r/statistics.json Registry JSON 
<!-- Statistics view (workspace)
     The Statistics tab of the dataset workspace: chart panel with a chart-type
     select, a bar chart, a legend and a data table. Reuses the workspace chrome
     (.dp-ws-*). Composed under the console theme. -->

<div class="dp-shell">
  <nav class="dp-sidebar">
    <div class="dp-sidebar-head">
      <span class="dp-sidebar-logo">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </span>
      <button class="dp-sidebar-collapse" type="button" aria-label="Collapse sidebar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m11 17-5-5 5-5"></path><path d="m18 17-5-5 5-5"></path></svg>
      </button>
    </div>
    <div class="dp-sidebar-nav">
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><path d="M9 22V12h6v10"></path></svg>
        Home
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m16 8-6 2-2 6 6-2z"></path></svg>
        AI Navigator <span class="dp-nav-beta">Beta</span>
      </a>
      <div class="dp-nav-group">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
        Library
      </div>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg>
        Files
      </a>
      <a class="dp-nav-item" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg>
        Recipes
      </a>
      <div class="dp-nav-group">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
        Products
      </div>
      <a class="dp-nav-item" data-active href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path></svg>
        Search Engine
      </a>
    </div>
    <div class="dp-sidebar-foot">
      <span class="dp-avatar" data-size="sm" style="background: var(--dp-accent-yellow, #ffd200); color: var(--dp-brand-purple, #2d145f);">CB</span>
      <span class="dp-sidebar-user">
        <span class="dp-sidebar-user-name">Christian Branbergen</span>
        <span class="dp-sidebar-user-org">Dataprovider BV</span>
      </span>
      <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Log out</button>
    </div>
  </nav>

  <main class="dp-shell-main" style="padding: 0;">
    <div class="dp-ws">
      <section class="dp-ws-card">
        <div class="dp-ws-bar">
          <div class="dp-ws-title">
            <span class="dp-ws-title-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg>
            </span>
            Untitled dataset
          </div>
          <div class="dp-ws-actions">
            <span class="dp-ws-product">Search Engine</span>
            <a class="dp-ws-link" href="#">Monitor</a>
            <a class="dp-ws-link" href="#">Send</a>
            <span class="dp-ws-sep"></span>
            <button class="dp-ws-textbtn" type="button">New</button>
            <button class="dp-ws-textbtn" type="button">Save</button>
            <button class="dp-btn" type="button" data-variant="secondary">Export</button>
          </div>
        </div>

        <div class="dp-ws-filters">
          <div class="dp-ws-filters-head">
            <span class="dp-ws-filters-title">Filters</span>
            <span class="dp-ws-sep"></span>
            <span class="dp-ws-records">181,776,249 Records</span>
            <button class="dp-ws-iconbtn" type="button" aria-label="Undo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7v6h6"></path><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"></path></svg></button>
            <button class="dp-ws-iconbtn" type="button" aria-label="Redo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 7v6h-6"></path><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"></path></svg></button>
            <span class="dp-ws-spacer"></span>
            <button class="dp-ws-datepill" type="button">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18M8 2v4M16 2v4"></path></svg>
              Jun 2026
            </button>
            <button class="dp-btn" type="button" data-variant="ai">
              Create dataset with AI
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 3l1.9 4.6L18.5 9l-4.6 1.9L12 15l-1.9-4.1L5.5 9l4.6-1.4z"></path></svg>
            </button>
          </div>

          <div class="dp-ws-filter-row">
            <select class="dp-select" aria-label="Field"><option>Top-level domain</option></select>
            <select class="dp-select" aria-label="Operator"><option>is</option></select>
            <input class="dp-input" type="text" value="com" />
          </div>

          <div class="dp-ws-filter-actions">
            <button class="dp-btn" type="button" data-variant="secondary" data-size="sm">Add filter</button>
            <button class="dp-ws-action" type="button">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 16 4 4 4-4"></path><path d="M7 20V4"></path><path d="m21 8-4-4-4 4"></path><path d="M17 4v16"></path></svg>
              Rearrange
            </button>
            <button class="dp-ws-action" type="button">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
              Clear All
            </button>
            <button class="dp-ws-action" type="button" style="margin-left: auto;">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
              Copy Query
            </button>
          </div>
        </div>
      </section>

      <section class="dp-ws-card">
        <div class="dp-ws-tabs" role="tablist">
          <button class="dp-ws-tab" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5v14a9 3 0 0 0 18 0V5"></path><path d="M3 12a9 3 0 0 0 18 0"></path></svg>
            Sheet
          </button>
          <button class="dp-ws-tab" type="button" data-active>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12A9 9 0 1 1 12 3v9z"></path><path d="M16 8a5 5 0 0 0-4-4"></path></svg>
            Statistics
          </button>
          <button class="dp-ws-tab" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"></path><path d="m19 9-5 5-4-4-3 3"></path></svg>
            Trends
          </button>
          <button class="dp-ws-tab" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"></path><rect width="3" height="7" x="7" y="11"></rect><rect width="3" height="11" x="13" y="7"></rect></svg>
            Migration insights
          </button>
          <button class="dp-ws-tab" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2z"></path><path d="M9 3v16M15 5v16"></path></svg>
            Maps
          </button>
        </div>

        <div class="dp-stat-chart">
          <div class="dp-stat-chart-head">
            <div class="dp-stat-chart-title">
              Top-level domain
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
            </div>
            <div class="dp-stat-chart-controls">
              <select class="dp-select" data-size="sm" aria-label="Chart type"><option>Vertical bar</option></select>
              <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Download</button>
            </div>
          </div>

          <div class="dp-stat-plot">
            <div class="dp-stat-yaxis">
              <span>240M</span><span>200M</span><span>160M</span><span>120M</span><span>80M</span><span>40M</span><span>0</span>
            </div>
            <div class="dp-stat-bars">
              <div class="dp-stat-toolbar">
                <button type="button" aria-label="Zoom in"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3M11 8v6M8 11h6"></path></svg></button>
                <button type="button" aria-label="Zoom out"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3M8 11h6"></path></svg></button>
                <button type="button" aria-label="Pan"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-4 0v5"></path><path d="M14 10V4a2 2 0 0 0-4 0v6"></path><path d="M10 10.5V6a2 2 0 0 0-4 0v8"></path><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8"></path></svg></button>
                <button type="button" aria-label="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-2.82 1.17V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 8 19.4l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15H4.5a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 6 8.6l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 11 4.6V4.5a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 2.82 1.17l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9z"></path></svg></button>
                <button type="button" aria-label="Reset"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"></path><path d="M3 3v5h5"></path></svg></button>
              </div>
              <div class="dp-stat-bar" style="height: 75.7%;"></div>
            </div>
          </div>

          <p class="dp-stat-legend">Top-level domain <a href="#">(Coverage 100.0%)</a> &nbsp;|&nbsp; <b>Count:</b> Absolute counts from total detected/filled</p>

          <table class="dp-stat-table">
            <thead>
              <tr>
                <th>Name</th>
                <th class="dp-stat-num">Percentage</th>
                <th class="dp-stat-num">Count</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><span class="dp-stat-name"><span class="dp-stat-dot"></span> com</span></td>
                <td class="dp-stat-num">100%</td>
                <td class="dp-stat-num">181.78M</td>
              </tr>
            </tbody>
          </table>

          <button class="dp-btn dp-stat-copy" type="button" data-variant="outline">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
            Copy data to clipboard
          </button>
        </div>
      </section>
    </div>
  </main>
</div>

/* Statistics view (workspace)
   The Statistics tab of the dataset workspace: a chart panel with a chart-type
   select, a bar chart, a legend and a data table. Reuses the workspace chrome
   (.dp-ws-*) and the console theme. */

.dp-stat-chart { padding: var(--dp-space-6); }

.dp-stat-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dp-space-4);
  margin-bottom: var(--dp-space-5);
}

.dp-stat-chart-title {
  display: flex;
  align-items: center;
  gap: var(--dp-space-2);
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-stat-chart-title svg { width: 1.1rem; height: 1.1rem; color: var(--dp-text-subtle); }

.dp-stat-chart-controls {
  display: flex;
  align-items: center;
  gap: var(--dp-space-3);
}

.dp-stat-chart-controls .dp-select { width: 12rem; }

/* Plot area */
.dp-stat-plot {
  display: flex;
  gap: var(--dp-space-3);
  height: 22rem;
  margin-bottom: var(--dp-space-4);
}

.dp-stat-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  width: 3.5rem;
  padding-bottom: 1.25rem;
  font-size: var(--dp-text-xs);
  color: var(--dp-text-subtle);
  font-variant-numeric: tabular-nums;
}

.dp-stat-bars {
  position: relative;
  flex: 1;
  border-left: 1px solid var(--dp-border);
  border-bottom: 1px solid var(--dp-border);
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(16.666% - 1px),
    var(--dp-border) calc(16.666% - 1px),
    var(--dp-border) 16.666%
  );
}

.dp-stat-bar {
  position: absolute;
  bottom: 0;
  left: 6%;
  right: 6%;
  background: var(--dp-blue-700);
  border-radius: 2px 2px 0 0;
}

.dp-stat-toolbar {
  position: absolute;
  top: var(--dp-space-3);
  right: var(--dp-space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-1);
  padding: var(--dp-space-1) var(--dp-space-2);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-md);
  box-shadow: var(--dp-shadow-sm);
}

.dp-stat-toolbar button {
  display: inline-flex;
  border: 0;
  background: transparent;
  color: var(--dp-text-muted);
  cursor: pointer;
  padding: 3px;
}

.dp-stat-toolbar svg { width: 1rem; height: 1rem; }

/* Legend */
.dp-stat-legend {
  padding-top: var(--dp-space-4);
  border-top: 1px solid var(--dp-border);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

.dp-stat-legend a { color: var(--dp-link); text-decoration: none; }
.dp-stat-legend b { color: var(--dp-navy); }

/* Data table */
.dp-stat-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--dp-space-4);
  font-size: var(--dp-text-sm);
}

.dp-stat-table th {
  text-align: left;
  padding: var(--dp-space-3) var(--dp-space-2);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
  border-bottom: 1px solid var(--dp-border);
}

.dp-stat-table th.dp-stat-num,
.dp-stat-table td.dp-stat-num { text-align: right; font-variant-numeric: tabular-nums; }

.dp-stat-table td {
  padding: var(--dp-space-3) var(--dp-space-2);
  border-bottom: 1px solid var(--dp-border);
  color: var(--dp-text-muted);
}

.dp-stat-name {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-2);
  color: var(--dp-navy);
}

.dp-stat-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--dp-radius-full);
  background: var(--dp-blue-700);
}

.dp-stat-copy { margin-top: var(--dp-space-5); }

Migration insights

registry:block

The Migration insights tab of the dataset workspace: churn and growth over time with Overview and Custom comparison sub-tabs, shown in the empty state. Shares the workspace chrome.

Untitled dataset
Search Engine Monitor Send
Filters 422,214,685 Records

Migration insights

Discover churn and growth movements within your dataset overtime

In order to view Churn, you must set a filter.
npx shadcn@latest add https://ds.dataprovider.dev/r/churn.json Registry JSON 
<!-- Migration insights view (workspace)
     The Migration insights tab: churn and growth over time, with Overview and
     Custom comparison sub-tabs. Empty state without a filter. Reuses the
     workspace chrome. -->

<div class="dp-shell">
  <nav class="dp-sidebar">
    <div class="dp-sidebar-head">
      <span class="dp-sidebar-logo">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </span>
      <button class="dp-sidebar-collapse" type="button" aria-label="Collapse sidebar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m11 17-5-5 5-5"></path><path d="m18 17-5-5 5-5"></path></svg>
      </button>
    </div>
    <div class="dp-sidebar-nav">
      <a class="dp-nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><path d="M9 22V12h6v10"></path></svg> Home</a>
      <a class="dp-nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m16 8-6 2-2 6 6-2z"></path></svg> AI Navigator <span class="dp-nav-beta">Beta</span></a>
      <div class="dp-nav-group"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg> Library</div>
      <a class="dp-nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg> Files</a>
      <div class="dp-nav-group"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg> Products</div>
      <a class="dp-nav-item" data-active href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path></svg> Search Engine</a>
    </div>
    <div class="dp-sidebar-foot">
      <span class="dp-avatar" data-size="sm" style="background: var(--dp-accent-yellow, #ffd200); color: var(--dp-brand-purple, #2d145f);">CB</span>
      <span class="dp-sidebar-user"><span class="dp-sidebar-user-name">Christian Branbergen</span><span class="dp-sidebar-user-org">Dataprovider BV</span></span>
      <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Log out</button>
    </div>
  </nav>

  <main class="dp-shell-main" style="padding: 0;">
    <div class="dp-ws">
      <section class="dp-ws-card">
        <div class="dp-ws-bar">
          <div class="dp-ws-title">
            <span class="dp-ws-title-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg></span>
            Untitled dataset
          </div>
          <div class="dp-ws-actions">
            <span class="dp-ws-product">Search Engine</span>
            <a class="dp-ws-link" href="#">Monitor</a>
            <a class="dp-ws-link" href="#">Send</a>
            <span class="dp-ws-sep"></span>
            <button class="dp-ws-textbtn" type="button">New</button>
            <button class="dp-ws-textbtn" type="button">Save</button>
            <button class="dp-btn" type="button" data-variant="secondary">Export</button>
          </div>
        </div>
        <div class="dp-ws-filters">
          <div class="dp-ws-filters-head">
            <span class="dp-ws-filters-title">Filters</span>
            <span class="dp-ws-sep"></span>
            <span class="dp-ws-records">422,214,685 Records</span>
            <span class="dp-ws-spacer"></span>
            <button class="dp-ws-datepill" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18M8 2v4M16 2v4"></path></svg> Jun 2026</button>
            <button class="dp-btn" type="button" data-variant="ai">Create dataset with AI <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 3l1.9 4.6L18.5 9l-4.6 1.9L12 15l-1.9-4.1L5.5 9l4.6-1.4z"></path></svg></button>
          </div>
          <div class="dp-ws-filter-row">
            <select class="dp-select" aria-label="Field"><option>Field</option></select>
            <select class="dp-select" aria-label="Operator"><option>Select...</option></select>
            <input class="dp-input" type="text" placeholder="Value" />
          </div>
          <div class="dp-ws-filter-actions">
            <button class="dp-btn" type="button" data-variant="secondary" data-size="sm">Add filter</button>
            <button class="dp-ws-action" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 16 4 4 4-4"></path><path d="M7 20V4"></path><path d="m21 8-4-4-4 4"></path><path d="M17 4v16"></path></svg> Rearrange</button>
            <button class="dp-ws-action" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg> Clear All</button>
            <button class="dp-ws-action" type="button" style="margin-left: auto;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> Copy Query</button>
          </div>
        </div>
      </section>

      <section class="dp-ws-card">
        <div class="dp-ws-tabs" role="tablist">
          <button class="dp-ws-tab" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5v14a9 3 0 0 0 18 0V5"></path><path d="M3 12a9 3 0 0 0 18 0"></path></svg> Sheet</button>
          <button class="dp-ws-tab" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12A9 9 0 1 1 12 3v9z"></path><path d="M16 8a5 5 0 0 0-4-4"></path></svg> Statistics</button>
          <button class="dp-ws-tab" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"></path><path d="m19 9-5 5-4-4-3 3"></path></svg> Trends</button>
          <button class="dp-ws-tab" type="button" data-active><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"></path><rect width="3" height="7" x="7" y="11"></rect><rect width="3" height="11" x="13" y="7"></rect></svg> Migration insights</button>
          <button class="dp-ws-tab" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2z"></path><path d="M9 3v16M15 5v16"></path></svg> Maps</button>
        </div>

        <div class="dp-churn">
          <h2 class="dp-churn-title">Migration insights</h2>
          <p class="dp-churn-sub">Discover churn and growth movements within your dataset overtime</p>
          <div class="dp-churn-tabs">
            <button class="dp-churn-tab" type="button" data-active>Overview</button>
            <button class="dp-churn-tab" type="button">Custom comparison</button>
          </div>
          <div class="dp-churn-empty">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12A9 9 0 1 1 12 3v9z"></path><path d="M12 3a9 9 0 0 1 9 9h-9z"></path></svg>
            In order to view Churn, you must set a filter.
          </div>
        </div>
      </section>
    </div>
  </main>
</div>

/* Migration insights view (workspace)
   The Migration insights tab: churn and growth over time, with Overview and
   Custom comparison sub-tabs. Without a filter it shows an empty state. Reuses
   the workspace chrome (.dp-ws-*). */

.dp-churn { padding: var(--dp-space-6); }

.dp-churn-title {
  margin: 0 0 var(--dp-space-1);
  font-size: var(--dp-text-2xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-churn-sub {
  margin: 0 0 var(--dp-space-5);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

.dp-churn-tabs {
  display: flex;
  gap: var(--dp-space-6);
  border-bottom: 1px solid var(--dp-border);
  margin-bottom: var(--dp-space-6);
}

.dp-churn-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--dp-space-2) 0;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}

.dp-churn-tab[data-active] {
  color: var(--dp-navy);
  border-bottom-color: var(--dp-navy);
}

.dp-churn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dp-space-4);
  height: 22rem;
  border-radius: var(--dp-radius-lg);
  background: var(--dp-surface-subtle);
  color: var(--dp-text-muted);
  font-size: var(--dp-text-base);
}

.dp-churn-empty svg { width: 5rem; height: 5rem; color: var(--dp-neutral-500); }

Dataset maps

registry:block

The Maps tab of the dataset workspace: a world map with a domain-density heatmap and zoom controls. Shares the workspace chrome.

Untitled dataset
Search Engine Monitor Send
Filters 422,214,685 Records
Heatmap rendered by the mapping library at runtime.
npx shadcn@latest add https://ds.dataprovider.dev/r/maps.json Registry JSON 
<!-- Maps view (workspace)
     The Maps tab: a world map with a domain-density heatmap and zoom controls.
     The map is rendered by a mapping library at runtime; this block shows the
     panel, zoom controls and a heatmap-style backdrop. Reuses the workspace
     chrome. -->

<div class="dp-shell">
  <nav class="dp-sidebar">
    <div class="dp-sidebar-head">
      <span class="dp-sidebar-logo">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </span>
      <button class="dp-sidebar-collapse" type="button" aria-label="Collapse sidebar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m11 17-5-5 5-5"></path><path d="m18 17-5-5 5-5"></path></svg>
      </button>
    </div>
    <div class="dp-sidebar-nav">
      <a class="dp-nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><path d="M9 22V12h6v10"></path></svg> Home</a>
      <a class="dp-nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m16 8-6 2-2 6 6-2z"></path></svg> AI Navigator <span class="dp-nav-beta">Beta</span></a>
      <div class="dp-nav-group"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg> Library</div>
      <a class="dp-nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg> Files</a>
      <div class="dp-nav-group"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg> Products</div>
      <a class="dp-nav-item" data-active href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path></svg> Search Engine</a>
    </div>
    <div class="dp-sidebar-foot">
      <span class="dp-avatar" data-size="sm" style="background: var(--dp-accent-yellow, #ffd200); color: var(--dp-brand-purple, #2d145f);">CB</span>
      <span class="dp-sidebar-user"><span class="dp-sidebar-user-name">Christian Branbergen</span><span class="dp-sidebar-user-org">Dataprovider BV</span></span>
      <button class="dp-btn" type="button" data-variant="outline" data-size="sm">Log out</button>
    </div>
  </nav>

  <main class="dp-shell-main" style="padding: 0;">
    <div class="dp-ws">
      <section class="dp-ws-card">
        <div class="dp-ws-bar">
          <div class="dp-ws-title">
            <span class="dp-ws-title-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path></svg></span>
            Untitled dataset
          </div>
          <div class="dp-ws-actions">
            <span class="dp-ws-product">Search Engine</span>
            <a class="dp-ws-link" href="#">Monitor</a>
            <a class="dp-ws-link" href="#">Send</a>
            <span class="dp-ws-sep"></span>
            <button class="dp-ws-textbtn" type="button">New</button>
            <button class="dp-ws-textbtn" type="button">Save</button>
            <button class="dp-btn" type="button" data-variant="secondary">Export</button>
          </div>
        </div>
        <div class="dp-ws-filters">
          <div class="dp-ws-filters-head">
            <span class="dp-ws-filters-title">Filters</span>
            <span class="dp-ws-sep"></span>
            <span class="dp-ws-records">422,214,685 Records</span>
            <span class="dp-ws-spacer"></span>
            <button class="dp-ws-datepill" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18M8 2v4M16 2v4"></path></svg> Jun 2026</button>
            <button class="dp-btn" type="button" data-variant="ai">Create dataset with AI <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 3l1.9 4.6L18.5 9l-4.6 1.9L12 15l-1.9-4.1L5.5 9l4.6-1.4z"></path></svg></button>
          </div>
          <div class="dp-ws-filter-row">
            <select class="dp-select" aria-label="Field"><option>Field</option></select>
            <select class="dp-select" aria-label="Operator"><option>Select...</option></select>
            <input class="dp-input" type="text" placeholder="Value" />
          </div>
          <div class="dp-ws-filter-actions">
            <button class="dp-btn" type="button" data-variant="secondary" data-size="sm">Add filter</button>
            <button class="dp-ws-action" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 16 4 4 4-4"></path><path d="M7 20V4"></path><path d="m21 8-4-4-4 4"></path><path d="M17 4v16"></path></svg> Rearrange</button>
            <button class="dp-ws-action" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg> Clear All</button>
            <button class="dp-ws-action" type="button" style="margin-left: auto;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> Copy Query</button>
          </div>
        </div>
      </section>

      <section class="dp-ws-card">
        <div class="dp-ws-tabs" role="tablist">
          <button class="dp-ws-tab" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5v14a9 3 0 0 0 18 0V5"></path><path d="M3 12a9 3 0 0 0 18 0"></path></svg> Sheet</button>
          <button class="dp-ws-tab" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12A9 9 0 1 1 12 3v9z"></path><path d="M16 8a5 5 0 0 0-4-4"></path></svg> Statistics</button>
          <button class="dp-ws-tab" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"></path><path d="m19 9-5 5-4-4-3 3"></path></svg> Trends</button>
          <button class="dp-ws-tab" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"></path><rect width="3" height="7" x="7" y="11"></rect><rect width="3" height="11" x="13" y="7"></rect></svg> Migration insights</button>
          <button class="dp-ws-tab" type="button" data-active><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2z"></path><path d="M9 3v16M15 5v16"></path></svg> Maps</button>
        </div>

        <div class="dp-map">
          <div class="dp-map-zoom">
            <button type="button" aria-label="Zoom in"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"></path></svg></button>
            <button type="button" aria-label="Zoom out"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"></path></svg></button>
          </div>
          <span class="dp-map-note">Heatmap rendered by the mapping library at runtime.</span>
        </div>
      </section>
    </div>
  </main>
</div>

/* Maps view (workspace)
   The Maps tab: a full-bleed world map with a density heatmap and zoom
   controls. The map itself is rendered by a mapping library at runtime; this
   block shows the panel, zoom controls and a heatmap-style backdrop. Reuses the
   workspace chrome (.dp-ws-*). */

.dp-map {
  position: relative;
  height: 30rem;
  overflow: hidden;
  background: var(--dp-blue-200);
}

/* A heatmap-style backdrop approximating domain density */
.dp-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 42%, rgba(239, 68, 68, 0.75) 0, rgba(239, 68, 68, 0) 12%),
    radial-gradient(circle at 30% 38%, rgba(250, 204, 21, 0.6) 0, rgba(250, 204, 21, 0) 9%),
    radial-gradient(circle at 52% 40%, rgba(239, 68, 68, 0.8) 0, rgba(239, 68, 68, 0) 16%),
    radial-gradient(circle at 58% 36%, rgba(45, 75, 255, 0.5) 0, rgba(45, 75, 255, 0) 10%),
    radial-gradient(circle at 70% 44%, rgba(239, 68, 68, 0.7) 0, rgba(239, 68, 68, 0) 13%),
    radial-gradient(circle at 47% 62%, rgba(239, 68, 68, 0.65) 0, rgba(239, 68, 68, 0) 9%),
    radial-gradient(circle at 82% 66%, rgba(250, 204, 21, 0.55) 0, rgba(250, 204, 21, 0) 8%),
    radial-gradient(circle at 40% 30%, rgba(34, 211, 238, 0.4) 0, rgba(34, 211, 238, 0) 8%);
  filter: blur(2px);
}

.dp-map-zoom {
  position: absolute;
  top: var(--dp-space-4);
  right: var(--dp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-2);
  z-index: 1;
}

.dp-map-zoom button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-full);
  background: var(--dp-surface);
  color: var(--dp-navy);
  cursor: pointer;
}

.dp-map-zoom svg { width: 1.1rem; height: 1.1rem; }

.dp-map-note {
  position: absolute;
  left: var(--dp-space-4);
  bottom: var(--dp-space-4);
  z-index: 1;
  font-size: var(--dp-text-xs);
  color: var(--dp-text-muted);
  background: rgba(255, 255, 255, 0.8);
  padding: 2px var(--dp-space-2);
  border-radius: var(--dp-radius-xs);
}

Home page

registry:block

A marketing homepage composed from site-header, hero, feature-cards, cta-band and site-footer. A template for building new pages in the Dataprovider style.

The complete web,
structured in one place

Track companies and technologies across 99% of all registered domains worldwide; every TLD, every ccTLD, refreshed monthly.

Online stores in California
13.217 12.0%

One dataset, many use cases

Put structured web data to work across your organisation.

Asset management

Keep a live inventory of every domain, subdomain and technology your organisation runs.

Read more

Online brand protection

Detect look-alike domains and infringements before they reach your customers.

Read more

Business information

Enrich company records with technographics, contact data and firmographics.

Read more

Book a free demo

And move from guesswork to data-driven decisions

  • A personalised demo, not a sales pitch
  • Completely free, zero obligations
  • 30 to 60 minutes based on your needs
AK RV MB Get your data advantage
npx shadcn@latest add https://ds.dataprovider.dev/r/home.json Registry JSON 
<!-- Home page block
     A marketing homepage composed from site-header, hero, feature-cards,
     cta-band and site-footer. Marketing theme (no data-theme). Swap the section
     content to build any new page in the Dataprovider style. -->

<div class="dp-page">
  <header class="dp-site-header">
    <nav class="dp-site-nav" aria-label="Primary">
      <a class="dp-site-logo" href="/" aria-label="Dataprovider.com">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </a>
      <ul class="dp-site-menu">
        <li><button type="button">Our data <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><button type="button">Data Access <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><button type="button">Use Cases <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/about/">Company</a></li>
      </ul>
      <div class="dp-site-actions">
        <a class="dp-site-login" href="#">Log in</a>
        <a class="dp-btn" data-variant="cta" href="/contact/">Contact</a>
      </div>
    </nav>
  </header>

  <main>
    <section class="dp-hero">
      <h1 class="dp-hero-title"><span class="light">The complete web,</span><br>structured in one place</h1>
      <p class="dp-hero-sub">Track companies and technologies across 99% of all registered domains worldwide; every TLD, every ccTLD, refreshed monthly.</p>
      <div class="dp-hero-preview">
        <div class="dp-hero-tabs" role="tablist">
          <button class="dp-hero-tab" type="button">Discover</button>
          <button class="dp-hero-tab" type="button" data-active>Map</button>
          <button class="dp-hero-tab" type="button">Analyze</button>
          <button class="dp-hero-tab" type="button">Automate</button>
        </div>
        <div class="dp-hero-stage">
          <div class="dp-hero-card">
            <div class="dp-hero-card-label">Online stores in California</div>
            <div class="dp-hero-card-row">
              <span class="dp-hero-card-val">13.217</span>
              <span class="dp-hero-card-pct">12.0%</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="dp-fsection">
      <div class="dp-fsection-head">
        <h2 class="dp-fsection-title">One dataset, many use cases</h2>
        <p class="dp-fsection-sub">Put structured web data to work across your organisation.</p>
      </div>
      <div class="dp-fc-grid">
        <article class="dp-fc">
          <span class="dp-fc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 7h-9"></path><path d="M14 17H5"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle></svg></span>
          <h3 class="dp-fc-title">Asset management</h3>
          <p class="dp-fc-desc">Keep a live inventory of every domain, subdomain and technology your organisation runs.</p>
          <a class="dp-btn" data-variant="outline" href="/cases/assets/">Read more</a>
        </article>
        <article class="dp-fc">
          <span class="dp-fc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path></svg></span>
          <h3 class="dp-fc-title">Online brand protection</h3>
          <p class="dp-fc-desc">Detect look-alike domains and infringements before they reach your customers.</p>
          <a class="dp-btn" data-variant="outline" href="/cases/brand-protection/">Read more</a>
        </article>
        <article class="dp-fc">
          <span class="dp-fc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"></path><rect width="4" height="7" x="7" y="10"></rect><rect width="4" height="12" x="15" y="5"></rect></svg></span>
          <h3 class="dp-fc-title">Business information</h3>
          <p class="dp-fc-desc">Enrich company records with technographics, contact data and firmographics.</p>
          <a class="dp-btn" data-variant="outline" href="/cases/business-information/">Read more</a>
        </article>
      </div>
    </section>

    <div class="dp-page-section">
      <section class="dp-cta-band">
        <div class="dp-cta-lead">
          <p class="dp-cta-eyebrow">Book a free demo</p>
          <h2 class="dp-cta-heading">And move from guesswork <span class="light">to data-driven decisions</span></h2>
        </div>
        <ul class="dp-cta-list">
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> A personalised demo, not a sales pitch</li>
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Completely free, zero obligations</li>
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 30 to 60 minutes based on your needs</li>
        </ul>
        <div class="dp-cta-action">
          <span class="dp-avatar-group">
            <span class="dp-avatar" data-size="sm" aria-label="Team member">AK</span>
            <span class="dp-avatar" data-size="sm" aria-label="Team member">RV</span>
            <span class="dp-avatar" data-size="sm" aria-label="Team member">MB</span>
          </span>
          <a class="dp-btn" data-variant="cta" href="/contact/">Get your data advantage <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></a>
        </div>
      </section>
    </div>
  </main>

  <footer class="dp-site-footer">
    <div class="dp-footer-inner">
      <div class="dp-footer-cols">
        <div class="dp-footer-col">
          <h4>Our data</h4>
          <ul>
            <li><a href="/our-data/domain/">Domain</a></li>
            <li><a href="/our-data/business/">Business</a></li>
            <li><a href="/our-data/technology/">Technology detection</a></li>
            <li><a href="/our-data/classifications/">Classifications</a></li>
            <li><a href="/our-data/engagement/">Engagement</a></li>
            <li><a href="/our-data/risk/">Risk</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Data Access</h4>
          <ul>
            <li><a href="/data-access/search-engine/">Search engine</a></li>
            <li><a href="/data-access/ai-navigator-mcp/">AI navigator + MCP</a></li>
            <li><a href="/data-access/dashboards/">Dashboards</a></li>
            <li><a href="/data-access/data-warehouses/">Data warehouses</a></li>
            <li><a href="/data-access/know-your-business/">Know your business</a></li>
            <li><a href="/recipes/">Recipes</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Use Cases</h4>
          <ul>
            <li><a href="/cases/assets/">Asset management</a></li>
            <li><a href="/cases/brand-protection/">Online brand protection</a></li>
            <li><a href="/cases/business-information/">Business information</a></li>
            <li><a href="/cases/registries-registrars/">Registries &amp; registrars</a></li>
            <li><a href="/cases/public/">Public sector</a></li>
            <li><a href="/cases/psp/">Payment service providers</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Company</h4>
          <ul>
            <li><a href="/about/">About us</a></li>
            <li><a href="/contact/">Contact</a></li>
            <li><a href="/crawler/">Crawler</a></li>
          </ul>
        </div>
      </div>
      <div class="dp-footer-mcp">
        <div class="dp-footer-mcp-head">MCP <span class="dp-footer-new">New</span></div>
        <div class="dp-footer-mcp-card">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color: var(--dp-navy);"><circle cx="12" cy="12" r="10"></circle></svg>
          <span class="dp-footer-mcp-label"><small>MCP available on</small><b>ChatGPT</b></span>
        </div>
        <div class="dp-footer-mcp-card">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color: #d97757;"><path d="M12 2v20M2 12h20M5 5l14 14M19 5 5 19"></path></svg>
          <span class="dp-footer-mcp-label"><small>MCP available on</small><b>Claude</b></span>
        </div>
      </div>
    </div>
  </footer>
</div>

/* Home page block
   A marketing homepage composed from site-header, hero, feature-cards, cta-band
   and site-footer. Marketing theme. */

.dp-page {
  min-height: 100%;
  background: var(--dp-bg);
}

.dp-page-section {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--dp-space-6) var(--dp-space-12);
}

Use case page

registry:block

A marketing use-case page composed from site-header, split sections, a stats band, an FAQ, a CTA band and site-footer. A second page template in the Dataprovider style.

Use case · Asset management

Every domain and technology you own, in one live inventory

Discover forgotten subdomains, track the technologies your teams run, and keep a single source of truth for your entire web estate.

1.204 assets found · 37 new this month
400M+
Domains to match against
700+
Attributes per asset
Monthly
Automatic refresh
CSV / API
Export anywhere

Continuous discovery

Find the assets you did not know you had

Match your brand and infrastructure against the full web to surface shadow IT, expired certificates and unmanaged subdomains before they become a risk.

  • Subdomain and certificate discovery
  • Ownership and hosting mapping
  • Alerts on new or changed assets
3 expired SSL certificates flagged

Asset management FAQ

How do you match assets to my organisation?
Match on brand terms, registrant details, hosting and technology fingerprints across the full dataset.
Can I get alerts on new assets?
Yes. Save a query and receive monthly alerts when new matching assets appear.

Book a free demo

And move from guesswork to data-driven decisions

  • A personalised demo, not a sales pitch
  • Completely free, zero obligations
  • 30 to 60 minutes based on your needs
AK RV MB Get your data advantage
npx shadcn@latest add https://ds.dataprovider.dev/r/use-case.json Registry JSON 
<!-- Use case page block
     A marketing use-case page (Asset management) composed from site-header,
     split sections, a stats band, an FAQ, a CTA band and site-footer. Shows how
     the same section components build a different page. Marketing theme. -->

<div style="min-height: 100%; background: var(--dp-bg);">
  <header class="dp-site-header">
    <nav class="dp-site-nav" aria-label="Primary">
      <a class="dp-site-logo" href="/" aria-label="Dataprovider.com">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </a>
      <ul class="dp-site-menu">
        <li><button type="button">Our data <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><button type="button">Data Access <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><button type="button">Use Cases <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/about/">Company</a></li>
      </ul>
      <div class="dp-site-actions">
        <a class="dp-site-login" href="#">Log in</a>
        <a class="dp-btn" data-variant="cta" href="/contact/">Contact</a>
      </div>
    </nav>
  </header>

  <main>
    <!-- Intro (split used as page hero) -->
    <section class="dp-split">
      <div class="dp-split-body">
        <p class="dp-split-eyebrow">Use case &middot; Asset management</p>
        <h1 class="dp-split-title">Every domain and technology you own, in one live inventory</h1>
        <p class="dp-split-text">Discover forgotten subdomains, track the technologies your teams run, and keep a single source of truth for your entire web estate.</p>
        <div style="display: flex; gap: var(--dp-space-4);">
          <a class="dp-btn" data-variant="cta" href="/contact/">Book a free demo</a>
          <a class="dp-btn" data-variant="outline" href="/data-access/search-engine/">See the data</a>
        </div>
      </div>
      <div class="dp-split-media">
        <div class="dp-split-media-card"><b>1.204</b> assets found &middot; <b>37</b> new this month</div>
      </div>
    </section>

    <!-- Stats -->
    <section class="dp-stats-band">
      <div class="dp-stat-big"><div class="dp-stat-big-val">400M+</div><div class="dp-stat-big-label">Domains to match against</div></div>
      <div class="dp-stat-big"><div class="dp-stat-big-val">700+</div><div class="dp-stat-big-label">Attributes per asset</div></div>
      <div class="dp-stat-big"><div class="dp-stat-big-val">Monthly</div><div class="dp-stat-big-label">Automatic refresh</div></div>
      <div class="dp-stat-big"><div class="dp-stat-big-val">CSV / API</div><div class="dp-stat-big-label">Export anywhere</div></div>
    </section>

    <!-- Reversed split -->
    <section class="dp-split" data-reverse>
      <div class="dp-split-body">
        <p class="dp-split-eyebrow">Continuous discovery</p>
        <h2 class="dp-split-title">Find the assets you did not know you had</h2>
        <p class="dp-split-text">Match your brand and infrastructure against the full web to surface shadow IT, expired certificates and unmanaged subdomains before they become a risk.</p>
        <ul class="dp-split-list">
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Subdomain and certificate discovery</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Ownership and hosting mapping</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Alerts on new or changed assets</li>
        </ul>
      </div>
      <div class="dp-split-media">
        <div class="dp-split-media-card"><b>3</b> expired SSL certificates flagged</div>
      </div>
    </section>

    <!-- FAQ -->
    <section class="dp-faq">
      <h2 class="dp-faq-title">Asset management FAQ</h2>
      <div class="dp-accordion">
        <details open>
          <summary>How do you match assets to my organisation?<svg class="dp-accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></summary>
          <div class="dp-accordion-content">Match on brand terms, registrant details, hosting and technology fingerprints across the full dataset.</div>
        </details>
        <details>
          <summary>Can I get alerts on new assets?<svg class="dp-accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></summary>
          <div class="dp-accordion-content">Yes. Save a query and receive monthly alerts when new matching assets appear.</div>
        </details>
      </div>
    </section>

    <!-- CTA -->
    <div style="max-width: 72rem; margin: 0 auto; padding: 0 var(--dp-space-6) var(--dp-space-12);">
      <section class="dp-cta-band">
        <div class="dp-cta-lead">
          <p class="dp-cta-eyebrow">Book a free demo</p>
          <h2 class="dp-cta-heading">And move from guesswork <span class="light">to data-driven decisions</span></h2>
        </div>
        <ul class="dp-cta-list">
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> A personalised demo, not a sales pitch</li>
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Completely free, zero obligations</li>
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 30 to 60 minutes based on your needs</li>
        </ul>
        <div class="dp-cta-action">
          <span class="dp-avatar-group">
            <span class="dp-avatar" data-size="sm" aria-label="Team member">AK</span>
            <span class="dp-avatar" data-size="sm" aria-label="Team member">RV</span>
            <span class="dp-avatar" data-size="sm" aria-label="Team member">MB</span>
          </span>
          <a class="dp-btn" data-variant="cta" href="/contact/">Get your data advantage <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></a>
        </div>
      </section>
    </div>
  </main>

  <footer class="dp-site-footer">
    <div class="dp-footer-inner">
      <div class="dp-footer-cols">
        <div class="dp-footer-col">
          <h4>Our data</h4>
          <ul>
            <li><a href="/our-data/domain/">Domain</a></li>
            <li><a href="/our-data/business/">Business</a></li>
            <li><a href="/our-data/technology/">Technology detection</a></li>
            <li><a href="/our-data/risk/">Risk</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Data Access</h4>
          <ul>
            <li><a href="/data-access/search-engine/">Search engine</a></li>
            <li><a href="/data-access/ai-navigator-mcp/">AI navigator + MCP</a></li>
            <li><a href="/data-access/dashboards/">Dashboards</a></li>
            <li><a href="/recipes/">Recipes</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Use Cases</h4>
          <ul>
            <li><a href="/cases/assets/">Asset management</a></li>
            <li><a href="/cases/brand-protection/">Online brand protection</a></li>
            <li><a href="/cases/business-information/">Business information</a></li>
            <li><a href="/cases/public/">Public sector</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Company</h4>
          <ul>
            <li><a href="/about/">About us</a></li>
            <li><a href="/contact/">Contact</a></li>
            <li><a href="/crawler/">Crawler</a></li>
          </ul>
        </div>
      </div>
      <div class="dp-footer-mcp">
        <div class="dp-footer-mcp-head">MCP <span class="dp-footer-new">New</span></div>
        <div class="dp-footer-mcp-card">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color: var(--dp-navy);"><circle cx="12" cy="12" r="10"></circle></svg>
          <span class="dp-footer-mcp-label"><small>MCP available on</small><b>ChatGPT</b></span>
        </div>
        <div class="dp-footer-mcp-card">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color: #d97757;"><path d="M12 2v20M2 12h20M5 5l14 14M19 5 5 19"></path></svg>
          <span class="dp-footer-mcp-label"><small>MCP available on</small><b>Claude</b></span>
        </div>
      </div>
    </div>
  </footer>
</div>

About page

registry:block

A marketing company page composed from a hero, a statement, a logo cloud, a split section, a timeline, a team grid, a CTA band and site-footer.

About us

Founded in the Netherlands, structuring the world

Headquartered in the Netherlands, we combine European roots with global reach, fully independent and free from external investors.

Founded in
2012
Location
The Netherlands
Employees
30+

The web is the world's greatest source of information chaos.

It started in 2009, when Christian Branbergen, Gijs Barends and Marc Noël set out to do what seemed almost impossible: summarise and structure the entire web.

What began as a small team of data enthusiasts has grown into a trusted partner for organisations like PayPal, GoDaddy and MarkMonitor. We collect and structure all our data ourselves, running a powerful hosting cluster in the Netherlands.

Trusted by the most data-driven enterprises

Meta PayPal GoDaddy M Science Dun & Bradstreet Nominet
Verified search engine at Cloudflare

Dutch datastructurers

Structure is our nature

From the air, the Netherlands looks like a blueprint: every field, road and canal perfectly measured. We have always believed in order and clarity, so it is no coincidence that we set out to bring the same structure to the internet.

  • Transparent, identifiable crawlers
  • We respect robots.txt
  • Data collected and structured in house

  1. 2012

    Dataprovider.com starts

    After three years of development, Dataprovider.com launches with one mission: make the internet searchable, measurable and explainable.

  2. 2017

    Global monthly coverage

    The platform expands to crawl the entire web, covering hundreds of millions of domains every month.

  3. 2023

    SSL Catalog and warehouse access

    We launch the largest continuously updated SSL dataset and open direct access through Snowflake and Google Cloud.

  4. 2024

    Quad9 Connection Index

    In partnership with Quad9 we introduce the Connection Index, a signal measuring real user engagement across the web.

Team

Meet our leadership team

Co-founder

Marc Noël

Co-founder

Christian Branbergen

Co-founder

Gijs Barends

Privacy officer

Martin Plak

Legal counsel

Rutger Middendorf

Book a free demo

And move from guesswork to data-driven decisions

  • A personalised demo, not a sales pitch
  • Completely free, zero obligations
  • 30 to 60 minutes based on your needs
AK RV MB Get your data advantage
npx shadcn@latest add https://ds.dataprovider.dev/r/about.json Registry JSON 
<!-- About page block
     A marketing company page composed from a hero with an inline stat row and
     photo strip, a statement, a logo cloud, a split section, a timeline, a
     team grid, a CTA band and site-footer. Shows the same section components
     building a company page. Marketing theme. -->

<div style="min-height: 100%; background: var(--dp-bg);">
  <header class="dp-site-header">
    <nav class="dp-site-nav" aria-label="Primary">
      <a class="dp-site-logo" href="/" aria-label="Dataprovider.com">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </a>
      <ul class="dp-site-menu">
        <li><button type="button">Our data <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><button type="button">Data Access <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><button type="button">Use Cases <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/about/">Company</a></li>
      </ul>
      <div class="dp-site-actions">
        <a class="dp-site-login" href="#">Log in</a>
        <a class="dp-btn" data-variant="cta" href="/contact/">Contact</a>
      </div>
    </nav>
  </header>

  <main>
    <!-- Hero with inline stat row and photo strip -->
    <section class="dp-about-hero">
      <p class="dp-about-eyebrow">About us</p>
      <h1 class="dp-about-title">Founded in the Netherlands, <span class="bold">structuring the world</span></h1>
      <p class="dp-about-sub">Headquartered in the Netherlands, we combine European roots with global reach, fully independent and free from external investors.</p>
      <dl class="dp-about-stats">
        <div><dt>Founded in</dt><dd>2012</dd></div>
        <div><dt>Location</dt><dd>The Netherlands</dd></div>
        <div><dt>Employees</dt><dd>30+</dd></div>
      </dl>
      <div class="dp-about-gallery" aria-hidden="true">
        <span class="dp-about-tile" data-tint="a"></span>
        <span class="dp-about-tile" data-tint="b"></span>
        <span class="dp-about-tile" data-tint="c"></span>
        <span class="dp-about-tile" data-tint="d"></span>
        <span class="dp-about-tile" data-tint="e"></span>
      </div>
    </section>

    <!-- Statement -->
    <section class="dp-statement">
      <h2 class="dp-statement-lead">The web is the world's greatest source of information chaos.</h2>
      <div class="dp-statement-body">
        <p>It started in 2009, when Christian Branbergen, Gijs Barends and Marc Noël set out to do what seemed almost impossible: summarise and structure the entire web.</p>
        <p>What began as a small team of data enthusiasts has grown into a trusted partner for organisations like PayPal, GoDaddy and MarkMonitor. We collect and structure all our data ourselves, running a powerful hosting cluster in the Netherlands.</p>
      </div>
    </section>

    <!-- Logo cloud -->
    <section class="dp-logos">
      <p class="dp-logos-label">Trusted by the most data-driven enterprises</p>
      <div class="dp-logos-row">
        <span class="dp-logo-item">Meta</span>
        <span class="dp-logo-item">PayPal</span>
        <span class="dp-logo-item">GoDaddy</span>
        <span class="dp-logo-item">M Science</span>
        <span class="dp-logo-item">Dun &amp; Bradstreet</span>
        <span class="dp-logo-item">Nominet</span>
      </div>
    </section>

    <!-- Split -->
    <section class="dp-split">
      <div class="dp-split-media">
        <div class="dp-split-media-card"><b>Verified</b> search engine at Cloudflare</div>
      </div>
      <div class="dp-split-body">
        <p class="dp-split-eyebrow">Dutch datastructurers</p>
        <h2 class="dp-split-title">Structure is our nature</h2>
        <p class="dp-split-text">From the air, the Netherlands looks like a blueprint: every field, road and canal perfectly measured. We have always believed in order and clarity, so it is no coincidence that we set out to bring the same structure to the internet.</p>
        <ul class="dp-split-list">
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Transparent, identifiable crawlers</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> We respect robots.txt</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Data collected and structured in house</li>
        </ul>
      </div>
    </section>

    <!-- Timeline -->
    <section class="dp-timeline">
      <ol class="dp-timeline-track">
        <li class="dp-timeline-item">
          <div class="dp-timeline-marker" aria-hidden="true"></div>
          <div class="dp-timeline-card">
            <p class="dp-timeline-year">2012</p>
            <h3 class="dp-timeline-heading">Dataprovider.com starts</h3>
            <p class="dp-timeline-text">After three years of development, Dataprovider.com launches with one mission: make the internet searchable, measurable and explainable.</p>
          </div>
        </li>
        <li class="dp-timeline-item">
          <div class="dp-timeline-marker" aria-hidden="true"></div>
          <div class="dp-timeline-card">
            <p class="dp-timeline-year">2017</p>
            <h3 class="dp-timeline-heading">Global monthly coverage</h3>
            <p class="dp-timeline-text">The platform expands to crawl the entire web, covering hundreds of millions of domains every month.</p>
          </div>
        </li>
        <li class="dp-timeline-item">
          <div class="dp-timeline-marker" aria-hidden="true"></div>
          <div class="dp-timeline-card">
            <p class="dp-timeline-year">2023</p>
            <h3 class="dp-timeline-heading">SSL Catalog and warehouse access</h3>
            <p class="dp-timeline-text">We launch the largest continuously updated SSL dataset and open direct access through Snowflake and Google Cloud.</p>
          </div>
        </li>
        <li class="dp-timeline-item">
          <div class="dp-timeline-marker" aria-hidden="true"></div>
          <div class="dp-timeline-card">
            <p class="dp-timeline-year">2024</p>
            <h3 class="dp-timeline-heading">Quad9 Connection Index</h3>
            <p class="dp-timeline-text">In partnership with Quad9 we introduce the Connection Index, a signal measuring real user engagement across the web.</p>
          </div>
        </li>
      </ol>
    </section>

    <!-- Team -->
    <section class="dp-team">
      <p class="dp-team-eyebrow">Team</p>
      <h2 class="dp-team-title">Meet our leadership team</h2>
      <div class="dp-team-grid">
        <article class="dp-team-card">
          <div class="dp-team-photo" data-initials="MN" aria-hidden="true"></div>
          <p class="dp-team-role">Co-founder</p>
          <div class="dp-team-name-row">
            <h3 class="dp-team-name">Marc Noël</h3>
            <a class="dp-team-social" href="https://www.linkedin.com/company/dataprovidercom/" aria-label="Marc Noël on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"></path></svg></a>
          </div>
        </article>
        <article class="dp-team-card">
          <div class="dp-team-photo" data-initials="CB" aria-hidden="true"></div>
          <p class="dp-team-role">Co-founder</p>
          <div class="dp-team-name-row">
            <h3 class="dp-team-name">Christian Branbergen</h3>
            <a class="dp-team-social" href="https://www.linkedin.com/company/dataprovidercom/" aria-label="Christian Branbergen on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"></path></svg></a>
          </div>
        </article>
        <article class="dp-team-card">
          <div class="dp-team-photo" data-initials="GB" aria-hidden="true"></div>
          <p class="dp-team-role">Co-founder</p>
          <div class="dp-team-name-row">
            <h3 class="dp-team-name">Gijs Barends</h3>
            <a class="dp-team-social" href="https://www.linkedin.com/company/dataprovidercom/" aria-label="Gijs Barends on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"></path></svg></a>
          </div>
        </article>
        <article class="dp-team-card">
          <div class="dp-team-photo" data-initials="MP" aria-hidden="true"></div>
          <p class="dp-team-role">Privacy officer</p>
          <div class="dp-team-name-row">
            <h3 class="dp-team-name">Martin Plak</h3>
            <a class="dp-team-social" href="https://www.linkedin.com/company/dataprovidercom/" aria-label="Martin Plak on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"></path></svg></a>
          </div>
        </article>
        <article class="dp-team-card">
          <div class="dp-team-photo" data-initials="RM" aria-hidden="true"></div>
          <p class="dp-team-role">Legal counsel</p>
          <div class="dp-team-name-row">
            <h3 class="dp-team-name">Rutger Middendorf</h3>
            <a class="dp-team-social" href="https://www.linkedin.com/company/dataprovidercom/" aria-label="Rutger Middendorf on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"></path></svg></a>
          </div>
        </article>
      </div>
    </section>

    <!-- CTA -->
    <div style="max-width: 72rem; margin: 0 auto; padding: 0 var(--dp-space-6) var(--dp-space-12);">
      <section class="dp-cta-band">
        <div class="dp-cta-lead">
          <p class="dp-cta-eyebrow">Book a free demo</p>
          <h2 class="dp-cta-heading">And move from guesswork <span class="light">to data-driven decisions</span></h2>
        </div>
        <ul class="dp-cta-list">
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> A personalised demo, not a sales pitch</li>
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Completely free, zero obligations</li>
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 30 to 60 minutes based on your needs</li>
        </ul>
        <div class="dp-cta-action">
          <span class="dp-avatar-group">
            <span class="dp-avatar" data-size="sm" aria-label="Team member">AK</span>
            <span class="dp-avatar" data-size="sm" aria-label="Team member">RV</span>
            <span class="dp-avatar" data-size="sm" aria-label="Team member">MB</span>
          </span>
          <a class="dp-btn" data-variant="cta" href="/contact/">Get your data advantage <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></a>
        </div>
      </section>
    </div>
  </main>

  <footer class="dp-site-footer">
    <div class="dp-footer-inner">
      <div class="dp-footer-cols">
        <div class="dp-footer-col">
          <h4>Our data</h4>
          <ul>
            <li><a href="/our-data/domain/">Domain</a></li>
            <li><a href="/our-data/business/">Business</a></li>
            <li><a href="/our-data/technology/">Technology detection</a></li>
            <li><a href="/our-data/risk/">Risk</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Data Access</h4>
          <ul>
            <li><a href="/data-access/search-engine/">Search engine</a></li>
            <li><a href="/data-access/ai-navigator-mcp/">AI navigator + MCP</a></li>
            <li><a href="/data-access/dashboards/">Dashboards</a></li>
            <li><a href="/recipes/">Recipes</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Use Cases</h4>
          <ul>
            <li><a href="/cases/assets/">Asset management</a></li>
            <li><a href="/cases/brand-protection/">Online brand protection</a></li>
            <li><a href="/cases/business-information/">Business information</a></li>
            <li><a href="/cases/public/">Public sector</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Company</h4>
          <ul>
            <li><a href="/about/">About us</a></li>
            <li><a href="/contact/">Contact</a></li>
            <li><a href="/crawler/">Crawler</a></li>
          </ul>
        </div>
      </div>
      <div class="dp-footer-mcp">
        <div class="dp-footer-mcp-head">MCP <span class="dp-footer-new">New</span></div>
        <div class="dp-footer-mcp-card">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color: var(--dp-navy);"><circle cx="12" cy="12" r="10"></circle></svg>
          <span class="dp-footer-mcp-label"><small>MCP available on</small><b>ChatGPT</b></span>
        </div>
        <div class="dp-footer-mcp-card">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color: #d97757;"><path d="M12 2v20M2 12h20M5 5l14 14M19 5 5 19"></path></svg>
          <span class="dp-footer-mcp-label"><small>MCP available on</small><b>Claude</b></span>
        </div>
      </div>
    </div>
  </footer>
</div>

/* About page
   Page-specific styles for the About hero (eyebrow, two-tone title, inline
   stat row and photo strip). Every other section on the page reuses its own
   component CSS. Colour and type from tokens.css (marketing theme). */

.dp-about-hero {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6) var(--dp-space-8);
}

.dp-about-eyebrow {
  margin: 0 0 var(--dp-space-4);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-link);
}

.dp-about-title {
  max-width: 20ch;
  margin: 0 0 var(--dp-space-5);
  font-size: var(--dp-text-5xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-light);
  color: var(--dp-navy);
}

.dp-about-title .bold { font-weight: var(--dp-weight-bold); }

.dp-about-sub {
  max-width: 46ch;
  margin: 0 0 var(--dp-space-8);
  font-size: var(--dp-text-lg);
  color: var(--dp-text-muted);
}

.dp-about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-10);
  margin: 0 0 var(--dp-space-10);
  padding: 0;
}

.dp-about-stats div {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-1);
}

.dp-about-stats dt {
  font-size: var(--dp-text-xs);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-text-muted);
}

.dp-about-stats dd {
  margin: 0;
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-about-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--dp-space-4);
}

@media (max-width: 720px) { .dp-about-gallery { grid-template-columns: repeat(2, 1fr); } }

.dp-about-tile {
  aspect-ratio: 4 / 5;
  border-radius: var(--dp-radius-lg);
  background: linear-gradient(135deg, var(--dp-blue-200), var(--dp-blue-100));
}

.dp-about-tile[data-tint="b"] { background: linear-gradient(135deg, var(--dp-navy), var(--dp-blue-700)); }
.dp-about-tile[data-tint="c"] { background: linear-gradient(135deg, var(--dp-gold-300), var(--dp-gold-50)); }
.dp-about-tile[data-tint="d"] { background: linear-gradient(135deg, var(--dp-blue-100), var(--dp-blue-200)); }
.dp-about-tile[data-tint="e"] { background: linear-gradient(135deg, var(--dp-neutral-200), var(--dp-neutral-100)); }

Contact page

registry:block

A marketing contact page composed from site-header, the contact-form section, a logo cloud, a CTA band and site-footer.

Contact

Your competitive edge awaits Book a personalised demo

Trusted by the most data-driven enterprises

Meta PayPal GoDaddy M Science Dun & Bradstreet Nominet

Book a free demo

And move from guesswork to data-driven decisions

  • A personalised demo, not a sales pitch
  • Completely free, zero obligations
  • 30 to 60 minutes based on your needs
AK RV MB Get your data advantage
npx shadcn@latest add https://ds.dataprovider.dev/r/contact.json Registry JSON 
<!-- Contact page block
     A marketing contact page composed from site-header, the contact-form
     section, a logo cloud, a CTA band and site-footer. Marketing theme. -->

<div style="min-height: 100%; background: var(--dp-bg);">
  <header class="dp-site-header">
    <nav class="dp-site-nav" aria-label="Primary">
      <a class="dp-site-logo" href="/" aria-label="Dataprovider.com">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </a>
      <ul class="dp-site-menu">
        <li><button type="button">Our data <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><button type="button">Data Access <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><button type="button">Use Cases <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/about/">Company</a></li>
      </ul>
      <div class="dp-site-actions">
        <a class="dp-site-login" href="#">Log in</a>
        <a class="dp-btn" data-variant="cta" href="/contact/">Contact</a>
      </div>
    </nav>
  </header>

  <main>
    <!-- Contact form -->
    <section class="dp-cform">
      <div class="dp-cform-head">
        <p class="dp-cform-eyebrow">Contact</p>
        <h2 class="dp-cform-title">Your competitive edge awaits <span class="light">Book a personalised demo</span></h2>
      </div>

      <div class="dp-cform-panel">
        <form class="dp-cform-form" action="#" method="post">
          <div class="dp-cform-row">
            <div class="dp-field">
              <label class="dp-field-label" for="cf-first">First name</label>
              <input class="dp-field-input" id="cf-first" name="first_name" type="text" autocomplete="given-name">
            </div>
            <div class="dp-field">
              <label class="dp-field-label" for="cf-last">Last name</label>
              <input class="dp-field-input" id="cf-last" name="last_name" type="text" autocomplete="family-name">
            </div>
          </div>
          <div class="dp-field">
            <label class="dp-field-label" for="cf-email">Work email</label>
            <input class="dp-field-input" id="cf-email" name="email" type="email" autocomplete="email">
          </div>
          <div class="dp-field">
            <label class="dp-field-label" for="cf-company">Company or organisation name</label>
            <input class="dp-field-input" id="cf-company" name="company" type="text" autocomplete="organization">
          </div>
          <div class="dp-field">
            <label class="dp-field-label" for="cf-why">Why would you like to try Dataprovider.com?</label>
            <textarea class="dp-field-input" id="cf-why" name="reason" rows="3"></textarea>
          </div>
          <div class="dp-field">
            <label class="dp-field-label" for="cf-source">How did you hear about us?</label>
            <select class="dp-field-input" id="cf-source" name="source">
              <option value="">Please select</option>
              <option value="search">Search engine</option>
              <option value="social">Social media</option>
              <option value="referral">Referral</option>
              <option value="event">Event or conference</option>
              <option value="other">Other</option>
            </select>
          </div>
          <label class="dp-cform-check">
            <input type="checkbox" name="newsletter" value="yes">
            <span>Subscribe to our newsletter.</span>
          </label>
          <button class="dp-btn" data-variant="cta" type="submit">Request a free demo</button>
        </form>

        <aside class="dp-cform-aside">
          <h3 class="dp-cform-aside-title">What can you expect?</h3>
          <ul class="dp-cform-list">
            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> A personalised demo, not a sales pitch</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Completely free, zero obligations</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 30 to 60 minutes based on your needs</li>
          </ul>
          <span class="dp-avatar-group">
            <span class="dp-avatar" data-size="sm" aria-label="Team member">AK</span>
            <span class="dp-avatar" data-size="sm" aria-label="Team member">RV</span>
            <span class="dp-avatar" data-size="sm" aria-label="Team member">MB</span>
          </span>
          <div class="dp-cform-locations">
            <p class="dp-cform-loc-label">Locations</p>
            <div class="dp-cform-loc-grid">
              <address class="dp-cform-loc">
                <span class="dp-cform-loc-name">Operations</span>
                Van Elmptstraat 10<br>
                9723 ZL Groningen<br>
                The Netherlands
              </address>
              <address class="dp-cform-loc">
                <span class="dp-cform-loc-name">International</span>
                Weesperplein 4b<br>
                1018 XA Amsterdam<br>
                The Netherlands
              </address>
            </div>
          </div>
        </aside>
      </div>
    </section>

    <!-- Logo cloud -->
    <section class="dp-logos">
      <p class="dp-logos-label">Trusted by the most data-driven enterprises</p>
      <div class="dp-logos-row">
        <span class="dp-logo-item">Meta</span>
        <span class="dp-logo-item">PayPal</span>
        <span class="dp-logo-item">GoDaddy</span>
        <span class="dp-logo-item">M Science</span>
        <span class="dp-logo-item">Dun &amp; Bradstreet</span>
        <span class="dp-logo-item">Nominet</span>
      </div>
    </section>

    <!-- CTA -->
    <div style="max-width: 72rem; margin: 0 auto; padding: 0 var(--dp-space-6) var(--dp-space-12);">
      <section class="dp-cta-band">
        <div class="dp-cta-lead">
          <p class="dp-cta-eyebrow">Book a free demo</p>
          <h2 class="dp-cta-heading">And move from guesswork <span class="light">to data-driven decisions</span></h2>
        </div>
        <ul class="dp-cta-list">
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> A personalised demo, not a sales pitch</li>
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Completely free, zero obligations</li>
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 30 to 60 minutes based on your needs</li>
        </ul>
        <div class="dp-cta-action">
          <span class="dp-avatar-group">
            <span class="dp-avatar" data-size="sm" aria-label="Team member">AK</span>
            <span class="dp-avatar" data-size="sm" aria-label="Team member">RV</span>
            <span class="dp-avatar" data-size="sm" aria-label="Team member">MB</span>
          </span>
          <a class="dp-btn" data-variant="cta" href="/contact/">Get your data advantage <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></a>
        </div>
      </section>
    </div>
  </main>

  <footer class="dp-site-footer">
    <div class="dp-footer-inner">
      <div class="dp-footer-cols">
        <div class="dp-footer-col">
          <h4>Our data</h4>
          <ul>
            <li><a href="/our-data/domain/">Domain</a></li>
            <li><a href="/our-data/business/">Business</a></li>
            <li><a href="/our-data/technology/">Technology detection</a></li>
            <li><a href="/our-data/risk/">Risk</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Data Access</h4>
          <ul>
            <li><a href="/data-access/search-engine/">Search engine</a></li>
            <li><a href="/data-access/ai-navigator-mcp/">AI navigator + MCP</a></li>
            <li><a href="/data-access/dashboards/">Dashboards</a></li>
            <li><a href="/recipes/">Recipes</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Use Cases</h4>
          <ul>
            <li><a href="/cases/assets/">Asset management</a></li>
            <li><a href="/cases/brand-protection/">Online brand protection</a></li>
            <li><a href="/cases/business-information/">Business information</a></li>
            <li><a href="/cases/public/">Public sector</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Company</h4>
          <ul>
            <li><a href="/about/">About us</a></li>
            <li><a href="/contact/">Contact</a></li>
            <li><a href="/crawler/">Crawler</a></li>
          </ul>
        </div>
      </div>
      <div class="dp-footer-mcp">
        <div class="dp-footer-mcp-head">MCP <span class="dp-footer-new">New</span></div>
        <div class="dp-footer-mcp-card">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color: var(--dp-navy);"><circle cx="12" cy="12" r="10"></circle></svg>
          <span class="dp-footer-mcp-label"><small>MCP available on</small><b>ChatGPT</b></span>
        </div>
        <div class="dp-footer-mcp-card">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color: #d97757;"><path d="M12 2v20M2 12h20M5 5l14 14M19 5 5 19"></path></svg>
          <span class="dp-footer-mcp-label"><small>MCP available on</small><b>Claude</b></span>
        </div>
      </div>
    </div>
  </footer>
</div>

Data product page

registry:block

A marketing product page (Domain data) composed from a split hero, a statement, a feature-cards grid, a reversed split, a stats band, a CTA band and site-footer. The dominant page template on the site.

Our data · Domain

Start with a domain, discover the business behind it

Every domain is a starting point. Resolve it to the company, technology, contact details and risk signals behind it, across the entire web.

example.com resolved to 42 data points

Structuring the web: turning chaos into clarity.

We crawl every registered domain worldwide and rebuild the full dataset every month, so the picture you work with is complete and current.

Each domain carries more than 700 structured attributes, from hosting and technology to company details and engagement signals, all linked back to a single record.

Insights from every domain

One record ties together everything the web reveals about a business.

Company details

Names, registration numbers, contact data and firmographics resolved from the domain.

Read more

Technology stack

Platforms, payment providers, analytics and hosting detected across the site.

Read more

Risk signals

Certificate health, look-alike domains and other indicators for compliance teams.

Read more

From detection to context

Not just what a site runs, but what it means

Combine raw detections with classifications and history to answer the questions that matter: who owns this, what do they sell, and how is it changing.

  • Industry and product classifications
  • Historical change tracking
  • Ownership and hosting links
Shopify detected · retail · +2.1% this month
400M+
Domains tracked
700+
Attributes per domain
Monthly
Full dataset refresh
CSV / API
Export anywhere

Book a free demo

And move from guesswork to data-driven decisions

  • A personalised demo, not a sales pitch
  • Completely free, zero obligations
  • 30 to 60 minutes based on your needs
AK RV MB Get your data advantage
npx shadcn@latest add https://ds.dataprovider.dev/r/data-product.json Registry JSON 
<!-- Data product page block
     A marketing product page (Domain data) composed from site-header, a split
     hero, a statement, a feature-cards grid, a reversed split, a stats band, a
     CTA band and site-footer. This is the dominant page template on the site:
     every "Our data" and "Data access" page follows the same skeleton.
     Marketing theme. -->

<div style="min-height: 100%; background: var(--dp-bg);">
  <header class="dp-site-header">
    <nav class="dp-site-nav" aria-label="Primary">
      <a class="dp-site-logo" href="/" aria-label="Dataprovider.com">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </a>
      <ul class="dp-site-menu">
        <li><button type="button">Our data <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><button type="button">Data Access <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><button type="button">Use Cases <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/about/">Company</a></li>
      </ul>
      <div class="dp-site-actions">
        <a class="dp-site-login" href="#">Log in</a>
        <a class="dp-btn" data-variant="cta" href="/contact/">Contact</a>
      </div>
    </nav>
  </header>

  <main>
    <!-- Hero -->
    <section class="dp-split">
      <div class="dp-split-body">
        <p class="dp-split-eyebrow">Our data &middot; Domain</p>
        <h1 class="dp-split-title">Start with a domain, discover the business behind it</h1>
        <p class="dp-split-text">Every domain is a starting point. Resolve it to the company, technology, contact details and risk signals behind it, across the entire web.</p>
        <div style="display: flex; gap: var(--dp-space-4);">
          <a class="dp-btn" data-variant="cta" href="/contact/">Book a free demo</a>
          <a class="dp-btn" data-variant="outline" href="/data-access/search-engine/">See the data</a>
        </div>
      </div>
      <div class="dp-split-media">
        <div class="dp-split-media-card"><b>example.com</b> resolved to 42 data points</div>
      </div>
    </section>

    <!-- Concept statement -->
    <section class="dp-statement">
      <h2 class="dp-statement-lead">Structuring the web: turning chaos into clarity.</h2>
      <div class="dp-statement-body">
        <p>We crawl every registered domain worldwide and rebuild the full dataset every month, so the picture you work with is complete and current.</p>
        <p>Each domain carries more than 700 structured attributes, from hosting and technology to company details and engagement signals, all linked back to a single record.</p>
      </div>
    </section>

    <!-- Feature grid -->
    <section class="dp-fsection">
      <div class="dp-fsection-head">
        <h2 class="dp-fsection-title">Insights from every domain</h2>
        <p class="dp-fsection-sub">One record ties together everything the web reveals about a business.</p>
      </div>
      <div class="dp-fc-grid">
        <article class="dp-fc">
          <span class="dp-fc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"></path><rect width="4" height="7" x="7" y="10"></rect><rect width="4" height="12" x="15" y="5"></rect></svg></span>
          <h3 class="dp-fc-title">Company details</h3>
          <p class="dp-fc-desc">Names, registration numbers, contact data and firmographics resolved from the domain.</p>
          <a class="dp-btn" data-variant="outline" href="/our-data/business/">Read more</a>
        </article>
        <article class="dp-fc">
          <span class="dp-fc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 7h-9"></path><path d="M14 17H5"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle></svg></span>
          <h3 class="dp-fc-title">Technology stack</h3>
          <p class="dp-fc-desc">Platforms, payment providers, analytics and hosting detected across the site.</p>
          <a class="dp-btn" data-variant="outline" href="/our-data/technology/">Read more</a>
        </article>
        <article class="dp-fc">
          <span class="dp-fc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path></svg></span>
          <h3 class="dp-fc-title">Risk signals</h3>
          <p class="dp-fc-desc">Certificate health, look-alike domains and other indicators for compliance teams.</p>
          <a class="dp-btn" data-variant="outline" href="/our-data/risk/">Read more</a>
        </article>
      </div>
    </section>

    <!-- Detail split -->
    <section class="dp-split" data-reverse>
      <div class="dp-split-body">
        <p class="dp-split-eyebrow">From detection to context</p>
        <h2 class="dp-split-title">Not just what a site runs, but what it means</h2>
        <p class="dp-split-text">Combine raw detections with classifications and history to answer the questions that matter: who owns this, what do they sell, and how is it changing.</p>
        <ul class="dp-split-list">
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Industry and product classifications</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Historical change tracking</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Ownership and hosting links</li>
        </ul>
      </div>
      <div class="dp-split-media">
        <div class="dp-split-media-card"><b>Shopify</b> detected &middot; retail &middot; <b>+2.1%</b> this month</div>
      </div>
    </section>

    <!-- Stats -->
    <section class="dp-stats-band">
      <div class="dp-stat-big"><div class="dp-stat-big-val">400M+</div><div class="dp-stat-big-label">Domains tracked</div></div>
      <div class="dp-stat-big"><div class="dp-stat-big-val">700+</div><div class="dp-stat-big-label">Attributes per domain</div></div>
      <div class="dp-stat-big"><div class="dp-stat-big-val">Monthly</div><div class="dp-stat-big-label">Full dataset refresh</div></div>
      <div class="dp-stat-big"><div class="dp-stat-big-val">CSV / API</div><div class="dp-stat-big-label">Export anywhere</div></div>
    </section>

    <!-- CTA -->
    <div style="max-width: 72rem; margin: 0 auto; padding: 0 var(--dp-space-6) var(--dp-space-12);">
      <section class="dp-cta-band">
        <div class="dp-cta-lead">
          <p class="dp-cta-eyebrow">Book a free demo</p>
          <h2 class="dp-cta-heading">And move from guesswork <span class="light">to data-driven decisions</span></h2>
        </div>
        <ul class="dp-cta-list">
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> A personalised demo, not a sales pitch</li>
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Completely free, zero obligations</li>
          <li class="dp-cta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 30 to 60 minutes based on your needs</li>
        </ul>
        <div class="dp-cta-action">
          <span class="dp-avatar-group">
            <span class="dp-avatar" data-size="sm" aria-label="Team member">AK</span>
            <span class="dp-avatar" data-size="sm" aria-label="Team member">RV</span>
            <span class="dp-avatar" data-size="sm" aria-label="Team member">MB</span>
          </span>
          <a class="dp-btn" data-variant="cta" href="/contact/">Get your data advantage <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></a>
        </div>
      </section>
    </div>
  </main>

  <footer class="dp-site-footer">
    <div class="dp-footer-inner">
      <div class="dp-footer-cols">
        <div class="dp-footer-col">
          <h4>Our data</h4>
          <ul>
            <li><a href="/our-data/domain/">Domain</a></li>
            <li><a href="/our-data/business/">Business</a></li>
            <li><a href="/our-data/technology/">Technology detection</a></li>
            <li><a href="/our-data/risk/">Risk</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Data Access</h4>
          <ul>
            <li><a href="/data-access/search-engine/">Search engine</a></li>
            <li><a href="/data-access/ai-navigator-mcp/">AI navigator + MCP</a></li>
            <li><a href="/data-access/dashboards/">Dashboards</a></li>
            <li><a href="/recipes/">Recipes</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Use Cases</h4>
          <ul>
            <li><a href="/cases/assets/">Asset management</a></li>
            <li><a href="/cases/brand-protection/">Online brand protection</a></li>
            <li><a href="/cases/business-information/">Business information</a></li>
            <li><a href="/cases/public/">Public sector</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Company</h4>
          <ul>
            <li><a href="/about/">About us</a></li>
            <li><a href="/contact/">Contact</a></li>
            <li><a href="/crawler/">Crawler</a></li>
          </ul>
        </div>
      </div>
      <div class="dp-footer-mcp">
        <div class="dp-footer-mcp-head">MCP <span class="dp-footer-new">New</span></div>
        <div class="dp-footer-mcp-card">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color: var(--dp-navy);"><circle cx="12" cy="12" r="10"></circle></svg>
          <span class="dp-footer-mcp-label"><small>MCP available on</small><b>ChatGPT</b></span>
        </div>
        <div class="dp-footer-mcp-card">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color: #d97757;"><path d="M12 2v20M2 12h20M5 5l14 14M19 5 5 19"></path></svg>
          <span class="dp-footer-mcp-label"><small>MCP available on</small><b>Claude</b></span>
        </div>
      </div>
    </div>
  </footer>
</div>

Blog page

registry:block

A marketing blog index composed from site-header, a hero with a tab bar, category filter chips, the blog-grid article cards, a newsletter section and site-footer.

Web data insights that drive action

Articles, research and product news from the team structuring the web.

Articles Videos Press

Reading the SaaS to AI transition through web data

Mathijs Baas29 days ago

Getting started with the Dataprovider MCP: let AI query 350 million domains for you

Gijs Barends2 months ago

Cloudflare hides the hosting company. We found it anyway.

Christian Branbergen3 months ago

Hidden prompts in HTML: the invisible threat exploiting AI browsers

Lucia Baldassini6 months ago

How we talk to a billion records with our AI Navigator

Tim Kreutz7 months ago

Websites per capita: how many websites does each EU country have per 1,000 inhabitants?

Gijs Barends8 months ago

Newsletter

Subscribe to get monthly web data insights

What can you expect?

  • The latest tech news
  • Exclusive insights from data experts
  • One email a month, no spam
npx shadcn@latest add https://ds.dataprovider.dev/r/blog.json Registry JSON 
<!-- Blog page block
     A marketing blog index composed from site-header, a hero with a tab bar,
     a category filter chip row, the blog-grid article cards, a newsletter
     section and site-footer. Marketing theme. -->

<div style="min-height: 100%; background: var(--dp-bg);">
  <header class="dp-site-header">
    <nav class="dp-site-nav" aria-label="Primary">
      <a class="dp-site-logo" href="/" aria-label="Dataprovider.com">
        <svg viewBox="0 0 294 82" role="img" aria-label="Dataprovider.com"><g fill="currentColor"><path d="M121.52.73h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.39-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM157.17.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L150.8.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM162.08.7h18.84v4.85h-6.34v19.64h-6.13V5.55h-6.37zM192.16.73l9.01 24.45h-6.51l-1.21-3.91h-9.01l-1.21 3.91h-6.51L185.79.73zm-3.29 5.82c-.31 1.25-.66 2.53-1 3.78-.52 1.84-1.45 4.71-2.01 6.55h6.2zM121.52 28.82h9.84c4.02 0 7.59 0 9.73 3.08.94 1.39 1.39 3.36 1.39 5.02 0 1.35-.28 2.67-.83 3.81-2.11 4.36-6.62 4.47-9.94 4.54h-4.05v8h-6.13V28.82zm6.13 4.51v7.41h3.67c2.29 0 5.06-.07 5.06-3.84 0-3.57-3.08-3.57-4.85-3.57zM143.84 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM177.79 53.97c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.96-5.17 2.55-7.69 2.55m4.22-19.02c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M204.9 28.82h6.51l-8.49 24.45h-6.23l-8.38-24.45h6.51l5.06 17.39zM218.22 28.82v24.45h-6.1V28.82zM220.82 28.82h7.79c2.98.04 7.48.1 10.6 2.88 2.53 2.29 3.5 5.72 3.5 9.14 0 2.11-.31 3.67-.62 4.71-2.25 7.55-9.08 7.69-11.64 7.72h-9.63zm6.17 5.16v14.37h1.87c3.26-.07 7.76-.24 7.76-7.27 0-1.7-.17-3.4-1.28-4.92-1.66-2.22-4.02-2.18-5.89-2.18zM244.28 28.82h18.08v4.75h-11.98V38h11.19v4.64h-11.19v5.82h13.06v4.81h-19.15zM265.05 28.82h11.01c2.56.04 5.75.07 8 2.49 1.14 1.28 1.94 3.22 1.94 5.44 0 4.92-3.36 6.13-5.02 6.75l5.65 9.77h-6.75l-4.85-8.73h-3.84v8.73h-6.13V28.82zm6.13 4.57v6.62h5.06c.87-.03 3.67-.1 3.67-3.36 0-3.12-2.25-3.22-3.53-3.26zM287.75 47.49h5.47v5.78h-5.47zM142.79 75.21c-.9 1.42-1.77 2.81-3.71 4.16-1.04.73-3.43 2.15-6.82 2.15-6.48 0-11.71-4.71-11.71-12.99 0-7.24 4.92-12.95 11.85-12.95 2.81 0 5.3.97 7.14 2.42 1.7 1.35 2.49 2.7 3.19 3.91l-4.85 2.42c-.35-.8-.76-1.63-1.84-2.53-1.18-.94-2.36-1.21-3.36-1.21-3.95 0-6.03 3.67-6.03 7.76 0 5.37 2.74 8.04 6.03 8.04 3.19 0 4.47-2.22 5.3-3.64z"></path><path d="M154.48 81.48c-7.76 0-12.16-5.96-12.16-13.02 0-6.62 4.19-12.88 12.05-12.88 1.45 0 2.98.21 4.47.73 7.48 2.6 7.97 10.74 7.97 12.4 0 4.23-1.94 8.04-4.64 10.22-2.39 1.97-5.16 2.55-7.69 2.55m4.22-19.01c-1.04-1.11-2.63-1.8-4.3-1.8-3.71 0-6.06 3.26-6.06 7.69 0 5.82 3.26 7.97 6.13 7.97 2.91 0 6.03-2.08 6.2-7.2.11-2.57-.58-5.17-1.97-6.66M195.27 56.34v24.45h-5.85l.38-17.42.07-2.46-.21.87c-.31 1.39-.35 1.56-.62 2.6l-4.61 16.42h-5.26l-4.43-15.73-1.07-4.36c.1 1.94.1 2.36.21 4.68l.31 15.41h-5.92V56.35h8.94l3.74 13.72.87 3.91c.35-1.7.38-1.87.66-3.01l3.91-14.62h8.88z"></path><circle cx="77.71" cy="71.82" r="9.55"></circle><path d="M34.86.72c5.16 0 9.96.82 14.41 2.47s8.3 4.11 11.55 7.4 5.79 7.4 7.62 12.33 2.75 10.73 2.75 17.38c0 5.83-.75 11.21-2.24 16.15q-2.25 7.395-6.78 12.78c-3.03 3.59-6.8 6.41-11.33 8.46-4.52 2.06-9.85 3.08-15.98 3.08H.33V.72z"></path></g></svg>
      </a>
      <ul class="dp-site-menu">
        <li><button type="button">Our data <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><button type="button">Data Access <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><button type="button">Use Cases <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/about/">Company</a></li>
      </ul>
      <div class="dp-site-actions">
        <a class="dp-site-login" href="#">Log in</a>
        <a class="dp-btn" data-variant="cta" href="/contact/">Contact</a>
      </div>
    </nav>
  </header>

  <main>
    <!-- Hero with tabs -->
    <section class="dp-blog-hero">
      <h1 class="dp-blog-hero-title">Web data insights that drive action</h1>
      <p class="dp-blog-hero-sub">Articles, research and product news from the team structuring the web.</p>
      <div class="dp-blog-tabs">
        <a class="dp-blog-tab" href="/blog/" aria-current="true">Articles</a>
        <a class="dp-blog-tab" href="/blog/videos/">Videos</a>
        <a class="dp-blog-tab" href="/blog/press/">Press</a>
      </div>
    </section>

    <!-- Category filters -->
    <nav class="dp-blog-filters" aria-label="Filter by topic">
      <a class="dp-blog-chip" href="/blog/" aria-current="true">All</a>
      <a class="dp-blog-chip" href="/blog/asset-management/">Asset Management</a>
      <a class="dp-blog-chip" href="/blog/brand-protection/">Brand Protection</a>
      <a class="dp-blog-chip" href="/blog/business-information/">Business Information</a>
      <a class="dp-blog-chip" href="/blog/domains/">Domains</a>
      <a class="dp-blog-chip" href="/blog/public-sector/">Public Sector</a>
      <a class="dp-blog-chip" href="/blog/security/">Security</a>
      <a class="dp-blog-chip" href="/blog/tech/">Tech</a>
    </nav>

    <!-- Article grid -->
    <section class="dp-blog-grid">
      <a class="dp-blog-card" href="/blog/saas-to-ai-transition/">
        <div class="dp-blog-card-media" data-tint="a" aria-hidden="true"><span class="dp-blog-card-time">6 min</span></div>
        <div class="dp-blog-card-body">
          <h3 class="dp-blog-card-title">Reading the SaaS to AI transition through web data</h3>
          <p class="dp-blog-card-meta"><span class="dp-blog-card-author">Mathijs Baas</span><span class="dp-blog-card-date">29 days ago</span></p>
        </div>
      </a>
      <a class="dp-blog-card" href="/blog/getting-started-mcp/">
        <div class="dp-blog-card-media" data-tint="b" aria-hidden="true"><span class="dp-blog-card-time">5 min</span></div>
        <div class="dp-blog-card-body">
          <h3 class="dp-blog-card-title">Getting started with the Dataprovider MCP: let AI query 350 million domains for you</h3>
          <p class="dp-blog-card-meta"><span class="dp-blog-card-author">Gijs Barends</span><span class="dp-blog-card-date">2 months ago</span></p>
        </div>
      </a>
      <a class="dp-blog-card" href="/blog/cloudflare-hosting/">
        <div class="dp-blog-card-media" data-tint="c" aria-hidden="true"><span class="dp-blog-card-time">6 min</span></div>
        <div class="dp-blog-card-body">
          <h3 class="dp-blog-card-title">Cloudflare hides the hosting company. We found it anyway.</h3>
          <p class="dp-blog-card-meta"><span class="dp-blog-card-author">Christian Branbergen</span><span class="dp-blog-card-date">3 months ago</span></p>
        </div>
      </a>
      <a class="dp-blog-card" href="/blog/hidden-prompts-html/">
        <div class="dp-blog-card-media" data-tint="d" aria-hidden="true"><span class="dp-blog-card-time">5 min</span></div>
        <div class="dp-blog-card-body">
          <h3 class="dp-blog-card-title">Hidden prompts in HTML: the invisible threat exploiting AI browsers</h3>
          <p class="dp-blog-card-meta"><span class="dp-blog-card-author">Lucia Baldassini</span><span class="dp-blog-card-date">6 months ago</span></p>
        </div>
      </a>
      <a class="dp-blog-card" href="/blog/billion-records-ai-navigator/">
        <div class="dp-blog-card-media" data-tint="e" aria-hidden="true"><span class="dp-blog-card-time">5 min</span></div>
        <div class="dp-blog-card-body">
          <h3 class="dp-blog-card-title">How we talk to a billion records with our AI Navigator</h3>
          <p class="dp-blog-card-meta"><span class="dp-blog-card-author">Tim Kreutz</span><span class="dp-blog-card-date">7 months ago</span></p>
        </div>
      </a>
      <a class="dp-blog-card" href="/blog/websites-per-capita/">
        <div class="dp-blog-card-media" data-tint="a" aria-hidden="true"><span class="dp-blog-card-time">5 min</span></div>
        <div class="dp-blog-card-body">
          <h3 class="dp-blog-card-title">Websites per capita: how many websites does each EU country have per 1,000 inhabitants?</h3>
          <p class="dp-blog-card-meta"><span class="dp-blog-card-author">Gijs Barends</span><span class="dp-blog-card-date">8 months ago</span></p>
        </div>
      </a>
    </section>

    <!-- Newsletter -->
    <section class="dp-newsletter">
      <div class="dp-newsletter-body">
        <p class="dp-newsletter-eyebrow">Newsletter</p>
        <h2 class="dp-newsletter-title">Subscribe to get monthly <span class="light">web data insights</span></h2>
        <p class="dp-newsletter-expect">What can you expect?</p>
        <ul class="dp-newsletter-list">
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> The latest tech news</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Exclusive insights from data experts</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> One email a month, no spam</li>
        </ul>
      </div>
      <form class="dp-newsletter-form" action="#" method="post">
        <div class="dp-field">
          <label class="dp-field-label" for="bnl-first">First name</label>
          <input class="dp-field-input" id="bnl-first" name="first_name" type="text" autocomplete="given-name">
        </div>
        <div class="dp-field">
          <label class="dp-field-label" for="bnl-last">Last name</label>
          <input class="dp-field-input" id="bnl-last" name="last_name" type="text" autocomplete="family-name">
        </div>
        <div class="dp-field">
          <label class="dp-field-label" for="bnl-email">Email</label>
          <input class="dp-field-input" id="bnl-email" name="email" type="email" autocomplete="email">
        </div>
        <button class="dp-btn" data-variant="cta" type="submit">Subscribe</button>
      </form>
    </section>
  </main>

  <footer class="dp-site-footer">
    <div class="dp-footer-inner">
      <div class="dp-footer-cols">
        <div class="dp-footer-col">
          <h4>Our data</h4>
          <ul>
            <li><a href="/our-data/domain/">Domain</a></li>
            <li><a href="/our-data/business/">Business</a></li>
            <li><a href="/our-data/technology/">Technology detection</a></li>
            <li><a href="/our-data/risk/">Risk</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Data Access</h4>
          <ul>
            <li><a href="/data-access/search-engine/">Search engine</a></li>
            <li><a href="/data-access/ai-navigator-mcp/">AI navigator + MCP</a></li>
            <li><a href="/data-access/dashboards/">Dashboards</a></li>
            <li><a href="/recipes/">Recipes</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Use Cases</h4>
          <ul>
            <li><a href="/cases/assets/">Asset management</a></li>
            <li><a href="/cases/brand-protection/">Online brand protection</a></li>
            <li><a href="/cases/business-information/">Business information</a></li>
            <li><a href="/cases/public/">Public sector</a></li>
          </ul>
        </div>
        <div class="dp-footer-col">
          <h4>Company</h4>
          <ul>
            <li><a href="/about/">About us</a></li>
            <li><a href="/contact/">Contact</a></li>
            <li><a href="/crawler/">Crawler</a></li>
          </ul>
        </div>
      </div>
      <div class="dp-footer-mcp">
        <div class="dp-footer-mcp-head">MCP <span class="dp-footer-new">New</span></div>
        <div class="dp-footer-mcp-card">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color: var(--dp-navy);"><circle cx="12" cy="12" r="10"></circle></svg>
          <span class="dp-footer-mcp-label"><small>MCP available on</small><b>ChatGPT</b></span>
        </div>
        <div class="dp-footer-mcp-card">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color: #d97757;"><path d="M12 2v20M2 12h20M5 5l14 14M19 5 5 19"></path></svg>
          <span class="dp-footer-mcp-label"><small>MCP available on</small><b>Claude</b></span>
        </div>
      </div>
    </div>
  </footer>
</div>

/* Blog page
   Page-specific styles for the blog hero, its tab bar and the category filter
   chips. The article grid and newsletter use their own component CSS. Colour
   and type from tokens.css (marketing theme). */

.dp-blog-hero {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6) var(--dp-space-6);
}

.dp-blog-hero-title {
  margin: 0 0 var(--dp-space-4);
  font-size: var(--dp-text-5xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-blog-hero-sub {
  max-width: 44ch;
  margin: 0 0 var(--dp-space-8);
  font-size: var(--dp-text-lg);
  color: var(--dp-text-muted);
}

.dp-blog-tabs {
  display: flex;
  gap: var(--dp-space-6);
  border-bottom: 1px solid var(--dp-border);
}

.dp-blog-tab {
  padding: 0 0 var(--dp-space-3);
  margin-bottom: -1px;
  font-size: var(--dp-text-base);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.dp-blog-tab[aria-current="true"] {
  color: var(--dp-navy);
  border-bottom-color: var(--dp-navy);
}

.dp-blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-2);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-6) var(--dp-space-6) 0;
}

.dp-blog-chip {
  padding: var(--dp-space-2) var(--dp-space-4);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-text-muted);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-full);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.dp-blog-chip:hover { border-color: var(--dp-border-strong); color: var(--dp-navy); }

.dp-blog-chip[aria-current="true"] {
  color: var(--dp-surface);
  background: var(--dp-navy);
  border-color: var(--dp-navy);
}