### Basic Spinner Example

Source: https://atlassian.design/components/spinner/examples

Demonstrates the basic usage of the Spinner component. No additional setup is required.

```jsx
import React from 'react';
import { Spinner } from '@atlaskit/spinner';

function BasicSpinnerExample() {
  return <Spinner />;
}

export default BasicSpinnerExample;
```

--------------------------------

### Implement a Multi-Step Onboarding Tour

Source: https://atlassian.design/components/onboarding/examples

Connect multiple spotlights to create a guided tour. Ensure only one spotlight is active at a time by managing state. This example demonstrates navigation between two spotlights.

```javascript
import React, { useState } from 'react';  import ButtonGroup from '@atlaskit/button/button-group'; import Button, { IconButton } from '@atlaskit/button/new'; import CommentAddIcon from '@atlaskit/icon/core/comment-add'; import CopyIcon from '@atlaskit/icon/core/copy'; // eslint-disable-next-line @atlaskit/design-system/use-spotlight-package import {  Spotlight,  SpotlightManager,  SpotlightTarget,  SpotlightTransition, } from '@atlaskit/onboarding'; import { token } from '@atlaskit/tokens';  const SpotlightTourExample = (): React.JSX.Element => {  const [activeSpotlight, setActiveSpotlight] = useState<null | number>(null);  const start = () => setActiveSpotlight(0);  const next = () => setActiveSpotlight((activeSpotlight || 0) + 1);  const back = () => setActiveSpotlight((activeSpotlight || 1) - 1);  const end = () => setActiveSpotlight(null);   const renderActiveSpotlight = () => {  const spotlights = [  <Spotlight  actions={[  {  onClick: () => next(), 								text: 'Next',  },  { onClick: () => end(), text: 'Dismiss', appearance: 'subtle' },  ]}  heading="Add a comment"  target="comment"  key="comment"  targetRadius={3}  targetBgColor={'#FFFFFF'}  > 					Quickly add a comment to the work item.  </Spotlight>,  <Spotlight  actions={[  { onClick: () => end(), text: 'OK' },  { onClick: () => back(), text: 'Go back', appearance: 'subtle' },  ]}  heading="Copy code"  target="copy"  key="copy"  targetRadius={3}  targetBgColor={'#FFFFFF'}  > 					Trying to bring one of our components into your project? Click to copy the example code, 					then go ahead paste it in your editor.  </Spotlight>,  ];   if (activeSpotlight === null) {  return null;  }   return spotlights[activeSpotlight];  };   return (  <SpotlightManager>  <ButtonGroup label="Choose spotlight options">  <SpotlightTarget name="comment">  <IconButton icon={CommentAddIcon} label="comment" />  </SpotlightTarget>  <SpotlightTarget name="copy">  <IconButton icon={CopyIcon} label="Copy" />  </SpotlightTarget>  </ButtonGroup>  {/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}  <div style={{ marginTop: token('space.200') }}>  <Button appearance="primary" onClick={() => start()}> 					Start example tour  </Button>  </div>  <SpotlightTransition>{renderActiveSpotlight()}</SpotlightTransition>  </SpotlightManager>  ); };  export default SpotlightTourExample;
```

--------------------------------

### Implement a Multi-Step Onboarding Tour

Source: https://atlassian.design/components/onboarding

Connect multiple spotlights to create a guided tour. Ensure only one spotlight is active at a time. This example uses state to manage the active spotlight in a sequence.

```jsx
import React, { useState } from 'react';  import ButtonGroup from '@atlaskit/button/button-group'; import Button, { IconButton } from '@atlaskit/button/new'; import CommentAddIcon from '@atlaskit/icon/core/comment-add'; import CopyIcon from '@atlaskit/icon/core/copy'; // eslint-disable-next-line @atlaskit/design-system/use-spotlight-package import {  Spotlight,  SpotlightManager,  SpotlightTarget,  SpotlightTransition, } from '@atlaskit/onboarding'; import { token } from '@atlaskit/tokens';  const SpotlightTourExample = (): React.JSX.Element => {  const [activeSpotlight, setActiveSpotlight] = useState<null | number>(null);  const start = () => setActiveSpotlight(0);  const next = () => setActiveSpotlight((activeSpotlight || 0) + 1);  const back = () => setActiveSpotlight((activeSpotlight || 1) - 1);  const end = () => setActiveSpotlight(null);   const renderActiveSpotlight = () => {  const spotlights = [  <Spotlight  actions={[  {  onClick: () => next(), 								text: 'Next',  },  { onClick: () => end(), text: 'Dismiss', appearance: 'subtle' },  ]}  heading="Add a comment"  target="comment"  key="comment"  targetRadius={3}  targetBgColor={'#FFFFFF'}  > 						Quickly add a comment to the work item.  </Spotlight>,  <Spotlight  actions={[  { onClick: () => end(), text: 'OK' },  { onClick: () => back(), text: 'Go back', appearance: 'subtle' },  ]}  heading="Copy code"  target="copy"  key="copy"  targetRadius={3}  targetBgColor={'#FFFFFF'}  > 						Trying to bring one of our components into your project? Click to copy the example code, 					then go ahead paste it in your editor.  </Spotlight>,  ];   if (activeSpotlight === null) {  return null;  }   return spotlights[activeSpotlight];  };   return (  <SpotlightManager>  <ButtonGroup label="Choose spotlight options">  <SpotlightTarget name="comment">  <IconButton icon={CommentAddIcon} label="comment" />  </SpotlightTarget>  <SpotlightTarget name="copy">  <IconButton icon={CopyIcon} label="Copy" />  </SpotlightTarget>  </ButtonGroup>  {/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}  <div style={{ marginTop: token('space.200') }}>  <Button appearance="primary" onClick={() => start()}> 						Start example tour  </Button>  </div>  <SpotlightTransition>{renderActiveSpotlight()}</SpotlightTransition>  </SpotlightManager>  ); };  export default SpotlightTourExample;
```

--------------------------------

### Install and Use Atlaskit Button Component

Source: https://atlassian.design/get-started/develop/atlassians

Install the `@atlaskit/button` package and import the Button component to use it in your React application. This is a basic example to get started with Atlassian Design System components.

```bash
yarn add @atlaskit/button
```

```javascript
import Button from '@atlaskit/button';

const App = () => <Button>Hello world</Button>;

```

--------------------------------

### Install React and TypeScript Dependencies

Source: https://atlassian.design/get-started/develop/atlassians

Install React and TypeScript dependencies for Atlassian Design System development. We use yarn in our examples.

```bash
yarn add react@^18.2.0 react-dom@^18.2.0 yarn add --dev @types/react@^18.2.0 @types/react-dom@^18.2.0 typescript@~5.4.0
```

--------------------------------

### Install ESLint Plugin for Design System

Source: https://atlassian.design/get-started/develop/atlassians

Install the optional but recommended `@atlaskit/eslint-plugin-design-system` to get in-context help in your IDE, including accessibility pointers and deprecation notices.

```bash
yarn add --dev @atlaskit/eslint-plugin-design-system
```

--------------------------------

### Launch Benefits Modal with @atlaskit/onboarding

Source: https://atlassian.design/components/onboarding/benefits-modal/examples

This example demonstrates how to launch a benefits modal using the `@atlaskit/onboarding` package. It's a simpler approach for modals that primarily convey information and actions.

```jsx
import React, { useState } from 'react';

import Button from '@atlaskit/button/new';
import { Modal, ModalTransition } from '@atlaskit/onboarding';

import welcomeImage from '../assets/this-is-new-jira.png';

const BenefitModalBasicExample = (): React.JSX.Element => {
 const [isActive, setIsActive] = useState(false);

 return (
  <>
   <Button appearance="primary" onClick={() => setIsActive(true)}>
				Launch benefits modal
   </Button>
   <ModalTransition>
				{isActive && (
  <Modal
 actions={[
  {
 onClick: () => setIsActive(false),
							text: 'Get started',
  },
  { onClick: () => setIsActive(false), text: 'Remind me later' },
 ]}
 heading="Experience the new Jira"
 image={welcomeImage}
 key="welcome"
  >
  <p>
						Check out our restructured interface and a bold, colorful design that reflects the
						vibrance of your team. Try it out early and get a chance to influence how we build the
						next generation of Atlassian.
  </p>
  </Modal>
				)}
   </ModalTransition>
  </>
 );
};

export default BenefitModalBasicExample;
```

--------------------------------

### Rendering a Custom Component Example

Source: https://atlassian.design/components/table-tree/changelog

Provides an example demonstrating how to render a custom component.

```javascript
[patch] add an example which renders a custom component 371a771, (opens new window)
```

--------------------------------

### Stack Alignment Examples

Source: https://atlassian.design/components/primitives/stack

Control alignment of items within a Stack using `alignBlock` for vertical and `alignInline` for horizontal axis. This example shows start, center, and end alignments.

```javascript
/**
 * @jsxRuntime classic
 * @jsx jsx
 */ import { cssMap, jsx } from '@atlaskit/css';
import Heading from '@atlaskit/heading';
import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';

import ExampleBox from '../shared/example-box';

const styles = cssMap({
	container: {
		display: 'flex',
		height: '200px',
  },
});

export default function Example(): JSX.Element {
  return (
    <Box testId="stack-example" padding="space.100">
      <Inline space="space.200" spread="space-between">
        <Stack alignInline="center" space="space.200">
          <Heading size="xsmall">Start alignment</Heading>
          <Box xcss={styles.container}>
            <Stack space="space.050" alignBlock="start">
              <ExampleBox />
              <ExampleBox />
              <ExampleBox />
            </Stack>
          </Box>
        </Stack>
        <Stack alignInline="center">
          <Heading size="xsmall">Center alignment</Heading>
          <Box xcss={styles.container}>
            <Stack space="space.050" alignBlock="center">
              <ExampleBox />
              <ExampleBox />
              <ExampleBox />
            </Stack>
          </Box>
        </Stack>
        <Stack alignInline="center">
          <Heading size="xsmall">End alignment</Heading>
          <Box xcss={styles.container}>
            <Stack space="space.050" alignBlock="end">
              <ExampleBox />
              <ExampleBox />
              <ExampleBox />
            </Stack>
          </Box>
        </Stack>
      </Inline>
    </Box>
  );
}
```

--------------------------------

### Spotlight Placement Example

Source: https://atlassian.design/components/spotlight

Demonstrates how to configure the placement of a SpotlightCard. Use this to ensure the spotlight is visible in the desired position relative to its target.

```jsx
/**  * @jsxRuntime classic  * @jsx jsx  */ import { useState } from 'react';  import Button from '@atlaskit/button/new'; import { cssMap, jsx } from '@atlaskit/css'; import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu'; import { Text } from '@atlaskit/primitives/compiled'; import {  type Placement,  PopoverContent,  PopoverProvider,  PopoverTarget,  SpotlightActions,  SpotlightBody,  SpotlightCard,  SpotlightControls,  SpotlightDismissControl,  SpotlightFooter,  SpotlightHeader,  SpotlightHeadline,  SpotlightPrimaryAction, } from '@atlaskit/spotlight'; import { token } from '@atlaskit/tokens';  const styles = cssMap({
	root: {
		width: '100%',
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'space-between',
		flexDirection: 'column',
		gap: token('space.200'), 
	}
});  
const cardPlacements: Placement[] = [
  'bottom-start',
  'bottom-center',
  'bottom-end',
  'left-start',
  'left-end',
  'top-start',
  'top-center',
  'top-end',
  'right-start',
  'right-end',
] as const;

const Example = (): JSX.Element => {
  const [placement, setPlacement] = useState<(typeof cardPlacements)[number]>('top-end');
  const [isVisible, setIsVisible] = useState<boolean>(false);

  const dismiss = () => setIsVisible(false);
  const done = () => setIsVisible(false);

  return (
  <div css={styles.root}>
  <PopoverProvider>
  <PopoverTarget>
  <Button onClick={() => setIsVisible(true)}>Show Spotlight</Button>
  </PopoverTarget>
  <PopoverContent dismiss={dismiss} isVisible={isVisible} placement={placement}>
  <SpotlightCard testId="spotlight">
  <SpotlightHeader>
  <SpotlightHeadline>Headline</SpotlightHeadline>
  <SpotlightControls>
  <SpotlightDismissControl />
  </SpotlightControls>
  </SpotlightHeader>
  <SpotlightBody>
  <Text>Brief and direct textual content to elaborate on the intent.</Text>
  </SpotlightBody>
  <SpotlightFooter>
  <SpotlightActions>
  <SpotlightPrimaryAction onClick={done}>Done</SpotlightPrimaryAction>
  </SpotlightActions>
  </SpotlightFooter>
  </SpotlightCard>
  </PopoverContent>
  </PopoverProvider>
   
  <DropdownMenu trigger={`Placement: ${placement}`} shouldRenderToParent>
  <DropdownItemGroup>
  {cardPlacements.map((placement) => (
  <DropdownItem key={placement} onClick={() => setPlacement(placement)}>
  {placement}
  </DropdownItem>
  ))}
  </DropdownItemGroup>
  </DropdownMenu>
  </div>
  );
};

export default Example;
```

--------------------------------

### Inline Block Alignment Examples

Source: https://atlassian.design/components/primitives/inline/examples

Demonstrates different block alignment options ('start', 'center', 'end', 'baseline', 'stretch') within an Inline component. Each example shows a distinct alignment applied to child elements.

```jsx
/**  * @jsxRuntime classic  * @jsx jsx  */ import { type ReactNode } from 'react';  import { cssMap, jsx } from '@atlaskit/css'; import { Box, Flex, Inline, Stack } from '@atlaskit/primitives/compiled'; import { token } from '@atlaskit/tokens';  import ExampleBox from '../shared/example-box';  const styles = cssMap({
 	flex: {
 		flexDirection: 'column',
 '@media (min-width: 90rem)': {
 			flexDirection: 'row',
 }
 },
 	visualContainer: {
 		display: 'flex',
 		borderRadius: token('radius.xsmall'),
 		height: '6rem'
 }
});  export default function Example(): JSX.Element {
 return (
 <Flex xcss={styles.flex} justifyContent="space-between">
 <Stack alignInline="center">
 "start" (default)
 <VisualContainer>
 <Inline space="space.050" alignBlock="start">
 <ExampleBox />
 <ExampleBox />
 <ExampleBox padding="space.300" />
 </Inline>
 </VisualContainer>
 </Stack>
 <Stack alignInline="center">
 "center"
 <VisualContainer>
 <Inline space="space.050" alignBlock="center">
 <ExampleBox />
 <ExampleBox />
 <ExampleBox padding="space.300" />
 </Inline>
 </VisualContainer>
 </Stack>
 <Stack alignInline="center">
 "end"
 <VisualContainer>
 <Inline space="space.050" alignBlock="end">
 <ExampleBox />
 <ExampleBox />
 <ExampleBox padding="space.300" />
 </Inline>
 </VisualContainer>
 </Stack>
 <Stack alignInline="center">
 "baseline"
 <VisualContainer>
 <Inline space="space.050" alignBlock="baseline">
 <ExampleBox />
 <ExampleBox />
 <ExampleBox padding="space.300" />
 </Inline>
 </VisualContainer>
 </Stack>
 <Stack alignInline="center">
 "stretch"
 <VisualContainer>
 <Inline space="space.050" alignBlock="stretch">
 <ExampleBox />
 <ExampleBox />
 <ExampleBox padding="space.300" />
 </Inline>
 </VisualContainer>
 </Stack>
 </Flex>
 );
}

const VisualContainer = ({ children }: { children: ReactNode }) => (
 <Box backgroundColor="color.background.neutral" padding="space.050" xcss={styles.visualContainer}>
 {children}
 </Box>
);
```

--------------------------------

### Practical Card Example using Box, Stack, and Inline

Source: https://atlassian.design/components/primitives/box/examples

Illustrates how to compose the Box primitive with Stack and Inline components to create a practical card-like UI element. This example showcases layout composition and styling for a card.

```jsx
/**  * @jsxRuntime classic  * @jsx jsx  */ import Avatar from '@atlaskit/avatar'; import { cssMap, jsx } from '@atlaskit/css'; import Heading from '@atlaskit/heading'; import PullRequestIcon from '@atlaskit/icon/core/pull-request'; import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal'; import { AtlassianIcon } from '@atlaskit/logo'; import Lozenge from '@atlaskit/lozenge'; import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled'; import { token } from '@atlaskit/tokens';  const styles = cssMap({
	container: {
		display: 'flex',
		flexDirection: 'column',
		backgroundColor: token('elevation.surface.raised'),
		paddingTop: token('space.150'),
		paddingRight: token('space.150'),
		paddingBottom: token('space.150'),
		paddingLeft: token('space.150'),
		transition: '200ms',
		borderRadius: token('radius.small'),
		boxShadow: token('elevation.shadow.raised'),
 '&:hover': {
			backgroundColor: token('elevation.surface.hovered'),
 	},
 	},
 	inline: {
		display: 'flex',
		alignItems: 'center',
 	},
 	extraInfo: {
		display: 'flex',
		justifyContent: 'space-between',
		paddingBlock: token('space.050'),
 	},
});  export default function Example(): JSX.Element {  return (
  <Stack xcss={styles.container} space="space.100">
  <Text as="span">
 			Dropdown menu items in Modal are not accessible to keyboard/screen readers in Safari
  </Text>
  <Box as="span">
  <Lozenge appearance="new">Accelerate Cloud Accessibility</Lozenge>
  </Box>
  <Box xcss={styles.extraInfo}>
  <Box xcss={styles.inline}>
  <AtlassianIcon appearance="brand" size="small" label="" />
  <Heading size="xxsmall">DSP-9786</Heading>
  </Box>
  <Inline space="space.100" alignBlock="center">
  <PullRequestIcon label="" />
  <ShowMoreHorizontalIcon label="" />
  <Avatar size="small" />
  </Inline>
  </Box>
  </Stack>
  );
}
```

--------------------------------

### Calendar with Locale and Week Start Day Selection

Source: https://atlassian.design/components/calendar/examples

This example demonstrates how to use the Calendar component with dynamic locale and week start day selection. It utilizes state management for locale and week start day, and includes UI elements for user interaction. Ensure necessary imports from '@atlaskit/calendar', '@atlaskit/form', '@atlaskit/locale/LocaleSelect', and '@atlaskit/select'.

```jsx
/**  * @jsxRuntime classic  * @jsx jsx  */ import { useCallback, useState } from 'react';  import { css } from '@compiled/react';  import Calendar from '@atlaskit/calendar'; import type { WeekDay } from '@atlaskit/calendar/types'; import { cssMap, jsx } from '@atlaskit/css'; import { Label } from '@atlaskit/form'; import LocaleSelect, { type Locale } from '@atlaskit/locale/LocaleSelect'; import { Box } from '@atlaskit/primitives/compiled'; import Select, { type ValueType } from '@atlaskit/select';  const styles = cssMap({ 	localeContainer: { maxWidth: '300px' }, });  const localeInputStyles = css({ marginBlockStart: '-0.5em' });  type WeekStartDayOption = { 	value: WeekDay; 	label: string; };  const _default: () => JSX.Element = () => {  const [locale, setLocale] = useState('en-AU');  const [weekStartDay, setWeekStartDay] = useState<WeekDay>(0);   const handleLocaleChange = useCallback((locale: Locale) => setLocale(locale.value), []);   const handleWeekStartDayChange = useCallback(  (weekStartDayValue: ValueType<WeekStartDayOption>) =>  setWeekStartDay((weekStartDayValue as WeekStartDayOption).value),  [],  );   return (  <Box>  <Calendar  disabled={['2020-12-04']}  defaultPreviouslySelected={['2020-12-06']}  defaultSelected={['2020-12-08']}  defaultMonth={12}  defaultYear={2020}  locale={locale}  weekStartDay={weekStartDay}  testId="test"  />  <Box xcss={styles.localeContainer}>  <Label htmlFor="locale-input">Locale</Label>  <div css={localeInputStyles}>  <LocaleSelect id="locale-input" onLocaleChange={handleLocaleChange} />  </div>  <Label htmlFor="week-start-day">Start of the week</Label> 				<Select<WeekStartDayOption> 					inputId="week-start-day" 					options={[  { label: 'Sunday', value: 0 },  { label: 'Monday', value: 1 },  { label: 'Tuesday', value: 2 },  { label: 'Wednesday', value: 3 },  { label: 'Thursday', value: 4 },  { label: 'Friday', value: 5 },  { label: 'Saturday', value: 6 },  ]} 					placeholder="Choose start day of the week" 					onChange={handleWeekStartDayChange} 				/>  </Box>  </Box>  ); }; export default _default;
```

--------------------------------

### Default Portal Example

Source: https://atlassian.design/components/portal/examples

Demonstrates the basic usage of the Portal component. Use this for rendering UI elements that need to appear over other components.

```jsx
import React from 'react';
import Portal from '@atlaskit/portal';

const PortalDefaultExample = (): React.JSX.Element => {
  return (
    <h1>
      <Portal>
        <b>I am a child of the h1 element in the code but in the DOM I am not.</b>
      </Portal>
			Heading text
    </h1>
  );
};

export default PortalDefaultExample;
```

--------------------------------

### Default FlagsProvider Usage

Source: https://atlassian.design/components/flag/flags-provider

Wrap your application in a FlagsProvider to enable flag management and context for its children. This example demonstrates the basic setup.

```APIDOC
## Default FlagsProvider

To show flags without managing a `FlagGroup`, wrap your application in a `FlagsProvider`, which provides context to its children.

```jsx
import React from 'react';
import { FlagsProvider } from '@atlaskit/flag';

const FlagProviderExample = (): React.JSX.Element => {
  return (
    <FlagsProvider>
      <h3>I'm wrapped in a flags provider.</h3>
    </FlagsProvider>
  );
};

export default FlagProviderExample;
```
```

--------------------------------

### Basic Popper Implementation

Source: https://atlassian.design/components/popper/examples

A fundamental example of using the Popper component with a reference element and a popper element. Ensure @atlaskit/button, @atlaskit/popper, and @compiled/react are installed.

```jsx
/**  * @jsxRuntime classic  * @jsx jsx  */ import { css, jsx } from '@compiled/react'; import Lorem from 'react-lorem-component';  import Button from '@atlaskit/button/new'; import { Manager, Popper, Reference } from '@atlaskit/popper'; import { token } from '@atlaskit/tokens';  const popupStyles = css({
	maxWidth: '160px',
	backgroundColor: token('elevation.surface.overlay'), 
 // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
	borderRadius: token('radius.small', '3px'), 
	boxShadow: token('elevation.shadow.raised'), 
	paddingBlockEnd: token('space.100'), 
	paddingBlockStart: token('space.100'), 
	paddingInlineEnd: token('space.100'), 
	paddingInlineStart: token('space.100'),
});

const popupHiddenStyles = css({
	pointerEvents: 'none',
	visibility: 'hidden',
});

const BasicPopper = () => (
 <Manager>
  <Reference>
  {({ ref }) => (
  <Button appearance="primary" ref={ref}>
					Reference element
  </Button>
  )}
  </Reference>
  <Popper>
  {({ ref, placement, isReferenceHidden, style }) => (
  <div
  ref={ref}
  data-placement={placement}
  style={style}
  css={[popupStyles, isReferenceHidden && popupHiddenStyles]}
  >
  <h3>New Popper</h3>
  <Lorem count={1} />
  </div>
  )}
  </Popper>
 </Manager>
);

const containerStyles = css({
	maxWidth: '800px',
	maxHeight: '400px',
	borderColor: 'black',
	borderStyle: 'solid',
	borderWidth: token('border.width'),
	marginBlockStart: token('space.250'),
	overflow: 'auto',
});

const innerStyles = css({
	boxSizing: 'border-box',
	width: '300%',
	height: '250%',
	backgroundColor: token('elevation.surface'),
	paddingBlockEnd: token('space.200'),
	paddingBlockStart: token('space.200'),
	paddingInlineEnd: token('space.200'),
	paddingInlineStart: token('space.200'),
});

const popperWrapperStyles = css({
	display: 'flex',
	justifyContent: 'center',
});

const instructionStyles = css({
	display: 'block',
	marginBlockEnd: token('space.400'),
});

const ScrollContainerExample = (): JSX.Element => (
  <div css={containerStyles}>
  <div css={innerStyles}>
  <b css={instructionStyles}>
					Scroll to the middle of this container to see the popper <span>↘</span>
  </b>
  <Lorem count={10} />
  <div css={popperWrapperStyles}>
  <BasicPopper />
  </div>
  <Lorem count={10} />
  </div>
  </div>
);

export default ScrollContainerExample;
```

--------------------------------

### SpotlightCard with Image and Actions

Source: https://atlassian.design/components/onboarding/spotlight-card/examples

This example shows how to render a SpotlightCard with an image, a heading, and action buttons. Use this for onboarding flows or highlighting new features.

```jsx
import React from 'react';
import __noop from '@atlaskit/ds-lib/noop'; // eslint-disable-next-line @atlaskit/design-system/use-spotlight-package
import { SpotlightCard } from '@atlaskit/onboarding';

import spotlightImage from '../assets/this-is-new-jira.png';

const SpotlightCardHeadingExample = (): React.JSX.Element => {
 return (
 <SpotlightCard
 image={<img src={spotlightImage} alt="" width="400" />}
 heading="Switch it up"
 headingLevel={2}
 actions={[
 { text: 'Next', onClick: __noop },
 { text: 'Dismiss', onClick: __noop, appearance: 'subtle' },
 ]}
 > 
 Select the project name and icon to quickly switch between your most recent projects. 
 </SpotlightCard>
 );
};

export default SpotlightCardHeadingExample;
```

--------------------------------

### MetricText Alignment Options

Source: https://atlassian.design/components/primitives/metric-text/examples

MetricText can be aligned using the `align` prop, supporting 'start', 'center', and 'end' values. This example demonstrates each alignment option.

```jsx
import React from 'react';  import { MetricText, Stack, Text } from '@atlaskit/primitives/compiled';  export default (): React.JSX.Element => {  return (  <Stack space="space.100">  <Stack space="space.0">  <Text align="start">Text alignment:</Text>  <MetricText size="small" align="start"> 
					Start  </MetricText>  </Stack>  <Stack space="space.0">  <Text align="center">Text alignment:</Text>  <MetricText size="small" align="center"> 
					Center  </MetricText>  </Stack>  <Stack space="space.0">  <Text align="end">Text alignment:</Text>  <MetricText size="small" align="end"> 
					End  </MetricText>  </Stack>  </Stack>  ); };
```

--------------------------------

### Button Variants and Entry Points

Source: https://atlassian.design/components/button/button-legacy/changelog

Demonstrates the recommended way to import button variants and other entry points for optimal performance and bundle size.

```javascript
// button variants
import Button from '@atlaskit/button/standard-button';
import LoadingButton from '@atlaskit/button/loading-button';
import CustomThemeButton from '@atlaskit/button/custom-theme-button';

// other entry points
import ButtonGroup from '@atlaskit/button/button-group';
import { CustomThemeButtonProps } from '@atlaskit/button/types';
```

--------------------------------

### Apply Custom Text Styles with xcss

Source: https://atlassian.design/components/primitives/text/examples

This example shows how to define and apply various text styles using cssMap and the xcss prop. It includes examples for tabular numbers, slashed zero, strikethrough, and custom overflow wrap behavior. Ensure @atlaskit/primitives and @atlaskit/tokens are installed.

```javascript
import React from 'react';
import { cssMap } from '@atlaskit/css';
import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
import { token } from '@atlaskit/tokens';

const styles = cssMap({
	customStylesContainer: {
		width: '200px',
		borderWidth: token('border.width.selected'),
		borderColor: token('color.border.accent.magenta'),
		borderStyle: 'solid',
 	},
 	customTextDecorationLine: { textDecorationLine: 'line-through' },
 	customOverflowWrap: { overflowWrap: 'normal' },
 	customTabularNums: { fontVariantNumeric: 'tabular-nums' },
 	customSlashedZero: { fontVariantNumeric: 'slashed-zero' },
});

export default (): React.JSX.Element => {

 return (
  <Stack space="space.100">
   <Text xcss={styles.customTabularNums}>Tabular numbers: 1234567890</Text>
   <Text xcss={styles.customSlashedZero}>Slashed zero: 1234567890</Text>
   <Text xcss={styles.customTextDecorationLine}>Striked through text</Text>
   <Inline space="space.100">
    <Box xcss={styles.customStylesContainer}>
     <Text>
      				Default overflow wrap with a really long word 
      				Vierhundertvierundvierzigtausendvierhundertvierundvierzig that can break to avoid 
      				overflowing its container.  
     </Text>
    </Box>
    <Box xcss={styles.customStylesContainer}>
     <Text xcss={styles.customOverflowWrap}>
      				Custom overflow wrap with a really long word 
      				Vierhundertvierundvierzigtausendvierhundertvierundvierzig that overflows its container.  
     </Text>
    </Box>
   </Inline>
  </Stack>
 );
};
```

--------------------------------

### Add fully instrumented example

Source: https://atlassian.design/components/atlassian-navigation/changelog

Includes a fully instrumented example of atlassian-navigation using @atlaskit/analytics-next. This demonstrates how to integrate analytics tracking into the navigation component.

```javascript
Add a fully instrumented example of atlassian-navigation using @atlaskit/analytics-next
```

--------------------------------

### Filter Actionable Deprecations with Package Versions

Source: https://atlassian.design/components/eslint-plugin-design-system/no-deprecated-apis/usage

This example demonstrates using the `filterActionableDeprecations` utility to dynamically configure deprecated APIs based on installed package versions from `package.json`.

```javascript
import { configs, filterActionableDeprecations } from '@atlaskit/eslint-plugin-design-system';
import packageJson from './package.json';

rules: {
  '@atlaskit/design-system/no-deprecated-api': ['error', {
    'deprecatedConfig': filterActionableDeprecations(configs.deprecatedConfig, packageJson),
  }]
}

```

--------------------------------

### Spotlight with Media Example

Source: https://atlassian.design/components/spotlight

Shows how to include media within a SpotlightCard. Media should be used for complex features and must adhere to specific dimensions (295px width x 135px height) for proper reflow.

```jsx
/**  * @jsxRuntime classic  * @jsx jsx  */ import { useState } from 'react';  import Button from '@atlaskit/button/new'; import { cssMap, jsx } from '@atlaskit/css'; import Image from '@atlaskit/image'; import { Text } from '@atlaskit/primitives/compiled'; import {  PopoverContent,  PopoverProvider,  PopoverTarget,  SpotlightActions,  SpotlightBody,  SpotlightCard,  SpotlightControls,  SpotlightDismissControl,  SpotlightFooter,  SpotlightHeader,  SpotlightHeadline,  SpotlightMedia,  SpotlightPrimaryAction, } from '@atlaskit/spotlight'; import { token } from '@atlaskit/tokens';  import ExampleImage from '../assets/295x135.png';  
const styles = cssMap({
	root: {
		display: 'flex',
		paddingBlockStart: token('space.400'),
		paddingInlineEnd: token('space.400'),
		paddingBlockEnd: token('space.400'),
		paddingInlineStart: token('space.400'),
		height: '100%', 
	}
});  

const Example = (): JSX.Element => {
  const [isVisible, setIsVisible] = useState<boolean>(false);
  const dismiss = () => setIsVisible(false);
  const done = () => setIsVisible(false);

  return (
  <div css={styles.root}>
  <PopoverProvider>
  <PopoverTarget>
  <Button onClick={() => setIsVisible(true)}>Show Spotlight</Button>
  </PopoverTarget>
  <PopoverContent dismiss={dismiss} isVisible={isVisible} placement="right-end">
  <SpotlightCard testId="spotlight">
  <SpotlightHeader>
  <SpotlightHeadline>Headline</SpotlightHeadline>
  <SpotlightControls>
  <SpotlightDismissControl />
  </SpotlightControls>
  </SpotlightHeader>
  <SpotlightMedia>
  <Image src={ExampleImage} alt="placeholder" />
  </SpotlightMedia>
  <SpotlightBody>
  <Text>Brief and direct textual content to elaborate on the intent.</Text>
  </SpotlightBody>
  <SpotlightFooter>
  <SpotlightActions>
  <SpotlightPrimaryAction onClick={done}>Done</SpotlightPrimaryAction>
  </SpotlightActions>
  </SpotlightFooter>
  </SpotlightCard>
  </PopoverContent>
  </PopoverProvider>
  </div>
  );
};

export default Example;
```

--------------------------------

### Code Blocks with Pre and Code Example

Source: https://atlassian.design/components/css-reset/examples

Shows how to use \`<pre\>` and \`<code>\` tags for code blocks.

```jsx
<h2>Code blocks with {`<pre> and <code>`}</h2>
<pre>
  <code>
  {`<div class="foo">   <h1>Example markup snippet</h1>   <p>Sona si Latine loqueris. Sentio aliquos togatos contra me conspirare.</p>   </div>`}
  </code>
</pre>
```

--------------------------------

### Default Pressable Example

Source: https://atlassian.design/components/primitives/pressable/examples

Demonstrates a basic Pressable component without any custom styling, only default focus styles. Use this as a starting point for custom button implementations.

```jsx
import React, { useCallback } from 'react';
import Pressable from '@atlaskit/primitives/pressable';

export default function Default(): React.JSX.Element {
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return <Pressable onClick={handleClick}>Pressable</Pressable>;
}
```

--------------------------------

### Inline Alignment Control Example

Source: https://atlassian.design/components/primitives/inline

Dynamically changes the inline alignment of elements within an Inline primitive using a button click. The alignment cycles through 'start', 'center', and 'end'.

```jsx
import React, { useCallback, useState } from 'react';

import Button from '@atlaskit/button/new';
import Heading from '@atlaskit/heading';
import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';

import ExampleBox from '../shared/example-box';

const alignmentValues = ['start', 'center', 'end'] as const;

export default function Example(): React.JSX.Element {
  const [alignmentIndex, setAlignmentIndex] = useState<0 | 1 | 2>(0);
  const nextIndex = ((alignmentIndex + 1) % alignmentValues.length) as 0 | 1 | 2;

  const changeAlignment = useCallback(() => {
    setAlignmentIndex(nextIndex);
  }, [nextIndex]);

  return (
  <Stack space="space.300">
  <Heading size="small">Inline alignment</Heading>
  <Box>
  <Button appearance="primary" onClick={changeAlignment}>
 			Change alignment to "{alignmentValues[nextIndex]}"
  </Button>
  </Box>
  <Stack space="space.100">
  <Inline space="space.100" alignInline={alignmentValues[alignmentIndex]}>
  <ExampleBox />
  <ExampleBox />
  <ExampleBox />
  </Inline>
  </Stack>
  </Stack>
  );
}
```

--------------------------------

### Install CSS Reset and Design Tokens

Source: https://atlassian.design/get-started/develop/atlassians

Install the necessary dependencies for your style environment, including CSS reset and design tokens.

```bash
yarn add @atlaskit/css-reset @atlaskit/tokens
```

--------------------------------

### Example Page Layout with Left Sidebar and Keyboard Shortcut

Source: https://atlassian.design/components/page-layout

This example demonstrates how to integrate the `ExpandLeftSidebarKeyboardShortcut` component within a `PageLayout`. Ensure the `ExpandLeftSidebarKeyboardShortcut` is a child of a component that provides the Page Layout context.

```javascript
/**  * @jsxRuntime classic  * @jsx jsx  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports import { jsx } from '@emotion/react';  import { Content, LeftSidebar, Main, PageLayout } from '@atlaskit/page-layout'; import { Header, NavigationHeader, SideNavigation } from '@atlaskit/side-navigation';  import { ExpandLeftSidebarKeyboardShortcut, SlotLabel } from '../common';  export default (): jsx.JSX.Element => {  return (  <PageLayout>  <Content>  <LeftSidebar width={450} testId="left-sidebar">  <ExpandLeftSidebarKeyboardShortcut />   <SideNavigation label="Project navigation" testId="side-navigation">  <NavigationHeader>  <Header description="Sidebar header description">Sidebar Header</Header>  </NavigationHeader>  </SideNavigation>  </LeftSidebar>   <Main>  <SlotLabel>Main Content</SlotLabel>  </Main>  </Content>  </PageLayout>  ); };
```

--------------------------------

### Side Navigation with Header and Footer

Source: https://atlassian.design/components/side-navigation

Use NavigationHeader and NavigationFooter to customize the header and footer of the side navigation. This example shows a complete side navigation setup with a header and footer.

```jsx
import React from 'react';  import PremiumIcon from '@atlaskit/icon/core/premium'; import ProjectIcon from '@atlaskit/icon/core/project'; import Link from '@atlaskit/link'; import {  Footer,  Header,  NavigationContent,  NavigationFooter,  NavigationHeader,  SideNavigation,} from '@atlaskit/side-navigation';  import AppFrame from '../common/app-frame';  const Example = (): React.JSX.Element => {  return (  <AppFrame shouldHideAppBar>  <SideNavigation label="project" testId="side-navigation">  <NavigationHeader>  <Header  component={({ children, ...props }) => (  <>  {/* eslint-disable-next-line @atlaskit/design-system/no-html-anchor */}  <a href="https://atlassian.design/" {...props}>  {children}  </a>  </>  )}  iconBefore={<ProjectIcon label="" />}  description="Next-gen software"  > 
						Concise Systems  </Header>  </NavigationHeader>  <NavigationContent> </NavigationContent>  <NavigationFooter>  <Footer  useDeprecatedApi={false}  iconBefore={<PremiumIcon label="" />}  description={  <div>  <Link href="https://www.atlassian.design">Give feedback</Link> {' ∙ '}  <Link href="https://www.atlassian.design">About this project</Link>  </div>  }  > 
						You're in a next gen-project  </Footer>  </NavigationFooter>  </SideNavigation>  </AppFrame>  ); };  export default Example;
```

--------------------------------

### Flex Basic Example

Source: https://atlassian.design/components/primitives/flex/examples

Demonstrates the basic usage of the Flex component to control content alignment. Use this to create flexible layouts that adapt to different screen sizes or content changes.

```javascript
import React, { useCallback, useState } from 'react';
import Button from '@atlaskit/button/new';
import { Code } from '@atlaskit/code';
import Heading from '@atlaskit/heading';
import { Box, Flex, Stack } from '@atlaskit/primitives/compiled';

import ExampleBox from '../shared/example-box';

const alignmentValues = ['start', 'center', 'end'] as const;

export default function Example(): React.JSX.Element {
  const [alignmentIndex, setAlignmentIndex] = useState<0 | 1 | 2>(0);
  const nextIndex = ((alignmentIndex + 1) % alignmentValues.length) as 0 | 1 | 2;
  const changeAlignment = useCallback(() => {
    setAlignmentIndex(nextIndex);
  }, [nextIndex]);

  return (
    <Stack space="space.500">
      <Box>
        <Button onClick={changeAlignment}>
          			Change alignment to "{alignmentValues[nextIndex]}"
        </Button>
      </Box>
      <Stack space="space.100">
        <Heading size="xsmall">
          			Justify content <Code>{alignmentValues[alignmentIndex]}</Code>
        </Heading>
        <Flex gap="space.100" justifyContent={alignmentValues[alignmentIndex]}>
          <ExampleBox />
          <ExampleBox />
          <ExampleBox />
        </Flex>
      </Stack>
    </Stack>
  );
}
```

--------------------------------

### Dynamic Table Empty State Example

Source: https://atlassian.design/components/dynamic-table/examples

Shows how to display a custom message when a dynamic table has no content using the `emptyView` prop. This is useful for guiding users on how to populate the table.

```javascript
import React from 'react';
import { DynamicTableStateless } from '@atlaskit/dynamic-table';

import { head } from './content/sample-data';

const EmptyViewExample = (): React.JSX.Element => (
 	<DynamicTableStateless
 		head={head}
 		emptyView={<h2>The table is empty and this is the empty view</h2>}
 	/>
);

export default EmptyViewExample;
```

--------------------------------

### Popup Select with Custom Placement

Source: https://atlassian.design/components/select/popup-select

Control the positioning of the popup select relative to its trigger using the `popperProps` with the `placement` property. This example places the popup to the right and aligned with the start of the trigger.

```javascript
import React from 'react';
import Button from '@atlaskit/button/new';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import { PopupSelect } from '@atlaskit/select';

const options = [
  {
		label: 'States',
		options: [
      { label: 'Adelaide', value: 'adelaide' },
      { label: 'Brisbane', value: 'brisbane' },
      { label: 'Melbourne', value: 'melbourne' },
      { label: 'Perth', value: 'perth' },
      { label: 'Sydney', value: 'sydney' },
      { label: 'Hobart', value: 'hobart' },
    ],
  },
  {
		label: 'Territories',
		options: [
      { label: 'Canberra', value: 'canberra' },
      { label: 'Darwin', value: 'darwin' },
    ],
  },
];

const PopupSelectExample = (): React.JSX.Element => {
  return (
    <PopupSelect
      searchThreshold={10}
      placeholder=""
      options={options}
      popperProps={{ placement: 'right-start' }}
      target={({ isOpen, ...triggerProps }) => (
        <Button {...triggerProps} isSelected={isOpen} iconAfter={ChevronDownIcon}>
						Open
						</Button>
      )}
    />
  );
};

export default PopupSelectExample;
```

--------------------------------

### Add init entry point for theme CSS files

Source: https://atlassian.design/components/tokens/changelog

Provides a new init entry point for easily importing all theme CSS files, including light, dark, spacing, and typography.

```typescript
import '@atlaskit/tokens/dist/css/light.css';
import '@atlaskit/tokens/dist/css/dark.css';
import '@atlaskit/tokens/dist/css/spacing.css';
import '@atlaskit/tokens/dist/css/typography.css';
```