# Kitchen sink
> Every element ZenithDocs can render, on a single page.
Source: https://aymericchaverot.github.io/zenith-docs/writing/kitchen-sink/
This page uses every Markdown feature and component available in ZenithDocs. Use it to check a theme at a glance.
## Theme
Switch the accent preset to preview it on this page. Use the button in the header to toggle dark mode.
Backdrop styles, drawn behind the top of the page. Scroll back up after switching.
## Typography
A regular paragraph with **bold**, _italic_, **_bold italic_**, ~~strikethrough~~, `inline code`, highlighted text, CSS, H2O and E = mc2. Press Ctrl + Shift + P to open the command palette.
Links can point to [another page](/installation/), to [a section of this page](#code-blocks), or to [an external site](https://astro.build). Bare URLs are linked too: https://lumosframework.com.
A second paragraph follows, long enough to wrap on several lines, so you can judge the line height and measure of body text. Good documentation reads like a conversation: short sentences, concrete examples and a clear structure make it easy to skim.
### Heading level 3
#### Heading level 4
##### Heading level 5
###### Heading level 6
### Heading with a custom id [#custom-anchor]
This heading uses `[#custom-anchor]` to set its id.
## Lists
- Unordered item
- Item with **formatting** and `code`
- Nested item
- Another nested item
- Third level
- Last item
1. First step
2. Second step
1. Nested ordered item
2. Another one
3. Third step
- [x] Completed task
- [x] Another completed task
- [ ] Pending task
## Blockquote
> Documentation is a love letter that you write to your future self.
>
> It can span several paragraphs, and contain `code` or **formatting**.
## Table
| Left aligned | Centered | Right aligned |
| :------------- | :------: | -----------------------------------------: |
| Search | Yes | Static index with Pagefind |
| i18n | Yes | Several languages, with a fallback |
| `llms.txt` | Yes | Markdown output for LLMs |
| Playground | No | Out of scope for a static site |
## Image
## Details
Native details element
Raw HTML works in MDX, including ``.
## Horizontal rule
Content above the rule.
---
Content below the rule.
## Callouts
### Directives
:::note
A note with a [link](/installation/) and `inline code`.
:::
:::tip[Custom title]
A tip with a custom title.
:::
:::important
An important callout.
:::
:::success
A success callout.
:::
:::warning
A warning callout containing a list:
- First point
- Second point
:::
:::danger
A danger callout containing a code block:
```sh
rm -rf node_modules
```
:::
:::info
`info` is an alias of `note`, like `warn` for `warning` and `error` for `danger`.
:::
### GitHub alerts
[GitHub alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) are a Markdown extension supported on GitHub: a blockquote starting with `[!TYPE]`. ZenithDocs renders them as callouts, so the same file looks right both on GitHub and on your site. Each of the five alert types has its own style.
> [!NOTE]
> Useful information that users should know.
> [!TIP]
> Helpful advice for doing things better.
> [!IMPORTANT]
> Key information users need to know.
> [!WARNING]
> Urgent info that needs immediate attention.
> [!CAUTION]
> Advises about risks or negative outcomes.
### Component
Written with the `` component, which accepts **any** Markdown.
## Code blocks
```
A code block without a language.
```
```ts title="src/greet.ts"
interface Options {
name: string;
excited?: boolean;
}
return `Hello, ${name}${excited ? '!' : '.'}`;
}
```
```ts {2}
const first = 'meta highlight';
const second = 'this line is highlighted from the meta';
const third = 'back to normal';
```
```js
const regular = true;
const important = true; // [!code highlight]
const alsoRegular = true;
```
```js
// [!code word:zenith]
```
```js title="astro.config.mjs"
integrations: [
starlight({ title: 'Docs' }), // [!code --]
zenith({ title: 'Docs' }), // [!code ++]
],
});
```
```css
.card {
padding: 1rem;
border-radius: var(--radius-main); /* [!code focus] */
background: var(--background-2);
}
```
```json lineNumbers title="package.json"
{
"name": "my-docs",
"type": "module",
"scripts": {
"dev": "astro dev",
"build": "astro build"
}
}
```
```astro title="src/components/Hello.astro"
---
const { name } = Astro.props;
---
Hello, {name}!
```
```yaml
title: Kitchen sink
sidebar:
label: Every element
hidden: false
```
```bash
npx zenith build && npx zenith preview --open
```
```ts
const aVeryLongLine = 'This line is deliberately long so that the code block has to scroll horizontally instead of wrapping, which keeps the code readable.';
```
## Cards
The whole card is clickable.
A static card with an icon.
Just a title and a description.
## Tabs
```sh
npm install github:AymericChaverot/zenith-docs
```
```sh
pnpm add github:AymericChaverot/zenith-docs
```
This set follows the one above, and the choice is remembered across pages, including the installation page.
Selected **pnpm**.
Tabs can hold any content, like lists:
- One
- Two
Without `items`, the tab list is built from each `` value.
## Steps
### Install
Add the package to your project.
### Configure
Register the integration in `astro.config.mjs`.
### Write
Create your first page in `src/content/docs`.
## Accordions
Opening another accordion of the group closes this one.
Accordions are native `` elements.
No JavaScript involved.
Accordions can also be used on their own.
## Files
## Icons
Built-in icons can be used anywhere with the `Icon` component:
## Footnotes
ZenithDocs builds on Lumos[^lumos] and Astro[^astro].
[^lumos]: A CSS framework built around design tokens and cascade layers.
[^astro]: A web framework for content-driven websites.