Inventory
Mist Palette
Headlines
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Text
This is a default paragraph with body size. It uses leading-relaxed for comfortable reading.
This is muted text with reduced contrast, perfect for secondary content.
This is caption text, useful for fine print, metadata, or supplementary information like timestamps.
Links
Here is a default link in a paragraph.
External links open in new tab with proper attributes.
Blockquote
The best way to predict the future is to invent it.
The best way to predict the future is to invent it.— Alan Kay
Callout
Divider
Content above the divider.
Content below the default divider.
Content left the vertical divider.
Content right the vertical divider.
Buttons
Card
Card Title
This is an example of a card component. Cards are used to group related information together in a visually distinct container.
Overlays
Code
Inline
This is a highlighted inline code: console.log("hello world").
Basic
console.log('Hello World');// Using 'typeof' to infer types
const person = { name: 'Alice', age: 30 };
type PersonType = typeof person; // { name: string; age: number }
// 'satisfies' to ensure a type matches but allows more specific types
type Animal = { name: string };
const dog = { name: 'Buddy', breed: 'Golden Retriever' } satisfies Animal;
// Generics with 'extends' and default values
function identity<T extends number | string = string>(arg: T): T {
return arg;
}
let str = identity(); // Default type is string
let num = identity(42); // T inferred as number
// 'extends' with interface and class
interface HasLength {
length: number;
}
function logLength<T extends HasLength = string>(arg: T): void {
console.log(arg.length);
}
logLength('Hello'); // OK: string has length (default is string)
logLength([1, 2, 3]); // OK: array has length
// logLength(123); // Error: number doesn't have length
// 'typeof' with functions
function add(x: number, y: number): number {
return x + y;
}
type AddFunctionType = typeof add; // (x: number, y: number) => number
// Generic interfaces with 'extends' and default types
interface Box<T extends object = { message: string }> {
content: T;
}
let defaultBox: Box = { content: { message: 'Hello' } }; // Uses default type
let customBox: Box<{ status: number }> = { content: { status: 200 } };
// Complex example with 'satisfies' and default generics
type Task = {
title: string;
description?: string;
completed: boolean;
};
const myTask = {
title: 'Learn TypeScript',
completed: false,
priority: 'High',
} satisfies Task; // Allows priority but ensures Task structure
// Generic function with default type
function wrapInArray<T = string>(value: T): T[] {
return [value];
}
const stringArray = wrapInArray(); // Default to string
const numberArray = wrapInArray(42); // T inferred as number
/**
* Combines two generic types into a tuple.
*
* @template T - The first type.
* @template U - The second type.
* @param {T} first - The first value.
* @param {U} second - The second value.
* @returns {[T, U]} A tuple containing both values.
*/
function combine<T, U>(first: T, second: U): [T, U] {
return [first, second];
}With Title
console.log('Hello World');With Line Numbers
const a = 'Hello World';
console.log(a);Highlighted Lines
// highlight a line
<div>Hello World</div> Word Highlighting
// highlight a word
<div>Fumadocs</div>Diff Styles
console.log('hewwo');
console.log('hello'); Focus
const observer = new ResizeObserver(() => {
console.log('Element resized');
});
return observer;
observer.observe(element);Tab Groups
console.log('A');Time Logo
Scrub hour (interactive)
12:00 · noon · 0°
Live — Berlin time, ticks every minute
Every hour 00 – 23
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Palettes
Mist · 03:00
Dawn · 07:00
Noon · 12:00
Sunset · 18:00
Sizes (live)
24px
32px
48px
64px
96px
128px