Item

@sushindustries/ui

One row of a list: tile, title, description, meta - the nav panel's anatomy, extracted for reuse.

5 min read
View as MarkdownEdit on GitHub

Install commands are on Home, attached from the registry - they are not written here, because a second copy is a copy that goes stale. This tab starts after the install worked.

Use it

import { Item } from "@sushindustries/ui";

export function Example() {
	return (
		<Item
			title="Grid"
			description="A responsive grid with no breakpoints in it."
			meta="ui"
			icon="grid"
			tone="layout"
			href="/packages/ui/docs/grid"
		/>
	);
}
tsx

What you should see

One row: a small toned tile with the grid glyph on the left, the title in bold above a fainter description line, and "ui" right-aligned. The whole row is a link, because href was given - drop it and the same row renders as a plain <div> instead.

If nothing happens

tone does nothing without iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content - the tile, and the only thing tone colors, is not rendered at all when iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content is left unset. If the row shows text but no tile where you expected one, check iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content is set first.

UsesIconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content