New Tab Shortcuts
GitHub
Linear
Stripe
Notion
Slack
Gmail
3×2 grid of colored initial tiles with site names below. Classic new-tab quick launcher.
The import and the props worth knowing about, in one place.
import { Browser19 } from "@/components/beste/piece/browser19";
<Browser19
shortcuts={[
{
"name": "GitHub",
"url": "github.com",
"tint": "slate"
},
{
"name": "Linear",
"url": "linear.app",
"tint": "violet"
},
{
"name": "Stripe",
"url": "stripe.com",
"tint": "emerald",
"src": "https://oud.pics/sm/l/stripe.jpeg",
"alt": "Stripe"
},
{
"name": "Notion",
"url": "notion.so",
"tint": "amber",
"src": "https://oud.pics/sm/l/notion.png",
"alt": "Notion"
},
{
"name": "Slack",
"url": "slack.com",
"tint": "violet",
"src": "https://oud.pics/sm/l/slack.svg",
"alt": "Slack"
},
{
"name": "Gmail",
"url": "gmail.com",
"tint": "rose",
"src": "https://oud.pics/sm/l/gmail.jpeg",
"alt": "Gmail"
}
]}
/>Monospace tab bar mimicking Chrome DevTools panels. The active tab shows a primary underline.
Static browser tab row with favicons and titles. Decorative, not interactive.
/api/users?page=2200142ms3.4 KBDevTools-style row with a tinted method chip, path, colored status code, and timing and size columns.
Row of bookmark chips with folder or star icons. Short labels with soft hover states.