Row of glossy app icons where hovering one bounces a mock preview out of it, with name, blurb and button, while the rest of the page softens into a blur.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/app-shelf
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { Camera, Music } from "lucide-react";4import { AppShelf } from "@/components/blocks/app-shelf";56export function Apps() {7return (8<AppShelf9title="Things we make"10intro="Two small apps from a two-person studio."11apps={[12{ id: "snap", name: "Snapline", description: "Photo notes for field teams.", href: "/snapline", icon: Camera, colors: ["#60a5fa", "#2563eb"] },13{ id: "beat", name: "Beatbox", description: "A pocket drum machine.", href: "/beatbox", icon: Music, colors: ["#f472b6", "#be185d"], preview: <img src="/beatbox.png" alt="" /> },14]}15/>16);17}
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | "A small studio of useful things" | Heading above the icons |
| intro | ReactNode | Sample bio | Paragraph under the icons |
| apps | ShelfApp[] | 4 sample apps | Apps: id, name, label, description, ctaLabel, href, colors, and either artwork (a finished icon) or icon (a glyph on a gradient tile), plus an optional preview node |
| className | string | – | Extra classes on the section |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.