Skip to main content


An anchored region is a container component which enables authors to create layouts where the contents of the anchored region can be positioned relative to another "anchor" element. Additionally, the anchored region can react to the available space between the anchor and a parent "viewport" element such that the region is placed on the side of the anchor with the most available space, or even resize itself based on that space.


import {    provideFASTDesignSystem,    fastAnchoredRegion} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastAnchoredRegion()    );


A region that always renders above the anchor element.

Live Editor
SyntaxError: Unexpected token (1:8)
1 : return ()

Create your own design#

import {    AnchoredRegion,    anchoredRegionTemplate as template,} from "@microsoft/fast-foundation";import { anchoredRegionStyles as styles } from "./my-anchored-region.styles";
export const myAnchoredRegion = AnchoredRegion.compose({    baseName: "anchored-region",    template,    styles,});

Additional resources#