Item
The Item is a content box used throughout the examples. Inside Stack/HStack/VStack (visual lists) items use the surface variant — rounded, bordered, and themed. Inside Container/Row/Col (layout slicing) items are plain — no color, no border.
One
Two
Three
One
Two
Three
// apps/docs/src/components/examples/item/in-stack/react.tsx
import { Item, Stack } from '@cloudvoyant/helical-react';
export default function ReactItemInStack() {
return (
<Stack>
<Item variant="surface">One</Item>
<Item variant="surface">Two</Item>
<Item variant="surface">Three</Item>
</Stack>
);
}<!-- apps/docs/src/components/examples/item/in-stack/svelte.svelte -->
<script lang="ts">
import { Item, Stack } from '@cloudvoyant/helical-svelte';
</script>
<Stack>
<Item variant="surface">One</Item>
<Item variant="surface">Two</Item>
<Item variant="surface">Three</Item>
</Stack>Examples
In Container
One
Two
Three
One
Two
Three
// apps/docs/src/components/examples/item/in-container/react.tsx
import { Item, Row } from '@cloudvoyant/helical-react';
export default function ReactItemInContainer() {
return (
<Row className="gap-2">
<Item>One</Item>
<Item>Two</Item>
<Item>Three</Item>
</Row>
);
}<!-- apps/docs/src/components/examples/item/in-container/svelte.svelte -->
<script lang="ts">
import { Item, Row } from '@cloudvoyant/helical-svelte';
</script>
<Row class="gap-2">
<Item>One</Item>
<Item>Two</Item>
<Item>Three</Item>
</Row>API Reference
Item
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant |
'plain' | 'surface' |
'plain' |
surface adds a rounded border border-border bg-card text-card-foreground (themed); plain is square-cornered with no color or boundary. |
className / class |
string |
— | Merged last via cn; override growth, padding, rounding, or background with Tailwind classes. |
Accessibility
Renders a native <div>, so it requires no roles or keyboard handling.