Components
Loading preview...
An 8-bit styled item row for lists and inventories. Composes ItemGroup, Item, ItemContent, ItemTitle, ItemDescription, ItemActions and a pixelated ItemSeparator, with default, outline and muted variants in the retro pixel theme.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/8bit-item"use client";
import { Button } from "@/components/ui/8bit-button";
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemGroup,
ItemSeparator,
ItemTitle,
} from "@/components/ui/8bit-item";
export default function Default() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro">
<div className="w-full max-w-md">
<ItemGroup>
<Item variant="outline">
<ItemContent>
<ItemTitle>Sword • 300$</ItemTitle>
<ItemDescription>The demonic sword</ItemDescription>
</ItemContent>
<ItemActions>
<Button variant="outline" size="sm">
Buy
</Button>
</ItemActions>
</Item>
<ItemSeparator />
<Item variant="outline">
<ItemContent>
<ItemTitle>Shield • 250$</ItemTitle>
<ItemDescription>The divine shield</ItemDescription>
</ItemContent>
<ItemActions>
<Button variant="outline" size="sm">
Buy
</Button>
</ItemActions>
</Item>
<ItemSeparator />
<Item variant="outline">
<ItemContent>
<ItemTitle>Bow • 280$</ItemTitle>
<ItemDescription>The bow of precision</ItemDescription>
</ItemContent>
<ItemActions>
<Button variant="outline" size="sm">
Buy
</Button>
</ItemActions>
</Item>
</ItemGroup>
</div>
</div>
);
}