diff --git a/.changeset/five-phones-tease.md b/.changeset/five-phones-tease.md
new file mode 100644
index 000000000..d09476a1e
--- /dev/null
+++ b/.changeset/five-phones-tease.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+[Frame] Expose `rectEl` and forward `mousedown`, `touchstart`, and `dblclick` events
diff --git a/.changeset/itchy-cameras-guess.md b/.changeset/itchy-cameras-guess.md
new file mode 100644
index 000000000..6d0802f88
--- /dev/null
+++ b/.changeset/itchy-cameras-guess.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+Add Brush component
diff --git a/.changeset/pretty-vans-exist.md b/.changeset/pretty-vans-exist.md
new file mode 100644
index 000000000..0a69ef836
--- /dev/null
+++ b/.changeset/pretty-vans-exist.md
@@ -0,0 +1,5 @@
+---
+"layerchart": patch
+---
+
+[Group] Forward `dblclick` event
diff --git a/.changeset/purple-tools-eat.md b/.changeset/purple-tools-eat.md
new file mode 100644
index 000000000..197227d9b
--- /dev/null
+++ b/.changeset/purple-tools-eat.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+[ChartClipPath] Remove padding by default (opt-in with `full`)
diff --git a/packages/layerchart/src/lib/components/Brush.svelte b/packages/layerchart/src/lib/components/Brush.svelte
new file mode 100644
index 000000000..d1a457677
--- /dev/null
+++ b/packages/layerchart/src/lib/components/Brush.svelte
@@ -0,0 +1,309 @@
+<script lang="ts">
+  import { createEventDispatcher, getContext } from 'svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { extent } from 'd3-array';
+
+  import { clamp, cls } from 'svelte-ux';
+  import Frame from './Frame.svelte';
+  import { localPoint } from '$lib/utils/event.js';
+  import Group from './Group.svelte';
+
+  const { xScale, yScale, width, height, padding } = getContext('LayerCake');
+
+  const dispatch = createEventDispatcher<{
+    change: { xDomain?: [any, any]; yDomain?: [any, any] };
+    brushStart: { xDomain?: [any, any]; yDomain?: [any, any] };
+    brushEnd: { xDomain?: [any, any]; yDomain?: [any, any] };
+  }>();
+
+  /** Axis to apply brushing */
+  export let axis: 'x' | 'y' | 'both' = 'x';
+
+  /** Size of draggable handles (width/height) */
+  export let handleSize = 5;
+
+  /** Only show range while actively brushing.  Useful with `brushEnd` event */
+  export let resetOnEnd = false;
+
+  export let xDomain: [number | null, number | null] = $xScale.domain();
+  export let yDomain: [number | null, number | null] = $yScale.domain();
+
+  // Capture original domains for reset()
+  const originalXDomain = $xScale.domain();
+  const originalYDomain = $yScale.domain();
+
+  $: [xDomainMin, xDomainMax] = extent($xScale.domain());
+  $: [yDomainMin, yDomainMax] = extent($yScale.domain());
+
+  /** Attributes passed to range <rect> element */
+  export let range: SVGAttributes<SVGRectElement> | undefined = undefined;
+
+  /** Attributes passed to handle <rect> elements */
+  export let handle: SVGAttributes<SVGRectElement> | undefined = undefined;
+
+  export let classes: {
+    root?: string;
+    frame?: string;
+    range?: string;
+    handle?: string;
+  } = {};
+
+  let frameEl: SVGRectElement;
+
+  function handler(
+    fn: (
+      start: {
+        xDomain: [number, number];
+        yDomain: [number, number];
+        value: { x: number; y: number };
+      },
+      value: { x: number; y: number }
+    ) => void
+  ) {
+    return (e: PointerEvent) => {
+      const start = {
+        xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax],
+        yDomain: [yDomain[0] ?? yDomainMin, yDomain[1] ?? yDomainMax],
+        value: {
+          x: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
+          y: $yScale.invert(localPoint(frameEl, e)?.y - $padding.top),
+        },
+      };
+
+      dispatch('brushStart', { xDomain, yDomain });
+
+      const onPointerMove = (e: PointerEvent) => {
+        fn(start, {
+          x: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
+          y: $yScale.invert(localPoint(frameEl, e)?.y - $padding.top),
+        });
+
+        // if (xDomain[0] === xDomain[1] || yDomain[0] === yDomain[1]) {
+        //   // Ignore?
+        //   // TODO: What about when using `x` or `y` axis?
+        // } else {
+        dispatch('change', { xDomain, yDomain });
+        // }
+      };
+
+      const onPointerUp = (e: PointerEvent) => {
+        if (e.target === frameEl) {
+          reset();
+          dispatch('change', { xDomain, yDomain });
+        }
+
+        dispatch('brushEnd', { xDomain, yDomain });
+
+        if (resetOnEnd) {
+          reset();
+        }
+
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+      };
+
+      window.addEventListener('pointermove', onPointerMove);
+      window.addEventListener('pointerup', onPointerUp);
+    };
+  }
+
+  const createRange = handler((start, value) => {
+    isActive = true;
+
+    xDomain = [
+      clamp(Math.min(start.value.x, value.x), xDomainMin, xDomainMax),
+      clamp(Math.max(start.value.x, value.x), xDomainMin, xDomainMax),
+    ];
+
+    yDomain = [
+      clamp(Math.min(start.value.y, value.y), yDomainMin, yDomainMax),
+      clamp(Math.max(start.value.y, value.y), yDomainMin, yDomainMax),
+    ];
+  });
+
+  const adjustRange = handler((start, value) => {
+    const dx = clamp(
+      value.x - start.value.x,
+      xDomainMin - start.xDomain[0],
+      xDomainMax - start.xDomain[1]
+    );
+    xDomain = [Number(start.xDomain[0]) + dx, Number(start.xDomain[1]) + dx];
+
+    const dy = clamp(
+      value.y - start.value.y,
+      yDomainMin - start.yDomain[0],
+      yDomainMax - start.yDomain[1]
+    );
+    yDomain = [Number(start.yDomain[0]) + dy, Number(start.yDomain[1]) + dy];
+  });
+
+  const adjustBottom = handler((start, value) => {
+    yDomain = [
+      clamp(value.y > start.yDomain[1] ? start.yDomain[1] : value.y, yDomainMin, yDomainMax),
+      clamp(value.y > start.yDomain[1] ? value.y : start.yDomain[1], yDomainMin, yDomainMax),
+    ];
+  });
+
+  const adjustTop = handler((start, value) => {
+    yDomain = [
+      clamp(value.y < start.yDomain[1] ? value.y : start.yDomain[0], yDomainMin, yDomainMax),
+      clamp(value.y < start.yDomain[1] ? start.yDomain[0] : value.y, yDomainMin, yDomainMax),
+    ];
+  });
+
+  const adjustLeft = handler((start, value) => {
+    xDomain = [
+      clamp(value.x > start.xDomain[1] ? start.xDomain[1] : value.x, xDomainMin, xDomainMax),
+      clamp(value.x > start.xDomain[1] ? value.x : start.xDomain[1], xDomainMin, xDomainMax),
+    ];
+  });
+
+  const adjustRight = handler((start, value) => {
+    xDomain = [
+      clamp(value.x < start.xDomain[0] ? value.x : start.xDomain[0], xDomainMin, xDomainMax),
+      clamp(value.x < start.xDomain[0] ? start.xDomain[0] : value.x, xDomainMin, xDomainMax),
+    ];
+  });
+
+  function reset() {
+    isActive = false;
+
+    xDomain = originalXDomain;
+    yDomain = originalYDomain;
+  }
+
+  function selectAll() {
+    xDomain = [xDomainMin, xDomainMax];
+    yDomain = [yDomainMin, yDomainMax];
+  }
+
+  $: top = $yScale(yDomain[1]);
+  $: bottom = $yScale(yDomain[0]);
+  $: left = $xScale(xDomain[0]);
+  $: right = $xScale(xDomain[1]);
+
+  $: rangeTop = axis === 'both' || axis === 'y' ? top : 0;
+  $: rangeLeft = axis === 'both' || axis === 'x' ? left : 0;
+  $: rangeWidth = axis === 'both' || axis === 'x' ? right - left : $width;
+  $: rangeHeight = axis === 'both' || axis === 'y' ? bottom - top : $height;
+
+  // Set reactively to handle cases where xDomain/yDomain are set externally (ex. `bind:xDomain`)
+  $: isActive =
+    xDomain[0]?.valueOf() !== originalXDomain[0]?.valueOf() ||
+    xDomain[1]?.valueOf() !== originalXDomain[1]?.valueOf() ||
+    yDomain[0]?.valueOf() !== originalYDomain[0]?.valueOf() ||
+    yDomain[1]?.valueOf() !== originalYDomain[1]?.valueOf();
+</script>
+
+<g class={cls('Brush select-none', classes.root, $$props.class)}>
+  <Frame
+    class={cls('frame', 'fill-transparent', classes.frame)}
+    on:pointerdown={createRange}
+    on:dblclick={() => selectAll()}
+    bind:rectEl={frameEl}
+  />
+
+  {#if isActive}
+    <Group x={rangeLeft} y={rangeTop} class="range">
+      <slot name="range" {rangeWidth} {rangeHeight}>
+        <rect
+          width={rangeWidth}
+          height={rangeHeight}
+          class={cls(
+            'cursor-move select-none',
+            range?.fill == null && 'fill-surface-content/10',
+            classes.range
+          )}
+          on:pointerdown={adjustRange}
+          on:dblclick={() => reset()}
+          {...range}
+        />
+      </slot>
+    </Group>
+
+    {#if axis === 'both' || axis === 'y'}
+      <Group
+        x={rangeLeft}
+        y={rangeTop}
+        class="handle top"
+        on:pointerdown={adjustTop}
+        on:dblclick={() => {
+          yDomain[0] = yDomainMin;
+          dispatch('change', { xDomain, yDomain });
+        }}
+      >
+        <slot name="handle" edge="top" {rangeWidth} {rangeHeight}>
+          <rect
+            width={rangeWidth}
+            height={handleSize}
+            class={cls('fill-transparent cursor-ns-resize select-none', classes.handle)}
+            {...handle}
+          />
+        </slot>
+      </Group>
+
+      <Group
+        x={rangeLeft}
+        y={bottom - handleSize + 1}
+        class="handle bottom"
+        on:pointerdown={adjustBottom}
+        on:dblclick={() => {
+          yDomain[1] = yDomainMax;
+        }}
+      >
+        <slot name="handle" edge="bottom" {rangeWidth} {rangeHeight}>
+          <rect
+            width={rangeWidth}
+            height={handleSize}
+            class={cls('fill-transparent cursor-ns-resize select-none', classes.handle)}
+            {...handle}
+          />
+        </slot>
+      </Group>
+    {/if}
+
+    {#if axis === 'both' || axis === 'x'}
+      <Group
+        x={rangeLeft}
+        y={rangeTop}
+        class="handle left"
+        on:pointerdown={adjustLeft}
+        on:dblclick={() => {
+          xDomain[0] = xDomainMin;
+          dispatch('change', { xDomain, yDomain });
+        }}
+      >
+        <slot name="handle" edge="left" {rangeWidth} {rangeHeight}>
+          <rect
+            width={handleSize}
+            height={rangeHeight}
+            class={cls('fill-transparent cursor-ew-resize select-none', classes.handle)}
+            {...handle}
+          />
+        </slot>
+      </Group>
+
+      <Group
+        x={right - handleSize + 1}
+        y={rangeTop}
+        class="handle right"
+        on:pointerdown={adjustRight}
+        on:dblclick={() => {
+          xDomain[1] = xDomainMax;
+          dispatch('change', { xDomain, yDomain });
+        }}
+      >
+        <slot name="handle" edge="right" {rangeWidth} {rangeHeight}>
+          <rect
+            width={handleSize}
+            height={rangeHeight}
+            class={cls('fill-transparent cursor-ew-resize select-none', classes.handle)}
+            {...handle}
+          />
+        </slot>
+      </Group>
+    {/if}
+
+    <!-- TODO: Add diagonal/corner handles -->
+  {/if}
+</g>
diff --git a/packages/layerchart/src/lib/components/ChartClipPath.svelte b/packages/layerchart/src/lib/components/ChartClipPath.svelte
index 319f3c0a6..670908fb8 100644
--- a/packages/layerchart/src/lib/components/ChartClipPath.svelte
+++ b/packages/layerchart/src/lib/components/ChartClipPath.svelte
@@ -5,15 +5,15 @@
 
   const { width, height, padding } = getContext('LayerCake');
 
-  /** Whether clipping should include chart padding (ex. axis) */
-  export let includePadding = false;
+  /** Include padding area (ex. axis) */
+  export let full = false;
 </script>
 
 <RectClipPath
-  x={includePadding ? -$padding.left : 0}
-  y={includePadding ? -$padding.top : 0}
-  width={$width + (includePadding ? $padding.left + $padding.right : 0)}
-  height={$height + (includePadding ? $padding.top + $padding.bottom : 0)}
+  x={full ? -$padding.left : 0}
+  y={full ? -$padding.top : 0}
+  width={$width + (full ? $padding.left + $padding.right : 0)}
+  height={$height + (full ? $padding.top + $padding.bottom : 0)}
   on:click
   {...$$restProps}
 >
diff --git a/packages/layerchart/src/lib/components/Frame.svelte b/packages/layerchart/src/lib/components/Frame.svelte
index 1be6c57ff..f1146fa9e 100644
--- a/packages/layerchart/src/lib/components/Frame.svelte
+++ b/packages/layerchart/src/lib/components/Frame.svelte
@@ -5,6 +5,9 @@
 
   /** Include padding area */
   export let full = false;
+
+  /** Access underlying `<rect>` element */
+  export let rectEl: SVGRectElement;
 </script>
 
 <rect
@@ -13,5 +16,8 @@
   width={$width + (full ? $padding.left + $padding.right : 0)}
   height={$height + (full ? $padding.top + $padding.bottom : 0)}
   on:click
+  on:pointerdown
+  on:dblclick
+  bind:this={rectEl}
   {...$$restProps}
 />
diff --git a/packages/layerchart/src/lib/components/Group.svelte b/packages/layerchart/src/lib/components/Group.svelte
index 481c7ba0f..282ea63f5 100644
--- a/packages/layerchart/src/lib/components/Group.svelte
+++ b/packages/layerchart/src/lib/components/Group.svelte
@@ -49,6 +49,7 @@
   {transform}
   {...$$restProps}
   on:click
+  on:pointerdown
   on:pointerenter
   on:pointermove
   on:pointerleave
diff --git a/packages/layerchart/src/lib/components/Rect.svelte b/packages/layerchart/src/lib/components/Rect.svelte
index 196ba8ab7..0af826b02 100644
--- a/packages/layerchart/src/lib/components/Rect.svelte
+++ b/packages/layerchart/src/lib/components/Rect.svelte
@@ -50,4 +50,5 @@
   on:pointermove
   on:pointerout
   on:pointerleave
+  on:dblclick
 />
diff --git a/packages/layerchart/src/lib/components/TooltipContext.svelte b/packages/layerchart/src/lib/components/TooltipContext.svelte
index 8d5ef46aa..63ea7349d 100644
--- a/packages/layerchart/src/lib/components/TooltipContext.svelte
+++ b/packages/layerchart/src/lib/components/TooltipContext.svelte
@@ -149,6 +149,17 @@
     const localX = point?.x ?? 0;
     const localY = point?.y ?? 0;
 
+    if (
+      e.offsetX < e.currentTarget.offsetLeft ||
+      e.offsetX > e.currentTarget.offsetLeft + e.currentTarget.offsetWidth ||
+      e.offsetY < e.currentTarget.offsetTop ||
+      e.offsetY > e.currentTarget.offsetTop + e.currentTarget.offsetHeight
+    ) {
+      // Ignore if within padding of chart
+      hideTooltip();
+      return;
+    }
+
     // If tooltipData not provided already (voronoi, etc), attempt to find it
     // TODO: When using bisect-x/y/band, values should be sorted.  Tyipcally are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {
@@ -316,26 +327,30 @@
   }
 </script>
 
-<slot tooltip={$tooltip} />
-
 {#if ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)}
-  <Html>
-    <div
-      style:width="{$width}px"
-      style:height="{$height}px"
-      class={cls(
-        'tooltip-trigger absolute touch-none',
-        debug && 'bg-danger/10 outline outline-danger'
-      )}
-      on:pointerenter={showTooltip}
-      on:pointermove={showTooltip}
-      on:pointerleave={hideTooltip}
-      on:click={(e) => {
-        onClick({ data: $tooltip?.data });
-      }}
-    />
-  </Html>
+  <div
+    style:width="{$width}px"
+    style:height="{$height}px"
+    style:top="{$padding.top}px"
+    style:left="{$padding.left}px"
+    class={cls(
+      'tooltip-trigger absolute touch-none',
+      debug && 'bg-danger/10 outline outline-danger'
+    )}
+    on:pointerenter={showTooltip}
+    on:pointermove={showTooltip}
+    on:pointerleave={hideTooltip}
+    on:click={(e) => {
+      onClick({ data: $tooltip?.data });
+    }}
+  >
+    <!-- Rendering slot within tooltip-trigger allows pointer events to bubble up (ex. Brush) -->
+    <div class="absolute" style:top="-{$padding.top}px" style:left="-{$padding.left}px">
+      <slot tooltip={$tooltip} />
+    </div>
+  </div>
 {:else if mode === 'voronoi'}
+  <slot tooltip={$tooltip} />
   <Svg>
     <Voronoi
       on:pointerenter={(e) => showTooltip(e.detail.event, e.detail.data)}
@@ -348,6 +363,7 @@
     />
   </Svg>
 {:else if mode === 'bounds' || mode === 'band'}
+  <slot tooltip={$tooltip} />
   <Svg>
     <g class="tooltip-rects">
       {#each rects as rect}
@@ -367,10 +383,12 @@
       {/each}
     </g>
   </Svg>
+{:else}
+  <slot tooltip={$tooltip} />
 {/if}
 
 {#if mode === 'quadtree' && debug}
-  <Svg>
+  <Svg pointerEvents={false}>
     <ChartClipPath>
       <g class="tooltip-quadtree">
         {#each quadtreeRects(quadtree, false) as rect}
diff --git a/packages/layerchart/src/lib/components/index.ts b/packages/layerchart/src/lib/components/index.ts
index 8c930a3c3..5042f5034 100644
--- a/packages/layerchart/src/lib/components/index.ts
+++ b/packages/layerchart/src/lib/components/index.ts
@@ -8,6 +8,7 @@ export { default as Axis } from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
+export { default as Brush } from './Brush.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Calendar } from './Calendar.svelte';
 export { default as Canvas } from './layout/Canvas.svelte';
diff --git a/packages/layerchart/src/lib/utils/genData.ts b/packages/layerchart/src/lib/utils/genData.ts
index 90705e7de..857a3cacb 100644
--- a/packages/layerchart/src/lib/utils/genData.ts
+++ b/packages/layerchart/src/lib/utils/genData.ts
@@ -1,4 +1,7 @@
 import { addMinutes, startOfDay, startOfToday, subDays } from 'date-fns';
+import { cumsum } from 'd3-array';
+import { randomNormal } from 'd3-random';
+
 import { degreesToRadians, radiansToDegrees } from './math.js';
 
 /**
@@ -19,6 +22,14 @@ export function getRandomInteger(min: number, max: number, includeMax = true) {
   return Math.floor(Math.random() * (max - min + (includeMax ? 1 : 0)) + min);
 }
 
+/**
+ * @see: https://observablehq.com/@d3/d3-cumsum
+ */
+export function randomWalk(options?: { count?: number }) {
+  const random = randomNormal();
+  return Array.from(cumsum({ length: options?.count ?? 100 }, random));
+}
+
 export function createSeries(options: {
   count?: number;
   min: number;
diff --git a/packages/layerchart/src/routes/_NavMenu.svelte b/packages/layerchart/src/routes/_NavMenu.svelte
index c95ea60c1..5ec180562 100644
--- a/packages/layerchart/src/routes/_NavMenu.svelte
+++ b/packages/layerchart/src/routes/_NavMenu.svelte
@@ -66,6 +66,7 @@
       'Threshold',
     ],
     Interactions: [
+      'Brush',
       'Highlight',
       'HitCanvas',
       'Tooltip',
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
new file mode 100644
index 000000000..d3b39c52d
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -0,0 +1,544 @@
+<script lang="ts">
+  import { scaleOrdinal, scaleTime } from 'd3-scale';
+  import { range } from 'd3-array';
+  import { PeriodType, State, cls, format } from 'svelte-ux';
+  import { subDays } from 'date-fns';
+  import { mdiChevronRight } from '@mdi/js';
+
+  import Chart, { Svg } from '$lib/components/Chart.svelte';
+  import Preview from '$lib/docs/Preview.svelte';
+
+  import Area from '$lib/components/Area.svelte';
+  import Axis from '$lib/components/Axis.svelte';
+  import Brush from '$lib/components/Brush.svelte';
+  import ChartClipPath from '$lib/components/ChartClipPath.svelte';
+  import Highlight from '$lib/components/Highlight.svelte';
+  import LinearGradient from '$lib/components/LinearGradient.svelte';
+  import Pattern from '$lib/components/Pattern.svelte';
+  import Rule from '$lib/components/Rule.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+
+  import { randomWalk } from '$lib/utils/genData.js';
+  import Points from '$lib/components/Points.svelte';
+  import Circle from '$lib/components/Circle.svelte';
+
+  export let data;
+
+  const now = new Date();
+  let xDomain = [subDays(now, 60), subDays(now, 30)];
+
+  const seriesData = [
+    randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
+    randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
+    randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
+    randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
+  ];
+
+  const randomData = range(200).map((d) => {
+    return { x: d, y: Math.random() };
+  });
+</script>
+
+<h1>Examples</h1>
+
+<h2>Styling via classes</h2>
+
+<Preview data={data.appleStock}>
+  <div class="h-[40px]">
+    <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value">
+      <Svg>
+        <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
+        <Brush classes={{ range: 'fill-secondary/10', handle: 'fill-secondary/50' }} />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Styling via props</h2>
+
+<Preview data={data.appleStock}>
+  <div class="h-[40px]">
+    <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value">
+      <Svg>
+        <Pattern id="range-pattern" width={8} height={8}>
+          <rect width={8} height={8} class="fill-secondary/10" />
+          <line x1={8} y2={8} class="stroke-secondary/30" />
+        </Pattern>
+        <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
+        <Brush range={{ fill: 'url(#range-pattern)', class: 'stroke-secondary/50' }} />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Styling via slots</h2>
+
+<Preview data={data.appleStock}>
+  <div class="h-[40px]">
+    <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value">
+      <Svg>
+        <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
+        <Brush>
+          <svelte:fragment slot="handle" let:edge let:rangeHeight let:rangeWidth>
+            <rect
+              width={8}
+              height={rangeHeight}
+              class={cls('fill-secondary cursor-ew-resize select-none')}
+            />
+            <svg x="-6" y={rangeHeight / 2 - 10} width="20px" height="20px" viewBox="0 0 24 24">
+              <path
+                d={mdiChevronRight}
+                class={cls('fill-secondary-content origin-center', edge === 'left' && 'rotate-180')}
+              />
+            </svg>
+            <path />
+          </svelte:fragment>
+        </Brush>
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Integrated brush (x-axis)</h2>
+
+<Preview data={data.appleStock}>
+  <div class="border rounded p-4 grid gap-1">
+    <State initial={[null, null]} let:value={xDomain} let:set>
+      <div class="h-[300px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          {xDomain}
+          y="value"
+          yDomain={[0, null]}
+          padding={{ left: 16, bottom: 24 }}
+        >
+          <Svg>
+            <Axis placement="left" grid rule />
+            <Axis placement="bottom" rule />
+            <ChartClipPath>
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              </LinearGradient>
+            </ChartClipPath>
+
+            <Brush
+              axis="x"
+              resetOnEnd
+              on:brushEnd={(e) => {
+                set(e.detail.xDomain);
+              }}
+            />
+          </Svg>
+        </Chart>
+      </div>
+    </State>
+  </div>
+</Preview>
+
+<h2>Integrated brush (y-axis)</h2>
+
+<Preview data={data.appleStock}>
+  <div class="border rounded p-4 grid gap-1">
+    <State initial={[0, null]} let:value={yDomain} let:set>
+      <div class="h-[300px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          y="value"
+          {yDomain}
+          padding={{ left: 16, bottom: 24 }}
+        >
+          <Svg>
+            <Axis placement="left" grid rule />
+            <Axis placement="bottom" rule />
+            <ChartClipPath>
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              </LinearGradient>
+            </ChartClipPath>
+
+            <Brush
+              axis="y"
+              resetOnEnd
+              on:brushEnd={(e) => {
+                set(e.detail.yDomain);
+              }}
+            />
+          </Svg>
+        </Chart>
+      </div>
+    </State>
+  </div>
+</Preview>
+
+<h2>Integrated brush (both axis / area)</h2>
+
+<Preview data={data.appleStock}>
+  <div class="border rounded p-4 grid gap-1">
+    <State initial={{ xDomain: [null, null], yDomain: [0, null] }} let:value let:set>
+      <div class="h-[300px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          xDomain={value.xDomain}
+          y="value"
+          yDomain={value.yDomain}
+          padding={{ left: 16, bottom: 24 }}
+        >
+          <Svg>
+            <Axis placement="left" grid rule />
+            <Axis placement="bottom" rule />
+            <ChartClipPath>
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              </LinearGradient>
+            </ChartClipPath>
+
+            <Brush
+              axis="both"
+              resetOnEnd
+              on:brushEnd={(e) => {
+                set({
+                  xDomain: e.detail.xDomain,
+                  yDomain: e.detail.yDomain,
+                });
+              }}
+            />
+          </Svg>
+        </Chart>
+      </div>
+    </State>
+  </div>
+</Preview>
+
+<h2>Separate chart (clip data)</h2>
+
+<Preview data={data.appleStock}>
+  <div class="border rounded p-4 grid gap-1">
+    <State initial={[null, null]} let:value={xDomain} let:set>
+      <div class="h-[300px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          {xDomain}
+          y="value"
+          yDomain={[0, null]}
+          padding={{ left: 16, bottom: 24 }}
+        >
+          <Svg>
+            <Axis placement="left" grid rule />
+            <Axis placement="bottom" rule />
+            <ChartClipPath>
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              </LinearGradient>
+            </ChartClipPath>
+          </Svg>
+        </Chart>
+      </div>
+
+      <div class="h-[40px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          y="value"
+          padding={{ left: 16 }}
+        >
+          <Svg>
+            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
+            <Brush
+              on:change={(e) => {
+                set(e.detail.xDomain);
+              }}
+            />
+          </Svg>
+        </Chart>
+      </div>
+    </State>
+  </div>
+</Preview>
+
+<h2>Separate chart (clip data: y-axis)</h2>
+
+<Preview data={data.appleStock}>
+  <div class="border rounded p-4 grid grid-cols-[40px,1fr] gap-2">
+    <State initial={[0, null]} let:value={yDomain} let:set>
+      <div>
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          y="value"
+          padding={{ bottom: 24 }}
+        >
+          <Svg>
+            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
+            <Brush
+              axis="y"
+              on:change={(e) => {
+                set(e.detail.yDomain);
+              }}
+            />
+          </Svg>
+        </Chart>
+      </div>
+
+      <div class="h-[300px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          y="value"
+          {yDomain}
+          padding={{ left: 16, bottom: 24 }}
+        >
+          <Svg>
+            <Axis placement="left" grid rule />
+            <Axis placement="bottom" rule />
+            <ChartClipPath>
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              </LinearGradient>
+            </ChartClipPath>
+          </Svg>
+        </Chart>
+      </div>
+    </State>
+  </div>
+</Preview>
+
+<h2>Separate chart (filter data)</h2>
+
+<Preview {data}>
+  <div class="border rounded p-4 grid gap-1">
+    <State initial={[null, null]} let:value={xDomain} let:set>
+      <div class="h-[300px]">
+        <Chart
+          data={data.appleStock.filter(
+            (d) =>
+              (xDomain[0] == null || d.date >= xDomain[0]) &&
+              (xDomain[1] == null || d.date <= xDomain[1])
+          )}
+          x="date"
+          xScale={scaleTime()}
+          y="value"
+          yDomain={[0, null]}
+          padding={{ left: 16, bottom: 24 }}
+        >
+          <Svg>
+            <Axis placement="left" grid rule tweened={{ duration: 200 }} />
+            <Axis placement="bottom" rule />
+            <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+              <Area
+                line={{ class: 'stroke-2 stroke-primary' }}
+                fill={url}
+                tweened={{ duration: 200 }}
+              />
+            </LinearGradient>
+          </Svg>
+        </Chart>
+      </div>
+
+      <div class="h-[40px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          y="value"
+          padding={{ left: 16 }}
+        >
+          <Svg>
+            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
+            <Brush
+              on:change={(e) => {
+                set(e.detail.xDomain);
+              }}
+            />
+          </Svg>
+        </Chart>
+      </div>
+    </State>
+  </div>
+</Preview>
+
+<h2>Sync brushes with `bind:xDomain`</h2>
+
+<Preview data={data.appleStock}>
+  {@const colorScale = scaleOrdinal([
+    'var(--color-success-500)',
+    'var(--color-info-500)',
+    'var(--color-warning-500)',
+    'var(--color-danger-500)',
+  ])}
+
+  <div class="grid grid-cols-2 gap-4">
+    {#each seriesData as data, i}
+      <div class="border rounded p-4 grid gap-1" style:--chart-color={colorScale(i)}>
+        <div class="h-[100px]">
+          <Chart
+            {data}
+            x="date"
+            xScale={scaleTime()}
+            {xDomain}
+            y="value"
+            yBaseline={0}
+            padding={{ left: 16, bottom: 24 }}
+          >
+            <Svg>
+              <Axis placement="left" grid rule />
+              <Axis
+                placement="bottom"
+                format={(v) => format(v, PeriodType.Day, { variant: 'short' })}
+              />
+              <Rule y={0} />
+              <ChartClipPath>
+                <LinearGradient
+                  class="from-[hsl(var(--chart-color)/50%)] to-transparent"
+                  vertical
+                  let:url
+                >
+                  <Area line={{ class: 'stroke-2 stroke-[hsl(var(--chart-color))]' }} fill={url} />
+                </LinearGradient>
+              </ChartClipPath>
+            </Svg>
+          </Chart>
+        </div>
+
+        <div class="h-[20px]">
+          <Chart {data} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
+            <Svg>
+              <Area
+                line={{ class: 'stroke-2 stroke-[hsl(var(--chart-color))]' }}
+                class="fill-[hsl(var(--chart-color)/20%)]"
+              />
+              <Brush bind:xDomain />
+            </Svg>
+          </Chart>
+        </div>
+      </div>
+    {/each}
+  </div>
+</Preview>
+
+<h2>Tooltip interop</h2>
+
+<Preview data={data.appleStock}>
+  <div class="border rounded p-4 grid gap-1">
+    <State initial={[null, null]} let:value={xDomain} let:set>
+      <div class="h-[300px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          {xDomain}
+          y="value"
+          yDomain={[0, null]}
+          padding={{ left: 16, bottom: 24 }}
+          tooltip={{ mode: 'bisect-x' }}
+          let:height
+          let:padding
+        >
+          <Svg>
+            <Axis placement="left" grid rule />
+            <Axis placement="bottom" rule />
+            <ChartClipPath>
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              </LinearGradient>
+            </ChartClipPath>
+            <Highlight points lines />
+
+            <Brush
+              axis="x"
+              resetOnEnd
+              on:brushEnd={(e) => {
+                set(e.detail.xDomain);
+              }}
+            />
+          </Svg>
+
+          <Tooltip
+            y="data"
+            xOffset={4}
+            anchor="bottom"
+            variant="none"
+            class="text-sm font-semibold text-primary leading-3 bg-surface-100/80 backdrop-blur-sm px-2 py-1 rounded"
+            let:data
+          >
+            {format(data.value, 'currency')}
+          </Tooltip>
+
+          <Tooltip
+            x="data"
+            y={height + padding.top}
+            yOffset={2}
+            anchor="top"
+            variant="none"
+            class="text-sm font-semibold bg-primary text-primary-content leading-3 px-2 py-1 rounded whitespace-nowrap"
+            let:data
+          >
+            {format(data.date, PeriodType.Day)}
+          </Tooltip>
+        </Chart>
+      </div>
+    </State>
+  </div>
+</Preview>
+
+<h2>Selection</h2>
+
+<Preview data={randomData}>
+  <State initial={{ xDomain: [null, null], yDomain: [null, null] }} let:value let:set>
+    <div class="h-[300px] p-4 border rounded">
+      <Chart
+        data={randomData}
+        x="x"
+        y="y"
+        yDomain={[0, null]}
+        yNice
+        padding={{ left: 16, bottom: 24 }}
+      >
+        <Svg>
+          <Axis placement="left" grid rule />
+          <Axis placement="bottom" rule />
+
+          <Points let:points>
+            {#each points as point}
+              {@const isSelected =
+                (value.xDomain[0] == null || value.xDomain[0] <= point.data.x) &&
+                (value.xDomain[1] == null || point.data.x <= value.xDomain[1]) &&
+                (value.yDomain[0] == null || value.yDomain[0] <= point.data.y) &&
+                (value.yDomain[1] == null || point.data.y <= value.yDomain[1])}
+
+              <Circle
+                cx={point.x}
+                cy={point.y}
+                r={isSelected ? 4 : 2}
+                class={cls(
+                  isSelected ? 'fill-primary/30 stroke-primary' : 'fill-neutral/10 stroke-neutral'
+                )}
+                spring
+              />
+            {/each}
+          </Points>
+
+          <Brush
+            axis="both"
+            on:change={(e) => {
+              set({
+                xDomain: e.detail.xDomain,
+                yDomain: e.detail.yDomain,
+              });
+            }}
+          />
+        </Svg>
+      </Chart>
+    </div>
+  </State>
+</Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.ts b/packages/layerchart/src/routes/docs/components/Brush/+page.ts
new file mode 100644
index 000000000..e5984947e
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.ts
@@ -0,0 +1,18 @@
+import { parse } from 'svelte-ux';
+
+import api from '$lib/components/Brush.svelte?raw&sveld';
+import source from '$lib/components/Brush.svelte?raw';
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    appleStock: await fetch('/data/examples/date/apple-stock.json').then(async (r) =>
+      parse(await r.text())
+    ),
+    meta: {
+      api,
+      source,
+      pageSource,
+    },
+  };
+}