---
title: Use cases
description: Environment-specific sample dashboards — inspiration one tier below the bundled presets.
---
Sample home / project dashboards one curation tier below the bundled
[presets](/showcases/presets/) — they assume a specific city, account, RSS
feed, or other environment-specific bit, so they aren't shipped as
`splashboard install --template` choices. Drop a TOML in
[`examples/usecases/`](https://github.com/unhappychoice/splashboard/tree/main/examples/usecases)
to add one.
User-submitted dashboards live on the [Community](/showcases/community/) page,
under a looser curation bar.
export const usecaseHtml = Object.fromEntries(
Object.entries(import.meta.glob('../../../assets/rendered/usecases/*.html', {
query: '?raw',
import: 'default',
eager: true,
})).map(([path, html]) => [path.split('/').pop().replace(/\.html$/, ''), html])
);
export const usecaseIndex = (() => {
const indexes = import.meta.glob('../../../assets/rendered/usecases/_index.json', { eager: true });
const first = Object.values(indexes)[0];
return first ? (first.default ?? first) : [];
})();
{usecaseIndex.length === 0 && (
<p><em>No use cases yet — run <code>cargo xtask</code> to generate them, or open a PR adding a TOML to <code>examples/usecases/</code>.</em></p>
)}
{usecaseIndex.map((item) => (
<section key={item.slug}>
<h3>{item.title} <code>{item.slug}</code></h3>
<p>{item.description}</p>
{item.requires && item.requires.length > 0 && (
<p><strong>Requires:</strong> {item.requires.join(', ')}</p>
)}
{item.code && (
<details class="splash-config">
<summary>Show config</summary>
<pre><code>{item.code}</code></pre>
</details>
)}
<div class="splash-landing" set:html={usecaseHtml[item.slug] ?? ''} />
</section>
))}