Density

Fade

Fade is a native div overlay that draws an edge gradient from a Density background depth to transparent. Use it inside a positioned parent to soften the edge of charts, panes, and scrolled content.

import { Fade, Skeleton } from "density-base-ui";

export default function FadeExample() {
  return (
    <div
      style={{
        alignContent: "start",
        display: "grid",
        gap: "0.75rem",
        height: "10rem",
        overflow: "hidden",
        position: "relative",
      }}
    >
      <Skeleton style={{ height: "2rem", width: "100%" }} />
      <Skeleton style={{ height: "2rem", width: "90%" }} />
      <Skeleton style={{ height: "2rem", width: "95%" }} />
      <Skeleton style={{ height: "2rem", width: "80%" }} />
      <Fade style={{ "--dn-fade-size": "4rem" }} />
    </div>
  );
}

Set --dn-fade-size in style to override the default fade depth.

Direction

import type * as React from "react";
import { Fade, Skeleton, View } from "density-base-ui";

function FadePreview({
  children,
  direction,
}: {
  children: React.ReactNode;
  direction: React.ComponentProps<typeof Fade>["direction"];
}) {
  return (
    <div
      style={{
        alignItems: "center",
        display: "flex",
        justifyContent: "center",
        minHeight: "6rem",
        overflow: "hidden",
        position: "relative",
      }}
    >
      {children}
      <Fade direction={direction} style={{ "--dn-fade-size": "2rem" }} />
    </div>
  );
}

export default function FadeDirectionExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <FadePreview direction="fade-out-top">
        <Skeleton />
      </FadePreview>
      <FadePreview direction="fade-out-right">
        <Skeleton />
      </FadePreview>
      <FadePreview direction="fade-out-bottom">
        <Skeleton />
      </FadePreview>
      <FadePreview direction="fade-out-left">
        <Skeleton />
      </FadePreview>
    </View>
  );
}

Depth

import type * as React from "react";
import { Fade, Skeleton, View } from "density-base-ui";

function FadePreview({
  children,
  depth,
}: {
  children: React.ReactNode;
  depth: React.ComponentProps<typeof Fade>["depth"];
}) {
  return (
    <div
      style={{
        alignItems: "center",
        display: "flex",
        justifyContent: "center",
        minHeight: "4rem",
        overflow: "hidden",
        position: "relative",
      }}
    >
      {children}
      <Fade depth={depth} style={{ "--dn-fade-size": "2rem" }} />
    </div>
  );
}

export default function FadeDepthExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <FadePreview depth="1">
        <Skeleton />
      </FadePreview>
      <FadePreview depth="2">
        <Skeleton />
      </FadePreview>
      <FadePreview depth="3">
        <Skeleton />
      </FadePreview>
      <FadePreview depth="4">
        <Skeleton />
      </FadePreview>
      <FadePreview depth="5">
        <Skeleton />
      </FadePreview>
      <FadePreview depth="6">
        <Skeleton />
      </FadePreview>
      <FadePreview depth="7">
        <Skeleton />
      </FadePreview>
    </View>
  );
}