View

A View is a React convenience wrapper for common layout options such as background, color, padding, gap, and alignment.

You can still lay out components with Tailwind, raw CSS, or any other approach. View simply encourages you to use Density’s size and emphasis system, especially its inheritable CSS properties.

Views have a property called depth, which essentially sets their background color. Use depth to subtly distinguish Views from each other.

View defaults to a padded vertical flexbox stack. Use it to choose flexbox or grid layout, control orientation, spacing, alignment, wrapping, depth, and emphasis without local layout styles.

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

export default function ViewExample() {
  return (
    <View>
      <Skeleton />
      <Skeleton />
    </View>
  );
}

orientation selects the primary flex direction or grid auto-flow direction. wrap applies only when layout is flex; use local grid styles when a grid needs explicit tracks or placement.

Layout

Use the default flex layout for one-dimensional composition. Set layout="grid" for grid auto-placement, then add local styles only when the grid needs explicit tracks or placement.

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

export default function ViewLayoutExample() {
  return (
    <View>
      <View layout="flex" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View layout="grid" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
    </View>
  );
}

Orientation

Set the primary flex direction or grid auto-flow direction.

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

export default function ViewOrientationExample() {
  return (
    <View>
      <View orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View orientation="vertical">
        <Skeleton />
        <Skeleton />
      </View>
    </View>
  );
}

Padding

View uses size-derived padding by default. Set padding={false} to make that View flush without changing descendant padding.

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

export default function ViewPaddingExample() {
  return (
    <View>
      <View data-dn-border="border" padding={false}>
        <Skeleton />
      </View>
      <View data-dn-border="border">
        <Skeleton />
      </View>
    </View>
  );
}

Gap

Use gap tokens to set space between a View’s direct children.

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

export default function ViewGapExample() {
  return (
    <View>
      <View data-dn-border="border" gap="none" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View data-dn-border="border" gap="2xs" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View data-dn-border="border" gap="xs" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View data-dn-border="border" gap="sm" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View data-dn-border="border" gap="md" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View data-dn-border="border" gap="lg" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View data-dn-border="border" gap="xl" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View data-dn-border="border" gap="2xl" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View data-dn-border="border" gap="3xl" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
    </View>
  );
}

Justify

Use justify to distribute children along the primary layout axis.

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

export default function ViewJustifyExample() {
  return (
    <View>
      <View justify="start" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View justify="center" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View justify="end" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View justify="between" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View justify="around" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
      <View justify="evenly" orientation="horizontal">
        <Skeleton style={{ width: "6rem" }} />
        <Skeleton style={{ width: "6rem" }} />
      </View>
    </View>
  );
}

Align

Use align to position children along the cross axis.

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

export default function ViewAlignExample() {
  return (
    <View>
      <View align="start" orientation="horizontal">
        <Skeleton size="sm" style={{ width: "6rem" }} />
        <Skeleton size="lg" style={{ width: "6rem" }} />
      </View>
      <View align="center" orientation="horizontal">
        <Skeleton size="sm" style={{ width: "6rem" }} />
        <Skeleton size="lg" style={{ width: "6rem" }} />
      </View>
      <View align="end" orientation="horizontal">
        <Skeleton size="sm" style={{ width: "6rem" }} />
        <Skeleton size="lg" style={{ width: "6rem" }} />
      </View>
      <View align="stretch" orientation="horizontal">
        <Skeleton size="sm" style={{ width: "6rem" }} />
        <Skeleton size="lg" style={{ width: "6rem" }} />
      </View>
      <View align="baseline" orientation="horizontal">
        <Skeleton size="sm" style={{ width: "6rem" }} />
        <Skeleton size="lg" style={{ width: "6rem" }} />
      </View>
    </View>
  );
}

Wrap

Set wrap for horizontal flex layouts whose children may continue onto another line. It has no effect when layout="grid".

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

export default function ViewWrapExample() {
  return (
    <View orientation="horizontal" padding={false} wrap>
      <Skeleton style={{ width: "6rem" }} />
      <Skeleton style={{ width: "6rem" }} />
      <Skeleton style={{ width: "6rem" }} />
      <Skeleton style={{ width: "6rem" }} />
      <Skeleton style={{ width: "6rem" }} />
      <Skeleton style={{ width: "6rem" }} />
      <Skeleton style={{ width: "6rem" }} />
      <Skeleton style={{ width: "6rem" }} />
      <Skeleton style={{ width: "6rem" }} />
    </View>
  );
}

Depth

Set depth when a View needs a Density surface.

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

export default function ViewDepthExample() {
  return (
    <View>
      <View depth="1">
        <Skeleton />
      </View>
      <View depth="2">
        <Skeleton />
      </View>
      <View depth="3">
        <Skeleton />
      </View>
      <View depth="4">
        <Skeleton />
      </View>
      <View depth="5">
        <Skeleton />
      </View>
      <View depth="6">
        <Skeleton />
      </View>
      <View depth="7">
        <Skeleton />
      </View>
    </View>
  );
}

Emphasis

Set emphasis to establish context for clickable and typable descendants in the View’s light DOM.

Primary

Secondary

Outline

Ghost primary

Ghost secondary

Ghost tertiary

import { View } from "density-base-ui";

export default function ViewEmphasisExample() {
  return (
    <View>
      <View emphasis="primary">
        <span data-dn-label>Primary</span>
      </View>
      <View emphasis="secondary">
        <span data-dn-label>Secondary</span>
      </View>
      <View emphasis="outline">
        <span data-dn-label>Outline</span>
      </View>
      <View emphasis="ghost-primary">
        <span data-dn-label>Ghost primary</span>
      </View>
      <View emphasis="ghost-secondary">
        <span data-dn-label>Ghost secondary</span>
      </View>
      <View emphasis="ghost-tertiary">
        <span data-dn-label>Ghost tertiary</span>
      </View>
    </View>
  );
}

Hover visibility

Inside a reveal host such as ListItem, set hoverVisibility="hover" to show a View while its host is hovered or contains keyboard focus. Use not-hover for the inverse; always is the default.

Release notes

View details

import { Label, ListItem, View } from "density-base-ui";

export default function ViewHoverVisibilityExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ListItem
        as="div"
        title="Release notes"
        childrenEnd={
          <View hoverVisibility="hover" padding={false}>
            <Label>View details</Label>
          </View>
        }
      />
    </View>
  );
}

Prop	Values	Required	Default	Behavior	Description
`align`	`center`, `start`, `end`, `stretch`, `baseline`	Not required	—	Attribute: data-dn-align	—
`depth`	`1`, `2`, `3`, `4`, `5`, `6`, `7`	Not required	—	Attribute: data-dn-depth	—
`emphasis`	`primary`, `secondary`, `outline`, `ghost-primary`, `ghost-secondary`, `ghost-tertiary`	Not required	—	Attribute: data-dn-emphasis	—
`gap`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `none`	Not required	—	Attribute: data-dn-gap	—
`hoverVisibility`	`always`, `hover`, `not-hover`	Not required	"always"	Attribute: data-dn-reveal-target	—
`justify`	`center`, `start`, `end`, `between`, `around`, `evenly`	Not required	—	Attribute: data-dn-justify	—
`layout`	`grid`, `flex`	Not required	"flex"	Attribute: data-dn-layout	—
`orientation`	`vertical`, `horizontal`	Not required	"vertical"	Attribute: data-dn-orientation	—
`padding`	`false`, `true`	Not required	true	Attribute: data-dn-padding	—
`size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	Not required	—	—	—
`wrap`	`false`, `true`	Not required	false	Attribute: data-dn-wrap	—

This component also accepts props from native APIs. They are passed through and intentionally kept out of this focused Density API table.