Forma 36

https://f36.contentful.com/
Admin
Forma 36 is a React component library and design system for building Contentful applications with...
Tokens:302,885
Snippets:1,921
Trust Score:10
Update:8 hours ago
Show doc for...
Tokens:
Raw
### Install @contentful/f36-components with Yarn

Source: https://f36.contentful.com/introduction/getting-started

Install the main Forma 36 components package using Yarn. Tree shaking will make your bundle contain only components that you actually import and need.

```bash
yarn add @contentful/f36-components
```

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

### Install @contentful/f36-button with Yarn

Source: https://f36.contentful.com/introduction/getting-started

Install just the button component as a separate package using Yarn. This is an alternative to installing the full @contentful/f36-components package.

```bash
yarn add @contentful/f36-button
```

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

### Install @contentful/f36-components with NPM

Source: https://f36.contentful.com/introduction/getting-started

Install the main Forma 36 components package using NPM. Tree shaking will make your bundle contain only components that you actually import and need.

```bash
npm i @contentful/f36-components
```

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

### Install @contentful/f36-icons with Yarn

Source: https://f36.contentful.com/introduction/getting-started

Install the Forma 36 icons package using Yarn. Icons are a separate package to reduce the size of the main bundle.

```bash
yarn add @contentful/f36-icons
```

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

### Install @contentful/f36-button with NPM

Source: https://f36.contentful.com/introduction/getting-started

Install just the button component as a separate package using NPM. This is an alternative to installing the full @contentful/f36-components package.

```bash
npm i @contentful/f36-button
```

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

### Install @contentful/f36-icons with NPM

Source: https://f36.contentful.com/introduction/getting-started

Install the Forma 36 icons package using NPM. Icons are a separate package to reduce the size of the main bundle.

```bash
npm i @contentful/f36-icons
```

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

### onDayTouchStart

Source: https://f36.contentful.com/components/datepicker

Event callback when a day touch event starts.

```APIDOC
## Event Callback: onDayTouchStart

### Description
Event callback when a day touch event starts.

### Parameters
- **handler** (DayTouchEventHandler) - Required - The event handler function.
```

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

### Use a Button component from Forma 36

Source: https://f36.contentful.com/introduction/getting-started

Import the Button component from @contentful/f36-components and render it with the primary variant. Requires @contentful/f36-components to be added to your project.

```jsx
import * as React from 'react';
import { Button } from '@contentful/f36-components';

const YourComponent = () => (
  <>
    <Button variant="primary">Your button</Button>
  </>
);
```

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

### Complete Navbar Example with React and Contentful F36

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcA5IgDcARkUy4AvrgpVaAAUhtsMJWQCuAGwD0ZAMwA2ALRshozM3acseYO1y4AkiiIBzGAGUAjmrEwHigBo7XABZVw4yAE8kNhcAcQ0iAGck-wg2ILZ7AAUVPiRhNIzg7LUALzKNGGykGDA-QOCARTUYJOwkdKLM+zjiTHckAA9u9ikZahoFdOVVTR0DQyRFJIs2dhghrjxYMiJNcjU2Uk6sgGEqNCrlARExAFEhonQqgAoASh5g+mw1TCzXsF7AAeW5mIH2XDOGK3JAuIgddIAXlsWUh6OBAD4IeiQWCxAA6BzKagdbBVJEsEAXJQqbBU3DLZHAYG5Nj5QqKXBaTFSHk43Gg0yE4kwUlIckwSkgEIwKBIIgMplsFHApyuDzeXxFbm83UCjH4zBEkm4MkUqkAQTQaCSSsUqtKFSqNTqDXSuok2LRuMFRoJsrYalFKANvrNEotIGtaFwAEYqWHfcqUUnw8DUC40+HcElMGBpQALbDYW3wLRaVAapIE0h7FIwbA1tiNyueAAsGg4LjQ+jILmwWgA7AAmADShZGAA52wBrADucfc9wAnC5slOXAARNBD-BaMAAVj2I-bwigYBHK8PRF0canAAZ70RiA+wER2-oYCPYFOdFhnEMRZ2iwSJhAgCBZ0MZIkkbAk0FiAB+MgJSRFCNA0AAyMgkWwCA0AAfSqMhsEw+ckV0EdMMLCiR0TH0c3DIgNGwaUiBteN6MY8N+QY7iJGzfU+PTf1A2DU1zSlK0OLokAhO44EtH9ENvRzRTVNxAThJQCBhCQKpYXhREVVRNSNLU0SVHEsUI0laUaVmek5JTFk2Q5HUeT5cyROFY0xJDWyo1leVFWch0WXVNwvB8egPL1XiFP9dw1GEFArMCqToxtO0wuZVlykqapanqOKvUEoU7j8qyQ0E+xJOlGNOJAWrGXClqQUzdrITzAsqWLUsknLStnDcGs6xgxtm1bJAOy7OFe37QcR3uFbZxXcckDKfQxyGfB7iSAArAAhAAZbJLT4LQpzjB8oBvEc430Q9bpXOMiFEKA4xHGBrygD8wCgXRhBgYQtBHB8HsMB99AI+5BBgTBInSGACKQJICIAdRgDRIDSgjCwRlG4wI+CkJQ1j0KwnC8MI4jSPIyjqNorjuKYli2I4hNmuE7iEtZ+wtP5vnEt8gNqokyNMsa2T5MYxSkpStKg28jFhchQXcSSecJTAAnMFTHncAqswCXcbXsF1hG0zRy0NAVJIUWwTBWg1nMVEEAA1MQFSUaU2HSQxnHaK3ue4pI0BITKUEiQxw8jlm3bYQQkEoNgldYqlYHhjR8PThPcTVgWBTQSgdOMh3TPTFW-VFo6iCgNxMQAFUwBUNHl2v68bsN1IFV3urqdI-sRwyEVOA2zLTY2RVNRJgY0aUWmWWdcHcfpdftPKwhcCJoliBIYNK2WLNFgK5+x6UAAlsdjMTN5M4EWjaYzSur31p6qoMasN31kjY-PuLYDEG4DOIACLCESGwWcADGL0AXlSf2+EVAI1wP7egZAEb0EwDAnM9UqTXw0LGeotJsGh35maZ+DgoDSjAGQQwagkDGF8oYAmhDA5WRYTfQwxDlCkJaoWdBKIaD9TLBWec4jawzDpOoDQkiUBaFYWgLQNB+45kLj5SqYsv4khan-KkoUWpAMwCA6U4DIHQLIfzOBfsIJoGQeINBMAMGYCwTg8MeCQBbhgNnJB4goAQDADlQxlDqFUlofQxhJhKqcLYUrNQhh-GBLcb6ARTiiwllEVocR85JG0jmLI3GWgs7Y18UkIpASynJMhOo9+lltFil0Q7fRVT0RGJMVSMxRAoEtMhNYhBtj7GoKwE4zBIdDGS2lC3IgMQYguFwJAP4sEgk-1xModoVCaF0IYUw6JijDBOy6bM7hdIxkrPRKknCfUMmDQrAcmZsRcmORkXInpNSa6aLEluJAydYDiDeYaUW-kdFnMhHokABiQV1WAY2UxECukWJan0kAiC7EtgccM5xrjLGsw8X0PASQ1A2msD0uqITNkRJ2WYGJaBY6Eu2CS3AFz0kDSGgSolOBHnSM0C87Fai36Qg7polSU9lKz3ehfKkYlV6Ng6LEHKrU8p9DEIMEYXJPL8oBR8qya8TjpCbpLTEfQ0XMUFSbMSOrjL6slBqgVdTrLijsvgqgMAGT-NtYC8WNkPGWmyA4XAs4YCRHlW6vEHqgwWtOFaqomJ3AR3qKawk5q6iWoNeVO1AVvXZVdTa0NWr6kOqjLkTAKA0ZJFOMGm1CbjTCsNr3YSqjcAkAWb7SutTRaWjAM2+kKy1CwX+M8TKNI2CRFwA5LlGgqlCARGIZlmSqyjVrNgessEmwEhbIOGanZuwLQHMOcck4HAzgXEuVc65Nw7j3AeY8RBTznkvNeW894nxThfEQN8H4vw-hgH+MgAEiBASMCBRG4FILQQbNgUmLhkKoUpthXC+EiJOPpkidsU4maoaqTMjozEmnUjOFU8+8DoydogEcfFMrZnLJzJW9NEtHXEa7bmCjcrs0irDfajK0otzJELOBMQUBWMrI-lotQXyfkoLdcJoFDSQUeMeLwkwGhcB226bypiuGIX8yZVcllYiJGKCedy3GPS2kwo6XC1TgkkUosGY4zFpzeY0fY2JpAvzj4aLNZ6gtmUToQDmaRpy7nVb+g7V26uDbvZEBRK23EhGwgwiEHCMe6R4C0Hi1kKJSXjI0B6OGQjOqh5iEiKPYyqWaAFbYMPEdmWjKnBy2GQj2RS4QHLmVprVAWvlvq4bQjoXSNKDKyEEdTb+vYG676CQ-c+bvFYGwLSIAJBAA

Use this example to render a full navbar with main navigation, mobile navigation, a switcher, promotions, and secondary navigation. It imports required icons and uses Navbar components with props like mainNavigation, mobileNavigation, switcher, promotions, and secondaryNavigation. The example includes menu items with icons and a submenu for apps.

```jsx
import React from 'react';

import { Navbar } from '@contentful/f36-navbar';

import {

ImageSquareIcon,

MagnifyingGlassIcon,

PenNibIcon,

PuzzlePieceIcon,

QuestionIcon,

GearSixIcon,

} from '@contentful/f36-icons';

export default function CompleteNavbarExample() {

return (

<Navbar

mainNavigation\.\.\.

}

}

```

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

### EntryCard Loading Example in React

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcBRNtkwBPAMJFMUXAF9cFKrQACkQTEFkArgBsA9GQDMANgC0kdBDZrsAZ2bt2MAB5c8sMkW3kNbUkgv9BEXFJABkIIigkNgBzPkcidC0YAAoASh52XFx6bA1MNlxkzKzcAB4BITEJKGKS3GtsIlzrAF4WEDQNACMtJGsACxgakFqSlWwrABVhNBg2kABBDWx+rHbRrOwkbCT5gCkIfoKAEQgYdYK63FhrMEwkNC2LecJrYkwwftwiNil6MxQaigTT8bGsciwuBQ0Bg+XqjTAAGtcAB3GBdazbGDWAB0FyuuD6YQiUWiox0AD5iqlWGxpOwQNIgA

Use this example to render an EntryCard in a loading state by setting the isLoading prop. The card displays a placeholder while content is being fetched.

```jsx
import React from 'react';

import { EntryCard } from '@contentful/f36-components';

export default function EntryCardLoadingExample() {

  return (

    <EntryCard

      status="published"

      contentType="Author"

      title="John Doe"

      description="Research and recommendations for modern stack websites."

      isLoading

    />

  );

}
```

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

### EntryCard sizes example with small and default variants

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcBRNtkwBPAMJFMUADS4AythIBrXAF9cFKrQACkQTEFkArgBsA9GQDMANgC0kdBDb7sAZ2bt2MAB5c8sMkQm5IZspEiO-IIi4pKySABeMC58XkToxjAAFACUPOy4uPTYhphsuJn5BbgAPPJK6hleACJI9GGOALws4BDGhihs3QB8lVU1AkJiElCjY7guCsUuXSBohgBGxkguABYwMyCzY7rYzgAqwmgwKwCChtg7WN1HVdhI2BkrAFIQO2VNEBgzzKcwKsBcYEwSDQb063UILmImDAO1wRDYUEKMHsKH0UCIsLYLnUWFwKGgMFK8wUYGUAHcYOsXO8kgA6YGggrMxIrFwoIjGYwcuamEYgsbVCbRaYvLmLQzLbprTbbPYHWW4E7nS7Xbp3B5PQ7iuZvD66kA-P64AFAo2c3DgyHQwkrBFIlFojFYnF4gnhIkkzBkilUhb1BlMlkudl2znc83+QLGbDCsai2bVUx1WligrZVhsFTsEAqIA

Renders two EntryCard components in a Stack to show the 'small' and 'default' size variants. Uses @contentful/f36-components and React. The example is from the Playground page and can be opened in CodeSandbox.

```jsx
import React from 'react';

import { EntryCard, Stack } from '@contentful/f36-components';

export default function EntryCardSizesExample() {

return (

<Stack flexDirection="column">

<EntryCard

status="published"

contentType="Author"

title="John Doe"

description="Research and recommendations for modern stack websites."

size="small"

/>

<EntryCard

status="published"

contentType="Author"

title="John Doe"

description="Research and recommendations for modern stack websites."

size="default"

/>

</Stack>

);

}
```

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

### Subheading Spacing Example with Flex and Subheading

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcAxADYwAHgBpcAZQCuAIwAWxKEjYBzXAF9cFKrQACkNthiGyUgQHoyAZgBsAWkjoIbY9gDOzduxFc8sMkRm5FJspEjOkrIKREqqEmgkyioAosJE6EIAFACUPOy4uPTYUphsuJn5BbgAPIIiWkLCACJI9GHOALws4BACUihs3QB8lVU10vKKSbgoRJgqygBCENjYVF0gbM4ww6NjuACSuAIQAG4w-FizuLa4sG5IKmVuAJ5uRigAdHsF1eYT0ViKhGZX21QBU1UMzmCzYy1W626bgSYCSAA0BLtQftDsczhc+FciDcbHcYA8nrhXu8YF8fjV-lFIcD6eCmTFprN5soACoQNAbZGJOJYnEFI4nc6XTDXW73R7PN4fb7Yqp-CEc1QgsZ-OrCbW4bKsNjqdggdRAA

Uses Flex and Subheading components from @contentful/f36-components to demonstrate marginBottom and marginTop spacing props. The example shows three Subheadings with different spacing values: none, spacingXl, and spacingS.

```jsx
import React from 'react';

import { Flex, Subheading } from '@contentful/f36-components';

export default function SubheadingSpacingExample() {

return (

<Flex flexDirection="column">

<Subheading marginBottom="none">

I love Forma 36 design system.

</Subheading>

<Subheading marginBottom="spacingXl">

I love Forma 36 design system.

</Subheading>

<Subheading marginTop="spacingS">

I love Forma 36 design system.

</Subheading>

</Flex>

);

}
```

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

### TextInput with icon and sizes

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcAVGAA9sASTZoArtgA0uAMrYSAa1wBfXBSq0AApDbYY+shIA2AejIBmAGwBaSOghtD2AM7N2nLHl4BZIgDmHGQAnkhsAQDiJkSuriJ6ahqU1DS6TgZGphY2tkh67qxs7EJceLBkRKbkEmykSE78QqLiUglOAKKCROgmMAAUAJQ87Li49NgSmGy4-aNjuAA8CsoafYIAIkj09U4AvCzgECYSKMUgAHzzC0sCwmKS2Nc3uPn7wIv+QUih4VExcXaMzMF1UzxuriQAC8YAcQK4UEQTCZDuCFmgYmAYAALY6wTBwuTETBgbEaLC4IgzJAGFComYvEFoxZ3FqPNFjN5sPYfL7BMIRaKxeKJEFghkvXCQmFwlAwKBIU70yVjDEkHF4mAEw5EogkslkClU1605WMq4SpZmFZgJQWsaDIrikCqIA

Example of using TextInput with a MagnifyingGlassIcon and different sizes (small and medium) in a Stack layout.

```jsx
import React from 'react';

import { TextInput, Stack } from '@contentful/f36-components';

import { MagnifyingGlassIcon } from '@contentful/f36-icons';

export default function TextInputIconExample() {

return (

<Stack flexDirection="column">

<TextInput

icon={<MagnifyingGlassIcon />}

size="small"

placeholder="Search for an item"

/>

<TextInput

icon={<MagnifyingGlassIcon />}

size="medium"

placeholder="Search for an item"

/>

</Stack>

);
}
```

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

### UsageCard Info Example with UsageCount

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcAVGAA9sAGSRsA1gBpcAVQDORAOYwAwhACubbDIXK1RTFFwBfXBSq0AApG0xtZDQBsA9GQDMANgC0kdBDZ7bHlmdnYhLjxYMiJnci1SJAC5RRVVQygASTYyCABRQSJ0JxgACgBKHnZcXHpsDUw2XFLqmtwAHj00jNa23AA3QyQibQBeFmQciAnetoALYlhMUeBZvs7UgyMAOgAJRZhMNb7cbCRsEvGQPjmkeVw73BHcbNzcdKMZppO+7AgIJxnNBXG6PR5EU7-QFINDmLAvKbvHogY41FwAPmOJmOsHkYEwMLOARWqI6XS2UG2ABEYHiCWgiWxMd8fjVQfdwbhcfjCUkmhAyKcFg9EWAMttSTVgDQajRsSzWe0BMIxJJJW1sIYVNgrgB9ABGThGEi+rJO9CcVzY-zQ9kOuGt9DIh3oRxRCrNcydKxoc2w2DQ8ngLhcAHdw9tbNggo4nJGqHL1cyzX0RMRGrgUFgYOr2i5laJxBJk4qXOSPpSaXTeQES315X0620Nvp1FpsKTBgSRjqJrZ5Bp0IzTazBk4NDAVgBGACsAAYG6OiOOYLIOL2QABxABCI5+Y4nVZ5DL5VwUMGM2Fu9yz2jme7aGNmefLGRL5VYbHlIBMQA

Renders a UsageCard with info variant, a header with title and tooltip, a description containing a TextLink, and a UsageCount showing consumption. Use this to display an informational card with usage metrics.

```jsx
import React from 'react';

import { TextLink, UsageCount, UsageCard } from '@contentful/f36-components';

export default function UsageCardInfoExample() {

return (

<UsageCard

variant="info"

header={

<UsageCard.Header

title="This is an Info Card"

tooltip="This is a tooltip for Info Card"

/>

}

description={

<UsageCard.Description>

This is a description of the info card.

{' '}

<TextLink

target="_blank"

rel="noopener noreferrer"

href={'https://www.contentful.com'}

>

Learn more

</TextLink>

</UsageCard.Description>

}

>

<UsageCount

variant="consumption"

value={150}

valueUnit="GB"

valueDescription="Used this month"

/>

</UsageCard>

);
}
```

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

### Basic Image Example

Source: https://f36.contentful.com/components/image

Renders an image with required alt, height, width, and src props.

```jsx
function ImageBasicExample() {
  return (
    <Image
      alt='An image saying "Everyone is welcome here"'
      height="281px"
      width="500px"
      src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png"
    />
  );
}
```

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

### List with as prop (ul and ol)

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcAZJAGc8AX1wUqtAAKQ22GHLIBXADYB6MgGYAbAFpI6CGwXZBzduxgAPLnlhkiq8krakkR-kOwB1JNgAWAIKCAKJWROgqMAAUAJQ87Li49NhKmGy40YlJuAA8AHzZOXkCwrhEggC8LCCqNYUZxTm5pdgAdACS8ij5rbhdMNQAjLlqrZ3dDU3N4wM9fXO4AEyjs5NFTS1eE4O9Xv3duJqr23NTm2NeDRtJW2UV1SAQKvU3M6eTC4cjl8I7PW9bmtdl9BssTn8zoCSh8QftFsdfu0oY1ihDsOdbmpzrFWGwROwQCIgA

Renders two lists using the `as` prop to switch between `<ul>` and `<ol>` elements. Each list contains three items. Useful for demonstrating the `as` prop on the List component from @contentful/f36-components.

```jsx
import React from 'react';

import { List } from '@contentful/f36-components';

export default function ListWithAsExample() {

return (

<>

<List as="ul">

<List.Item>List Item 1</List.Item>

<List.Item>List Item 2</List.Item>

<List.Item>List Item 3</List.Item>

</List>

<List as="ol">

<List.Item>List Item 1</List.Item>

<List.Item>List Item 2</List.Item>

<List.Item>List Item 3</List.Item>

</List>

</>

);
}
```

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

### Button with Icon Example

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddsIBrGGwDOuClVoABSG2yDsZAK4AbAPRkAzADYAtLwHDm7TljzBcAIQXZebADS4AythJ9cAX1GVqNKRBlzFVQ0dSHQ-OSFDDjDuMwAFJQUhAElpewBhInpsABEIAHc2VL97AHFiTAckAA9itndPcR9pWRlAtS1tJGlI1jZ2GGquPFgyImVyBTZSJD8LKxsAdSRsAAs6gFFqonQlGAAKAEpcYHZcXGyFTHr9s-PcAB4nFwA+O-vHy2s5oWccOoAvMAHgkknVcCoXh4AG5ZJBEGQAlggNCYVBZACeyLe9Q+9wAglAoO97g8VF8bDi8Z8FnNBFBAcDMtk8oVwZC3C8ALKCBRkil+Kl4h4C-q46m-LLYRkPcpZKq1aS4SBKLBAvSCIQAOgA5pgiBjNAAGI0eDkkj6wtEI7BIkDYfXCNBZOTIi24IXUhwwaxINg6oTu-m0tiex4qZ5gPhCw59NzsEBuIA

Renders three buttons with icons using Contentful Forma 36 components. The primary button uses a start icon, the menu button uses an end icon, and the transparent settings button uses a start icon with a custom color from the tokens.

```jsx
import React from 'react';

import tokens from '@contentful/f36-tokens';

import { Button, Stack } from '@contentful/f36-components';

import { PlusIcon, CaretDownIcon, GearSixIcon } from '@contentful/f36-icons';

export default function ButtonWithIconExample() {

return (

<Stack>

<Button startIcon={<PlusIcon />} variant="primary">

Add

</Button>

<Button endIcon={<CaretDownIcon />}>Menu</Button>

<Button

startIcon={<GearSixIcon color={tokens.gray600} />}

variant="transparent"

>

Settings

</Button>

</Stack>

);

}
```

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

### TabsWithDefaultTabExample React component using @contentful/f36-components Tabs

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcAVIgCMAzrgC+uClVoABSG2wwFZAK4AbAPRkAzADYAtJHQQ2S7MObt2MAB5c8sMkXXkVbUkhP8hwgOpJsAAsAERgnFwFBAFEbInQ1GAAKAEoedlxcemwVTDZcRPSM3AAeSOEAPkKikrKAOgAZJGFsSrzqotKfWsjcNCJTNQBJKABeFhAyJExm8fKAMSnm4o06yNb2jtWhXv6YIdHx4Rh5KFmAZWOTKGWtwXWNmq6evoHhsZAgqdOQXCbgpqECSg9we-ECX3yUABgiBySq7RuTyEII6Ky6jWaKIynREtQACrs1L8DhNFthZgBhEyKBSSLC4IIwSRkhlCRG4gkDLGPDmE4nvI4nSnUsx0zAMwJMwVXVmCdnCfGE7k4hWcvb88afTDfcpUhSisj0xkSiHYNlo3lc+Hy+7JVhsMTsEBiIA

Renders a Tabs component with three tabs (First, Second, Third) and matching panels. The third tab is disabled via the isDisabled prop. Use this as a starting point for a controlled or default tab setup in a Contentful Forma 36 React app.

```jsx
import React from 'react';

import { Tabs } from '@contentful/f36-components';

export default function TabsWithDefaultTabExample() {

return (

<Tabs>

<Tabs.List>

<Tabs.Tab panelId="first">First</Tabs.Tab>

<Tabs.Tab panelId="second">Second</Tabs.Tab>

<Tabs.Tab panelId="third" isDisabled>

Third (disabled)

</Tabs.Tab>

</Tabs.List>

<Tabs.Panel id="first">Content for the first tab</Tabs.Panel>

<Tabs.Panel id="second">Content for the second tab</Tabs.Panel>

<Tabs.Panel id="third">Content for the third tab</Tabs.Panel>

</Tabs>

);

}
```

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

### Basic Table Usage Example

Source: https://f36.contentful.com/components/table

Renders a simple table with a header row and three body rows. Use this as a starting point for static tables.

```jsx
function TableBasicUsageExample() {
  return (
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Cell>Name</Table.Cell>
          <Table.Cell>Email</Table.Cell>
          <Table.Cell>Organization role</Table.Cell>
          <Table.Cell>Last activity</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Claus Mitchell</Table.Cell>
          <Table.Cell>claus.mitchell@contentful.com</Table.Cell>
          <Table.Cell>CEO</Table.Cell>
          <Table.Cell>August 29, 2018</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Johannes Ramos</Table.Cell>
          <Table.Cell>johannes.ramos@contentful.com</Table.Cell>
          <Table.Cell>CTO</Table.Cell>
          <Table.Cell>July 27, 2019</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Alex Kalinoski</Table.Cell>
          <Table.Cell>alex.kalinoski@contentful.com</Table.Cell>
          <Table.Cell>CDO</Table.Cell>
          <Table.Cell>June 13, 2019</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}
```

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

### Basic EntityList Example with React

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcBRNtiTYAngBkkAZzwBfXBSq0AApEExBZAK4AbAPRkAzADYAtJHQQ267JObt2MAB5c8sMkR3lNbUkku4AISJJJDABIVEJaT5HInRtGAAKAEoedlxcemxNTDZcRPSM3AAecOFxKWwAPkKikrLIyoA6AElsGBRautwIhIBeFhBwzBFcAEZBrrrYSTBMJDQhSwGQABEYWfnFvzZJvO6M1XbBABURNBgVgFlRo+se85g9g4zpImzJFbRNACNtKQAFjAoM9uroavs6qVBOUothWu1OpDur1LoNhqMAEygg4zOYLJZsFbrTYEnY47p3U6Pa63SzHPCiC4UupvD4rKCYIhkbAs3Dgqb1GGNaQIjqCjKolYY3AGPkZPFbQnEjb47aWeW4KnYM4XWla+n3JlPEAS3BszSfQZETBgAFIABuwL5AuRxV0DQq0ghGWSrDYMnYIBkQA

Renders an EntityList component with three items showing different statuses (published, draft, archived). Use this as a starting point for displaying contentful entities in a list.

```jsx
import React from 'react';

import { EntityList } from '@contentful/f36-components';

export default function BasicEntityListExample() {

return (

<EntityList>

<EntityList.Item

title="Entry 1"

description="Description"

contentType="My content type"

status="published"

/>

<EntityList.Item

title="Entry 2"

description="Description"

contentType="My content type"

status="draft"

/>

<EntityList.Item

title="Entry 3"

description="Description"

contentType="My content type"

status="archived"

/>

</EntityList>

);
}
```

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

### Icon Sizes Example

Source: https://f36.contentful.com/components/icon

Shows how to set icon sizes using the size prop with values 'tiny', 'small', and 'medium' on CalendarBlankIcon.

```jsx
function IconSizesExample() {
  return (
    <Stack>
      <Flex alignItems="center" gap="spacingS">
        <CalendarBlankIcon size="tiny" /> <Text>Tiny</Text>
      </Flex>
      <Flex alignItems="center" gap="spacingS">
        <CalendarBlankIcon size="small" /> <Text>Small</Text>
      </Flex>
      <Flex alignItems="center" gap="spacingS">
        <CalendarBlankIcon size="medium" /> <Text>Medium</Text>
      </Flex>
    </Stack>
  );
}
```

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

### today

Source: https://f36.contentful.com/components/datepicker

The today’s date. Default is the current date. This Date will get the `today` modifier to style the day.

```APIDOC
## Property: today

### Description
The today’s date. Default is the current date. This Date will get the `today` modifier to style the day.

### Type
Date
```

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

### Basic Accordion usage with default and start alignment

Source: https://f36.contentful.com/components/accordion

Shows a basic Accordion with default chevron alignment and a second Accordion with align="start". Each Accordion.Item contains a title and Text content. The example includes Heading elements for section titles.

```jsx
function AccordionExample() {
  return (
    <div>
      <Heading as="h2">Default usage</Heading>
      <Accordion>
        <Accordion.Item title="What payment methods do you accept?">
          <Text>
            Customers on the Team tier can pay with a credit card (American
            Express, MasterCard or Visa). Enterprise customers have the choice
            of paying with a credit card or wire transfer.
          </Text>
        </Accordion.Item>
        <Accordion.Item title="What spaces can I use Compose + Launch on?">
          <Text>
            Once you have purchased Compose + Launch, they can be installed on
            all of your spaces, or only the ones you want to have them on. There
            is no extra cost to install Compose + Launch on multiple spaces.
          </Text>
        </Accordion.Item>
      </Accordion>
      <Heading marginTop="spacing2Xl" as="h2">
        Alignment of the chevron at start
      </Heading>
      <Accordion align="start">
        <Accordion.Item title="What payment methods do you accept?">
          <Text>
            Customers on the Team tier can pay with a credit card (American
            Express, MasterCard or Visa). Enterprise customers have the choice
            of paying with a credit card or wire transfer.
          </Text>
        </Accordion.Item>
        <Accordion.Item title="What spaces can I use Compose + Launch on?">
          <Text>
            Once you have purchased Compose + Launch, they can be installed on
            all of your spaces, or only the ones you want to have them on. There
            is no extra cost to install Compose + Launch on multiple spaces.
          </Text>
        </Accordion.Item>
      </Accordion>
    </div>
  );
}
```

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

### AssetCard sizes example with React and Contentful F36 components

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcBBAM4CY2AMJFMUADS4AythIBrXAF9cFKrQACkNthh6yAVwA2AejIBmAGwBaSOghsD2Ac3bsYADy55YZIlNyIzZSJCd+IRFxSVkkAC8YAQBRLyJ0ExgACgBKHnZcXHpsI0w2XCyCwtwAHnklAD4q6trBYTEJKGaW3AEFEoEAXhYQNCMAIxMkAQALGC6QbpbsAE80GGHkFCIAcxgRpersJGxMzeSANxh6PoPynsKBTDBNmexsNAF4MzNxk4A6EwrMyWACMKwAMpYAAoCO4PR4JDYjATbEwmeE9MxNe4tGptaKdQ6PfpGIYjMaTaZzBbE3CrdabVC7faLXE9Y6nZEgS7XJLYTEPJ4vEZvD5fH5-bCA4FgyEwuFshG9JGbfyBEwCpVYnF4sz1MCKXW4HKsNgqdggFRAA

Renders two AssetCard components in a Stack to show the 'small' and 'default' sizes. Uses the @contentful/f36-components package and requires React.

```jsx
import React from 'react';

import { AssetCard, Stack } from '@contentful/f36-components';

export default function AssetCardSizesExample() {

return (

<Stack>

<AssetCard

status="published"

type="image"

title="Everest"

src="https://bit.ly/31yL3Ps"

size="small"

/>

<AssetCard

status="published"

type="image"

title="Everest"

src="https://bit.ly/31yL3Ps"

size="default"

/>

</Stack>

);
}
```

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

### Badge with Start and End Icons

Source: https://f36.contentful.com/components/badge

Shows how to add icons to a Badge using the startIcon and endIcon props. The startIcon prop adds an icon to the left side, and endIcon adds an icon to the right side. The example uses EnvironmentAliasIcon and ClockIcon inside a Stack.

```jsx
function StartIconExample() {
  return (
    <Stack>
      <Badge startIcon={<EnvironmentAliasIcon />}>Main</Badge>
      <Badge endIcon={<ClockIcon />}>Scheduled</Badge>
    </Stack>
  );
}
```

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

### Basic Layout Example with Form and Header Actions

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMbAGl2FwFcBnGAZWyOxlwF9cAzTCFXAOSZipAQG4AOgDtUGHJWm5cAIQgAPMopXVs2CFM1SlAMQA2MDVuNYUhkzYDC+7L1N3cAFQvYAklLQ67l5qzMJE7gAyRACeEIHSnDx8ggACkFKsGVzUpgD0XADMAGwAtJDo+jAZtOLS0hZyeLBcRDl42VKkSPoqRLRIYFGxOgCiakTo5gAUAJQKRrjptHgA2rTUAEYoSLpIUgDmFPTYDJvbuwcAurgAvDT0TCwwUy2m9DOSC0t461s71ph+HdZrcAHzzJRKY6nP4XfZTFzUGAfLRQmDYDyoGBxbBTEE3cHQs47bB7eGvd4UACMAAY6SiFuxPlphNhqJgjFNUbgADxDHHcpQAC2IsEwN2AgshfJiOIAdAAJUUwTCgqWQ3n8nSK5WYPxSFXqjW4UnYcw3CQgACacUwuAAIuiiEg3pajRqSKT9LQJe7jTyzBZcPsiGgLSBaGgSGSGJa1QtjYnpcodHojAA3IiYJBEDLhtDZlBZ6KW3D9ABeMHDtCLplMcb9SdwAEEdBAuC7TLgAO47IW4AAKvHTSDFuCpjf9uRTun08abTZ5M7TuEz2dz2HzheLpYrVctNaIdYbCYXidbeg7dZ7fcHw9HKtwACZJxqedPU3PX7zcoG1POzw4Sde2wIVlBIABrZd9EnDYwigMBMGoFANh9YAViodJMmweBBGbMBIGoDJcAYdFSQOGoKHZUxcIEABiAQOEudg-VyADE3fLVsB1IgxXYyEWNPfilBlYZuNUKBomE5N1FwKMoCgMlwykSpSyLTB9j2VRZxQasozAMkAA16xAaS3wBfh9Bhc4JV+c4LPYMz-QspwMlcJyOJc5xXDlKINhgLskFoQgAEdqCQYQoFBAA5CYYHfLy3IgUxfKIfzTA8-1gl8fwdFwNjvwDRxvOSnVTDQbLMsTAdzD6NgqlYO1hjtDtMGWXApDiwrf2KpKUqVcrKsnBLepcZL42GxKxoywqpp8vyAtBR1aEQpA0C9KQRsBVzptS9KqulbKs2IfKDpEubSoGirvDOyEvGvFA2DSnFcGa+hTC4bqLv6gLrpCA6tpQHb3LqU9F2gjMsxzPNLQLVAdxAE1ojQfcI2JbBSyC+0grS8woFs9HyP2Rzv2AOySTJXAAH5BGskkYCgRjaIcUwBgg3BHpNCAy3RgRBMAn8IcywGnPfVR-ylTjZW1CSpO5KWxIAhlBJAdggA

A React component using @contentful/f36-components to build a layout with a header, breadcrumbs, and a form. The form includes name and description fields with a submit button that shows a temporary 'Submitted' state. Useful for demonstrating the Layout, Form, and FormControl components together.

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

import {

Box,

Button,

Flex,

Form,

FormControl,

TextInput,

Textarea,

Layout,

} from '@contentful/f36-components';

export default function BasicLayoutExample() {

const \[submitting, setSubmitting\] = useState(false);

const submitForm = () => {

setSubmitting(true);

setTimeout(() => setSubmitting(false), 1000);

};

return (

<Layout

header\={

<Layout.Header\>

<Layout.HeaderInner

title\="Your Details"

actions\={

<Flex gap\="spacingS"\>

<Button variant\="primary" size\="small"\>

Autofill with Provider 1

</Button\>

<Button variant\="primary" size\="small"\>

Autofill with Provider 2

</Button\>

</Flex\>

}

withBackButton

breadcrumbs\={\[{ content: 'Account Settings', url: '#' }\]}

/>

</Layout.Header\>

}

\>

<Layout.Body\>

<Box padding\="none" marginBottom\="spacingXl"\>

<Form onSubmit\={submitForm}\>

<FormControl\>

<FormControl.Label isRequired\>Name</FormControl.Label\>

<TextInput />

<FormControl.HelpText\>

Please enter your first name

</FormControl.HelpText\>

</FormControl\>

<FormControl\>

<FormControl.Label\>Description</FormControl.Label\>

<Textarea />

<FormControl.HelpText\>

Tell me about yourself

</FormControl.HelpText\>

</FormControl\>

<Button variant\="primary" type\="submit" isDisabled\={submitting}\>

{submitting ? 'Submitted' : 'Click me to submit'}

</Button\>

</Form\>

</Box\>

</Layout.Body\>

</Layout\>

);

}
```

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

### BoxSpacingExample with Box padding and marginRight

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddsIBrGGwDOuClVoABSG2yDsZAK4AbAPRkAzADYAtLwHDm7TljzBcAIQgAPADS4AYkphXcAX1GVqNKRBlzFqho6kOi+ckKGbOzOXHiwZETK5ApspEi+FtYAymgkSGwA5gCiVkToTgAUAJS4wOy4uNJCeFkoREpKAMK+2ET5MJiWLgC8uNW4wwB8Y-UNuAA8Q7NzuERCwywgQrlRIMtzzQCeTsPAdWwrK1BI20pEh-C0AEZKEGB8NDb7KwDuSFDYAAWjxoAFYAAxoKyfb5zQEwJAFQHYEEQqEwi6XBpPEh8AqUFJQbqvTCPPSCIQAOnx9wAjODwV9MStXK59ipJrMqqwopj6NgFJgLhV9vNHM5cEcTmdcDj3viIITiVgyfwKdTMPd1Ay3K5Ocy5otrLCGrkoNdChstrkwPkCgANISbE24NqYAr5fCI5FW7Z5QoAWWdBpWUpgp3OWJWcrxBLYRIgJNV+ip9CgEMZLtZsP1UYWrXaXR6fTYAyGuA5sPmKiGucuRqsLrNFoKvptdsdwbzbo9bC9SOwbf9BSDexDB2wx3DZxd2NxCqViZVPDVwkpLwUMAzTLz2fHdax8wLHW6MhLZesFYPhpr1mv1fFVjr3PYbLYIFcQA

React component using @contentful/f36-components Box and Flex with spacing tokens. Demonstrates padding="spacingXs" and marginRight="spacingM" on Box elements with colored backgrounds. Requires importing tokens from @contentful/f36-tokens and the Box/Flex components.

```jsx
import React from 'react';

import tokens from '@contentful/f36-tokens';

import { Box, Flex } from '@contentful/f36-components';

export default function BoxSpacingExample() {

const SmallContainerBox = () => (

<Box

as="span"

style={{

display: 'block',

width: '50px',

height: '50px',

backgroundColor: tokens.gray100,

}}

/>

);

return (

<Flex style={{ backgroundColor: tokens.gray300 }}>

<Box

padding="spacingXs"

marginRight="spacingM"

style={{

backgroundColor: tokens.red500,

}}

>

<SmallContainerBox />

</Box>

<Box

padding="spacingXs"

marginRight="spacingM"

style={{

backgroundColor: tokens.blue500,

}}

>

<SmallContainerBox />

</Box>

</Flex>

);

}
```

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

### Table Basic Usage Example with @contentful/f36-components

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcAVIgCMANjFwBfXBSq0AApDbYYisgFdhAejIBmAGwBaSOghtl2AM7N27GAA8ueWGSLryqtqSQn+Q0QCEicyQwAFVzIgBzGABRWyJ0UQAKAEoedlxcemxVTDZcRPSM3AAeAREYAD5CopKy0QA6AAliKCq8mqLS3xh6-AgAdzaOjq7y+oBhGGFhCoA5eJhijTqeyemh4c6ViamZ6JQiJGEl7bWZ6s3RhrOKgHlMCKIOAC8ibC88ylET7p31i+GV1WuwqABlAngSO8AG5IbAATx+YxuAM6y1+fUGqKRDWaRFa2O2fmg8I2gO2mLJl1OIPGwhc5lwAFk4WAABa7HHA-7tTa1X43MD01TmeooVkc6byExKFTqepGLl-c686kC2nRW5KlGq8nq9YAQVUERFeAATABOAA0uDNAAYAIwADm1INRGSVlPd-LGXt1Ixp6wAUhA2U9TIz8PEIOZXTy+R7AzMAFah8MwUWYaPmaWKMxqYQKqhxlUJn3XWl8LXo5Fu-01IHKipB9Tw20Adht9odFpLVIbNYafr5jeHCcbNwNolsuAA0kRhEg2DGANZIPvexP6mYLuz1FcLperpC52XYAtFlAb+tbbcVcYAEWrSf7AbvLdMuAd2i7jt7g+5UtLgA3oBlfJViSgUkLi5DZklYNhxHYEBxCAA

Basic usage of the Table component from Contentful's Forma 36 React components. Renders a table with a head and body containing three rows of user data. Use this as a starting point for building tables in Contentful apps.

```jsx
import React from 'react';

import { Table } from '@contentful/f36-components';

export default function TableBasicUsageExample() {

return (

<Table>

<Table.Head>

<Table.Row>

<Table.Cell>Name</Table.Cell>

<Table.Cell>Email</Table.Cell>

<Table.Cell>Organization role</Table.Cell>

<Table.Cell>Last activity</Table.Cell>

</Table.Row>

</Table.Head>

<Table.Body>

<Table.Row>

<Table.Cell>Claus Mitchell</Table.Cell>

<Table.Cell>claus.mitchell@contentful.com</Table.Cell>

<Table.Cell>CEO</Table.Cell>

<Table.Cell>August 29, 2018</Table.Cell>

</Table.Row>

<Table.Row>

<Table.Cell>Johannes Ramos</Table.Cell>

<Table.Cell>johannes.ramos@contentful.com</Table.Cell>

<Table.Cell>CTO</Table.Cell>

<Table.Cell>July 27, 2019</Table.Cell>

</Table.Row>

<Table.Row>

<Table.Cell>Alex Kalinoski</Table.Cell>

<Table.Cell>alex.kalinoski@contentful.com</Table.Cell>

<Table.Cell>CDO</Table.Cell>

<Table.Cell>June 13, 2019</Table.Cell>

</Table.Row>

</Table.Body>

</Table>

);
}
```

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

### Basic InlineEntryCard Example with All Statuses

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcBJNgBskbGAFE22TAE8AwkUxQANLgCyMNgFc+2GNQC+uClVoABSJI3YymwQHoyAZgBsAWkjoIoyQGdm7dhgADy48WDIiW3JNNlIkL1wAISIfJDABYVEJKTkFKDEgonRBGAAKAEoedlxcemxNTDZcUuqa3AAeAD5Wto6MkXFJGXlFHt7cEmx4th8AXmAAbTHxjvUtHT1cAGsYaVmWcAg0aQPO2SPpdrs17V0UTqVl8fabjeodvYPYEt1TgBEYD8YFdXncHk8agBdfQQ3A+bBEepzA5oTQAI2EPgAFjAoAdYVNsCV9iAAArozE4qC4bIyXAAFSQRJg+Ka426bJW5IxSGxuNwVjpaOgJ05bSu-SyQ1yig5K3aksGORGeLFvUm0zmi1hNReGlumw+JMgx1O52OIP1b3BaueoMNuxJ3xgvxAnQBQMt6zBj1tUJhfrhCKRJNEAHdWSsaoTiQcAHIwMM06UMpklSPs2EJpOC6S4YVQUXyuyK2kyqBy56l6Uq2EarxapaB3X296Og4mk5u82Xa5Wn061b9h2fEDO13uwEu4F9716G1R3DQ2HwxGaZFjzBEMjYDMrGMwEl-Lc75M5VPMvdtSsrY-bvC5-Mip4SoQDMsqm-i6vKvJ1uINvMTaLi2w5tqOnZmhcXoGvcvogUOc7gU6U4Th604wda8FRsugariGXyobiV69AeR5EdSZYXumIBPF+vTobo1KPgWRbPCWb5Sr+sovj+wx-oG9YzEBg56kh2ztocprdtBs6wQuIFibBEmjuOLJuoxM6tgpKy4Yu+HrsaWJEGwADmxG0YGZEHLIxlmfyVGMpelkrPRbS2SZ5nMSmrEvhxmRKvxPG2gqnGBeW-5TIB2rNohylGh2FxQRaclYaJrYqShQL-ERmEDoGelRgZG4KGAWJIAAbhZBJpoeBwAIKYGVlUOSmTk0XRsKNc1VXeeevkhf5741nkX5XJW5SsGwAYgPoQA

Renders six InlineEntryCard components with actions and statuses: published, new, draft, deleted, changed, and archived. Each card includes Copy and Delete menu items and a title. Use this as a playground reference for the @contentful/f36-components InlineEntryCard API.

```jsx
import React from 'react';

import { InlineEntryCard, MenuItem } from '@contentful/f36-components';

export default function BasicInlineEntryCardExample() {

return (

<>

<InlineEntryCard

actions={[

<MenuItem key="copy">Copy</MenuItem>,

<MenuItem key="delete">Delete</MenuItem>,

]}

status="published"

title="Published Entry Title"

>

Published entry body

</InlineEntryCard>

<InlineEntryCard

actions={[

<MenuItem key="copy">Copy</MenuItem>,

<MenuItem key="delete">Delete</MenuItem>,

]}

status="new"

title="New Entry Title"

>

New entry body

</InlineEntryCard>

<InlineEntryCard

actions={[

<MenuItem key="copy">Copy</MenuItem>,

<MenuItem key="delete">Delete</MenuItem>,

]}

status="draft"

title="Draft Entry Title"

>

Draft entry body

</InlineEntryCard>

<InlineEntryCard

actions={[

<MenuItem key="copy">Copy</MenuItem>,

<MenuItem key="delete">Delete</MenuItem>,

]}

status="deleted"

title="Deleted Entry Title"

>

Deleted entry body

</InlineEntryCard>

<InlineEntryCard

actions={[

<MenuItem key="copy">Copy</MenuItem>,

<MenuItem key="delete">Delete</MenuItem>,

]}

status="changed"

title="Changed Entry Title"

>

Changed entry body

</InlineEntryCard>

<InlineEntryCard

actions={[

<MenuItem key="copy">Copy</MenuItem>,

<MenuItem key="delete">Delete</MenuItem>,

]}

status="archived"

title="Archived Entry Title"

>

Archived entry body

</InlineEntryCard>

</>

);
}
```

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

### TextInput.Group with Action Buttons

Source: https://f36.contentful.com/components/text-input

Use TextInput.Group to place a button at the start or end of an input. The example shows two groups: one with default spacing and one with spacing="spacingS", each with a lock/unlock IconButton.

```jsx
function TextInputGroupExample() {
  const [isFirstLocked, setFirstLocked] = useState(true);
  const [isSecondLocked, setSecondLocked] = useState(true);
  return (
    <Stack flexDirection="column">
      <TextInput.Group>
        <TextInput
          aria-label="Content type name"
          id="content-type-name"
          defaultValue="blog"
          isDisabled={isFirstLocked}
        />
        <IconButton
          variant="secondary"
          icon={isFirstLocked ? <LockSimpleIcon /> : <LockSimpleOpenIcon />}
          onClick={() => {
            setFirstLocked((value) => !value);
          }}
          aria-label="Unlock"
        />
      </TextInput.Group>
      <TextInput.Group spacing="spacingS">
        <TextInput
          aria-label="Content type name"
          id="content-type-name-2"
          defaultValue="blog"
          isDisabled={isSecondLocked}
        />
        <IconButton
          variant="secondary"
          icon={isSecondLocked ? <LockSimpleIcon /> : <LockSimpleOpenIcon />}
          onClick={() => {
            setSecondLocked((value) => !value);
          }}
          aria-label="Unlock"
        />
      </TextInput.Group>
    </Stack>
  );
}
```

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

### Basic Layout Example with Form

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMbAGl2FwFcBnGAZWyOxlwF9cAzTCFXAOSZipAQG4AOgDtUGHJWm5cAIQgAPMopXVs2CFM1SlAMSwpDJswGF92XgBsLuACow12AJJS0Op6-dEwkROADJEAJ4QvloAEsSwmIacPHyCAAKQUqxZXNT2APRcAMwAbAC0kOj6MFm04tLSbnJ4sFxEeXi5UqRI+ipEtEhgYZE6AKJqROj2MAAUAJQKRriZtHgA2rTUAEYoSLpIUgDmFPTYDDt7B8cAurgAvDT0TCxzbfb085LLq3hbu-tTJh+I8Fg8AHxLJRKM4XAHXI6zOzUGBfLQwmDYZyoGBRbCzMH3SGwy77bCHRHvT4UACMAAYGWjluxvlphNhqJgjLN0bgADwjPG8pQAC3iMEw92AwuhAoieIAdHEiAlwTLofzlQlcOTsDN7hIQABNKKYXAAEUxRCQH0NuHyauWGqUfPygp0SvFmEdzo4vJ9zrlo2wCtUUHCAd9fNUalwaBVUApBpAUmqdpQgSOh1Uuj4ydo8bAFIAGvZDZHffygfx9HCrlL-ldq+wK5Wq9ZbA5W2328CbFkHAqwtsYPZcEhaIQAI7UJDCKDggByUxgrur-bsEHsQ6II-s3bbfP8nm8OntB8rfPXna3nvsaGPF7bAAUZgM2DVWGbRmauHO1rgUgruql75NeA63nE96PiBGprh2EH7g0To9leCGbkhKE9r2KAboOw6juClq0GAmBIGg5L6PBfY3tuBGYdhcHHoExDnrBgbgRhd4Pm42BPpWrj2GOKBsLueK4D+9D2Fw7FwWB6GDlBPHuPxLryTRiGOrJ-LKDoehGAAboESBEFkyZoGRGaYOEdrYOEaAwPmpLYHaE7mhOu4zFADbOeSxwttpSjAI2ZIUrgAD8gh1mSMBQAIuDwIIVj2EMADWuAiTqEC4CF2ACOw2murpuZSPx1EoBeRXqN2rruiGYYRrytXyjoAZMgVUggOwQA

A React component using @contentful/f36-components to create a layout with a header and a form. It demonstrates form controls, text input, textarea, and a submit button with a simulated loading state.

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

import {
  Box,
  Button,
  Form,
  FormControl,
  TextInput,
  Textarea,
  Layout,
  Header,
} from '@contentful/f36-components';

export default function BasicLayoutExample() {
  const [submitting, setSubmitting] = useState(false);

  const submitForm = () => {
    setSubmitting(true);
    setTimeout(() => setSubmitting(false), 1000);
  };

  return (
    <Layout
      header={
        <Layout.Header>
          <Header title="Your Details" />
        </Layout.Header>
      }
    >
      <Layout.Body>
        <Box padding="none" marginBottom="spacingXl">
          <Form onSubmit={submitForm}>
            <FormControl>
              <FormControl.Label isRequired>Name</FormControl.Label>
              <TextInput />
              <FormControl.HelpText>
                Please enter your first name
              </FormControl.HelpText>
            </FormControl>
            <FormControl>
              <FormControl.Label>Description</FormControl.Label>
              <Textarea />
              <FormControl.HelpText>
                Tell me about yourself
              </FormControl.HelpText>
            </FormControl>
            <Button variant="primary" type="submit" isDisabled={submitting}>
              {submitting ? 'Submitted' : 'Click me to submit'}
            </Button>
          </Form>
        </Box>
      </Layout.Body>
    </Layout>
  );
}
```

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

### RelativeDateTime with ISO string, Date object, and UNIX Epoch

Source: https://f36.contentful.com/components/relative-datetime

Pass a date as an ISO 8601 string, a JS Date object, or a UNIX Epoch time to get a relative date string. The component returns a relative date string for resolutions from seconds up through years.

```jsx
<Stack flexDirection="column">
  {/* passing a timestamp as an ISO string */}
  <RelativeDateTime date="2021-08-17T15:45" />
  {/* passing a JS Date */}
  <RelativeDateTime date={new Date()} />
  {/* passing a UNIX Epoch */}
  <RelativeDateTime date={1629240300000} />
</Stack>
```

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

### Header with back button and breadcrumbs

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcAJYrEy4AvrgpVaAAUhtsMOWQCuAGwD0ZAMwA2ALSR0ENguwBnZu3YwAHlzywyRVeSVtSSI-0ExMAUWtE6CowABQAlDzsuLj02EqYbLghUdG4ADwCREIpqbjYSNjBALwsIACCOEhgwaU5qQDuBQAWAEIkANYtStjYRkXA2JhKMCJ10QBGHV09RgAKlGim-bxGAMIqVe3wSRFFAHy4sqYQwQB0KhAA5iE0k2DtuOPdvYnVmzQRIqOJuY-0WWAhihxktgABtMapYCQ3KyeRybY0VZGeF4AAqAE80DBzAAaGGpeIqREAYho+J+v1Saw29224Vw+0ORmOZwu1yRKJMuEx2NMh1p7RgUA+FKp0REYt+AF1vrk1HsUmFWGxviAREA

Renders a Contentful Forma 36 Header component with a title, back button, and breadcrumbs. The back button and breadcrumb click handlers log to the console. Use this as a starting point for header navigation in a Contentful app.

```jsx
import React from 'react';

import { Header } from '@contentful/f36-components';

export default function HeaderExample() {

return (

<Header

title="Article"

withBackButton={true}

backButtonProps={{ onClick: () => console.log('back button click') }}

breadcrumbs={[

{

content: 'Content Types',

url: '#',

onClick: () => console.log('Content Types clicked'),

},

]}

/>

);
}
```

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

### Basic Layout Example with Form and Sidebar

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMbAGl2FwFcBnGAZWyOxlwF9cAzTCFXAOSZipAQG4AOgDtUGHJWm5cAIQgAPMopXVs2CFM1SlAMSwpDJswGF92XgBsLuACow12AJJS0Op6-dEwkROADJEAJ4QvloACoFEAOaYRGgAFoacPHyCAAKQUqwFXNT2APRcAMwAbAC0kOj6MAW04tLSbnJ4sFxEJXjFUqRI+ipEtEhgYZE6AKJqROj2MAAUAJQKRrj5tHgA2rTUAEYoSLpIUgkU9NgMRydnFwC6uAC8NPRMLCs99vSrkpttngDsdTqZMPw3mtXgA+DZKJTXW6gh4JZZ2agwf5aREwbDOVAwKLYZbQl5wpF3U7Yc5on5-CgARgADKzsZt2ACtMJsNRMEZljjcAAeKbEoVKTBIBKpG5IWCHQIvYAShGiiLEgB0DHlMEVmBhqoRItUalwaCIUCgtJeEhAUkadtwKECCXOql0fFtIFoFrAtIAGvY7YbNsbwyK4skkilUjCdQrArgbAUmthhaUo4lkmlQxHjRnTXn8xmxTptbr9cXjewhdW1WXsJrVFBwvWC6bzZbrRdvQ6pDAnS7MG6pB69Chvb6SIHgyB2+HheD+PpkfdlSD7sv2AuI0vrLYHLuS8uU3YIPZNWFDjB7LgkLRCABHahIYRQGEAOQWMAzp8PF5XkQN72Mee7+J43g6LgpRgYu-4FA4moABK3mgEFwRGMRLGMbBpjAmC4NMhFcG+Oy4FIP5GiWpQIeel6ofY6FuNgmEirRB6IReobUQWdFHrx8GcfRQEgTCAAiMC0GAUpoDS+h-sJSHXrebFKMKEGBMQMFqSK-GAYxzHuLpSiuPYd4oGwwHEkRUSYPQ9hcIJBYcRCZ5IYZGHOex+mgW0Yb5upyg6HoRgAG6BEgRAFN6aBSsO4ROtg4RoDAU5UtgToPuJD7AUsUAbhlNIXDu3lKMAm7UrSuAAPyCGu1IwFAAi4PAghWPYEwANbOmwei4JV2ACLWAWBYWIX6HBikQsehbqAupYauWLZtkKi3TKxWjsiNIDsEAA

A React component using @contentful/f36-components to demonstrate a Layout with a right sidebar and a form. It includes a submit button that shows 'Submitted' for 1 second when clicked. Useful for building a basic page layout with a form and sidebar.

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

import {
  Box,
  Button,
  Form,
  FormControl,
  TextInput,
  Textarea,
  Layout,
  Paragraph,
} from '@contentful/f36-components';

export default function BasicLayoutExample() {
  const [submitting, setSubmitting] = useState(false);

  const submitForm = () => {
    setSubmitting(true);
    setTimeout(() => setSubmitting(false), 1000);
  };

  return (
    <Layout
      rightSidebar={
        <Layout.Sidebar>
          <Box padding="none" marginBottom="spacingXl">
            <Paragraph>Sidebar Content</Paragraph>
          </Box>
        </Layout.Sidebar>
      }
    >
      <Layout.Body>
        <Box padding="none" marginBottom="spacingXl">
          <Form onSubmit={submitForm}>
            <FormControl>
              <FormControl.Label isRequired>Name</FormControl.Label>
              <TextInput />
              <FormControl.HelpText>
                Please enter your first name
              </FormControl.HelpText>
            </FormControl>
            <FormControl>
              <FormControl.Label>Description</FormControl.Label>
              <Textarea />
              <FormControl.HelpText>
                Tell me about yourself
              </FormControl.HelpText>
            </FormControl>
            <Button variant="primary" type="submit" isDisabled={submitting}>
              {submitting ? 'Submitted' : 'Click me to submit'}
            </Button>
          </Form>
        </Box>
      </Layout.Body>
    </Layout>
  );
}
```

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

### Secondary Badge Example

Source: https://f36.contentful.com/components/badge

Used for all the secondary elements, for example in the list of versions.

```jsx
function SecondaryBadgeExample() {
  return <Badge variant="secondary">Current</Badge>;
}
```

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

### Image component basic usage

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcBJFEQDmMXAF9cFKrQACkNthgKyAVwA2AejIBmAGwBaSOghsl2AM7N27GAA8ueWGSLryKtqSQn+gkQCEicyQwAFFbInQ1GAAKAEoedlxcemwVTDZcaMSk3AAeAWEYbJzcIjVsAF4aAEEM1ELccyIATyQ2IVwWEBCANxhMZpNRJHNcAHcYNSNRAAt+opAaYpy5pCEZyq6AJgAOAEY0Wy7lpLGkKGwZiq6AVgAGO8PjjJyNAD5s2NY2MXYQMSAA

Renders an Image component with alt, height, and width props. The alt text is 'An image saying "Everyone is welcome here"'. This example is from the Playground page and can be opened in CodeSandbox.

```jsx
import React from 'react';

import { Image } from '@contentful/f36-components';

export default function ImageBasicExample() {

  return (

    <Image

      alt='An image saying "Everyone is welcome here"'

      height="281px"

      width="500px"

    />

  );

}
```

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

### Warning Badge Example

Source: https://f36.contentful.com/components/badge

Used for the entity that has been deleted.

```jsx
function WarningBadgeExample() {
  return <Badge variant="warning">Draft</Badge>;
}
```

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

### size

Source: https://f36.contentful.com/components/datepicker

Size variations

```APIDOC
## Property: size

### Description
Size variations

### Type
"small" | "medium"
```

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

### Negative Badge Example

Source: https://f36.contentful.com/components/badge

Used for the entity that has been deleted.

```jsx
function NegativeBadgeExample() {
  return <Badge variant="negative">Deleted</Badge>;
}
```

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

### Positive Badge Example

Source: https://f36.contentful.com/components/badge

Used for the entity that has been published.

```jsx
function PositiveBadgeExample() {
  return <Badge variant="positive">Published</Badge>;
}
```

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

### Primary Badge Example

Source: https://f36.contentful.com/components/badge

Used for the entity that has been changed.

```jsx
function PrimaryBadgeExample() {
  return <Badge variant="primary">Changed</Badge>;
}
```

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

### Navbar Loading Skeleton Example in React

Source: https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwAQCUYBDMPAM0whVwHJNjSaBuAHQDtUMddhcA5IgDcARkUy4AvrgpVaAAUhtsMJWQCuAGwD0ZAMwA2ALRshozM3bsYADy55YZIpvJq2pJBDa4AMhCJQkNgBzAGUAaxgNGGxPARExAFFrInQogAoASh52XFx6bDVMLzSc3NwAHjizUrLcEkhXbABeYErTMQA6AEEwBqVwyOjPOswkIm8iYUimlhBff0Cgut6IRtncLQA+CRqygGcAdyRsMAALGEwWtvjMDpCjk-PxJD35gOCN7d3clCJAuKQQSI2A8bBa3zK5U2ENq1zMHQAksoUAMojEvDA9iDfsooAB1JBQbCnFoARgADOSpFsYZCqp0kTAURE0cNMdjgTB8YTiWTKdToV5asK4QzkaihhisahOdyiSTgBSqZ9ablRbdGczBujcOyZbiCfK+cqaULhRVTeadmaVUKMqw2NaQBIgA

Renders a Navbar with skeleton placeholders for account, switcher, and main navigation items. Use this to show a loading state while data is being fetched. The example uses @contentful/f36-navbar components: Navbar.AccountSkeleton, Navbar.Switcher with isLoading, and Navbar.ItemSkeleton with estimatedWidth.

```jsx
import React from 'react';

import { Navbar } from '@contentful/f36-navbar';

export default function LoadingSkeletonNavbarExample() {

return (

<Navbar

account\={<Navbar.AccountSkeleton ariaLabel\="Loading account" />}

switcher\={<Navbar.Switcher isLoading />}

mainNavigation\={

<\>

<Navbar.ItemSkeleton estimatedWidth\={100} />

<Navbar.ItemSkeleton estimatedWidth\={100} />

<Navbar.ItemSkeleton estimatedWidth\={100} />

<Navbar.ItemSkeleton estimatedWidth\={100} />

</\>

}

/>

);
}
```

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

### Icon Colors Example

Source: https://f36.contentful.com/components/icon

Shows how to set icon colors using the color prop with design tokens for primary, positive, negative, warning, accent, white, muted, and default. Includes a custom styled container for the white icon.

```jsx
function IconColorsExample() {
  return (
    <Stack>
      <Flex alignItems="center" gap="spacingS">
        <GearSixIcon color={tokens.colorPrimary} /> <Text>Primary</Text>
      </Flex>
      <Flex alignItems="center" gap="spacingS">
        <GearSixIcon color={tokens.colorPositive} /> <Text>Positive</Text>
      </Flex>
      <Flex alignItems="center" gap="spacingS">
        <GearSixIcon color={tokens.colorNegative} /> <Text>Negative</Text>
      </Flex>
      <Flex alignItems="center" gap="spacingS">
        <GearSixIcon color={tokens.colorWarning} /> <Text>Warning</Text>
      </Flex>
      <Flex alignItems="center" gap="spacingS">
        <GearSixIcon color={tokens.purple600} /> <Text>Accent</Text>
      </Flex>
      <Flex
        alignItems="center"
        gap="spacingS"
        className={css({
          backgroundColor: tokens.gray600,
          padding: tokens.spacingXs,
          borderRadius: tokens.borderRadiusSmall,
        })}
      >
        <GearSixIcon color={tokens.colorWhite} />{' '}
        <Text fontColor="colorWhite">White</Text>
      </Flex>
      <Flex alignItems="center" gap="spacingS">
        <GearSixIcon color={tokens.gray600} /> <Text>Muted</Text>
      </Flex>
      <Flex alignItems="center" gap="spacingS">
        <GearSixIcon /> <Text>Default</Text>
      </Flex>
    </Stack>
  );
}
```

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

### Install beta version of f36-datepicker with yarn

Source: https://f36.contentful.com/guidelines/component-statuses

Alternative to npm for installing the beta version of the Datepicker component. Yarn is a package manager that can be used interchangeably with npm for this installation.

```bash
yarn add @contentful/f36-datepicker@beta
```

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

### Layout with header and sidebars

Source: https://f36.contentful.com/components/layout

Use this example to create a layout with a header, left sidebar, and right sidebar. The header displays a title, and the body includes a form with name and description fields. The submit button shows a loading state for one second when clicked.

```jsx
function BasicLayoutExample() {
  const [submitting, setSubmitting] = useState(false);
  const submitForm = () => {
    setSubmitting(true);
    setTimeout(() => setSubmitting(false), 1000);
  };

  return (
    <Layout
      header={
        <Layout.Header>
          <Header title="Your Details" />
        </Layout.Header>
      }
      leftSidebar={
        <Layout.Sidebar>
          <Box padding="none" marginBottom="spacingXl">
            <Paragraph>Sidebar Content</Paragraph>
          </Box>
        </Layout.Sidebar>
      }
      rightSidebar={
        <Layout.Sidebar>
          <Box padding="none" marginBottom="spacingXl">
            <Paragraph>Sidebar Content</Paragraph>
          </Box>
        </Layout.Sidebar>
      }
    >
      <Layout.Body>
        <Box padding="none" marginBottom="spacingXl">
          <Form onSubmit={submitForm}>
            <FormControl>
              <FormControl.Label isRequired>Name</FormControl.Label>
              <TextInput />
              <FormControl.HelpText>
                Please enter your first name
              </FormControl.HelpText>
            </FormControl>

            <FormControl>
              <FormControl.Label>Description</FormControl.Label>
              <Textarea />
              <FormControl.HelpText>
                Tell me about yourself
              </FormControl.HelpText>
            </FormControl>

            <Button variant="primary" type="submit" isDisabled={submitting}>
              {submitting ? 'Submitted' : 'Click me to submit'}
            </Button>
          </Form>
        </Box>
      </Layout.Body>
    </Layout>
  );
}
```

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

### Featured Badge Example

Source: https://f36.contentful.com/components/badge

Used for featured entities that should be highlighted.

```jsx
function FeaturedBadgeExample() {
  return <Badge variant="featured">Trial</Badge>;
}
```
Tokens:
Raw