import { Meta } from '@storybook/blocks';

import * as SiteHeaderStories from './SiteHeader.stories.svelte';

<Meta of={SiteHeaderStories} />

# SiteHeader

Reuters dotcom site header, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-header).

> **Note:** In the graphics kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.

```svelte
<script>
  import { SiteHeader } from '@reuters-graphics/graphics-components';
</script>

<SiteHeader />
```

## Dark theme

Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component. ([Demo](?path=/story/components-page-furniture-siteheader--customised-theme))

```svelte
<script>
  import { SiteHeader, Theme } from '@reuters-graphics/graphics-components';
</script>

<Theme base="dark">
  <SiteHeader />
</Theme>
```