Blocks
Beautifully designed, production-ready.
A social proof section with a logos carousel
Files
A social proof section with a logos carousel
@pratama/social-proof-01
Files
import { cn } from "@/lib/utils"
import { ArrowUpRightIcon } from "lucide-react"
export function SocialLinks01() {
return (
<div className="max-w-screen overflow-x-clip">
<div className="container mx-auto px-4">
<div className="relative border-x border-line">
<div className="pointer-events-none absolute inset-0 -z-1 hidden gap-2 sm:grid sm:grid-cols-2 md:grid-cols-3">
<div className="border-r border-line" />
<div className="border-l border-line md:border-x" />
<div className="border-l border-line max-md:hidden" />
</div>
<ul className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
{SOCIAL_LINKS.map((link, index) => {
return (
<li
key={index}
className={cn(
"max-sm:screen-line-top max-sm:screen-line-bottom",
"sm:max-md:nth-[2n+1]:screen-line-top sm:max-md:nth-[2n+1]:screen-line-bottom",
"md:nth-[3n+1]:screen-line-top md:nth-[3n+1]:screen-line-bottom"
)}
>
<SocialLinkItem {...link} />
</li>
)
})}
</ul>
</div>
</div>
</div>
)
}
type SocialLink = {
icon: string
title: string
href: string
}
function SocialLinkItem({ icon, title, href }: SocialLink) {
return (
<div className="relative flex cursor-pointer items-center gap-4 p-4 pr-2 transition-[background-color] ease-out hover:bg-accent/50 dark:hover:bg-accent/20">
<div className="relative shrink-0 [--image-radius:var(--radius-lg)]">
<img
className="size-8 rounded-(--image-radius) select-none"
src={icon}
alt={`${title} logo`}
/>
<div className="pointer-events-none absolute inset-0 rounded-(--image-radius) inset-ring-1 inset-ring-black/10 dark:inset-ring-white/15" />
</div>
<h3 className="flex-1 font-medium">
<a href={href} target="_blank" rel="noopener">
<span className="absolute inset-0" aria-hidden />
{title}
</a>
</h3>
<ArrowUpRightIcon className="size-4 shrink-0 text-muted-foreground" />
</div>
)
}
const SOCIAL_LINKS: SocialLink[] = [
{
icon: "https://assets.pratama.dev/images/link-icons/x.webp",
title: "X",
href: "https://x.com/iamncdai",
},
{
icon: "https://assets.pratama.dev/images/link-icons/github.webp",
title: "GitHub",
href: "https://github.com/ncdai",
},
{
icon: "https://assets.pratama.dev/images/link-icons/linkedin.webp",
title: "LinkedIn",
href: "https://linkedin.com/in/ncdai",
},
{
icon: "https://assets.pratama.dev/images/link-icons/dailydotdev.webp",
title: "daily.dev",
href: "https://app.daily.dev/ncdai",
},
{
icon: "https://assets.pratama.dev/images/link-icons/discord.webp",
title: "Discord",
href: "https://discord.com/users/1186630645443739651",
},
{
icon: "https://assets.pratama.dev/images/link-icons/youtube.webp",
title: "YouTube",
href: "https://www.youtube.com/@ncdai",
},
]
A social links section with a lined grid layout
@pratama/social-links-01
Files
import { format } from "date-fns"
import Grid from "@/components/charts/grid"
import LineChart, { Line } from "@/components/charts/line-chart"
import { ChartTooltip } from "@/components/charts/tooltip"
import {
Metric,
MetricLabel,
MetricValue,
} from "@/components/metric"
export function Metrics01() {
return (
<div className="max-w-screen overflow-x-clip">
<div className="container mx-auto px-4">
<div className="border-x border-line py-8">
<div className="screen-line-top screen-line-bottom">
<h2 className="screen-line-bottom ml-4 font-heading text-3xl font-medium tracking-tight">
Insights
<sup className="top-[-0.75em] ml-1 text-sm font-medium tracking-normal text-muted-foreground">
({format(new Date(data.startDate), "dd.MM")} –{" "}
{format(new Date(data.endDate), "dd.MM")})
</sup>
</h2>
<div className="relative">
<div className="pointer-events-none absolute inset-0 -z-1 grid grid-cols-2 md:grid-cols-4">
<div className="border-r border-line" />
<div className="border-r border-line max-md:hidden" />
<div className="border-r border-line max-md:hidden" />
</div>
<dl className="grid grid-cols-2 md:grid-cols-4">
<Metric>
<MetricLabel>Unique visitors</MetricLabel>
<MetricValue>
{data.summary.uniqueVisitors.toLocaleString()}
</MetricValue>
</Metric>
<Metric>
<MetricLabel>Sessions</MetricLabel>
<MetricValue>
{data.summary.totalSessions.toLocaleString()}
</MetricValue>
</Metric>
<Metric>
<MetricLabel>Views</MetricLabel>
<MetricValue>
{data.summary.totalScreenViews.toLocaleString()}
</MetricValue>
</Metric>
<Metric>
<MetricLabel>Session duration</MetricLabel>
<MetricValue>
{formatDuration(data.summary.avgSessionDuration)}
</MetricValue>
</Metric>
</dl>
</div>
{data.series.length > 0 ? (
<LineChart
className="md:aspect-3/1!"
data={data.series}
margin={{ top: 16, right: 32, bottom: 40, left: 32 }}
>
<Grid horizontal />
<Line
dataKey="totalSessions"
stroke="var(--chart-line-secondary)"
strokeWidth={2}
/>
<Line
dataKey="uniqueVisitors"
stroke="var(--chart-line-primary)"
strokeWidth={2}
/>
<ChartTooltip />
</LineChart>
) : (
<div className="grid aspect-2/1 w-full place-content-center md:aspect-3/1">
<p className="text-muted-foreground">No insights available.</p>
</div>
)}
</div>
</div>
</div>
</div>
)
}
type ISODateString = string
type InsightsSummary = {
uniqueVisitors: number
totalSessions: number
totalScreenViews: number
avgSessionDuration: number
}
type InsightsSeriesItem = {
date: ISODateString
uniqueVisitors: number
totalSessions: number
}
type InsightsData = {
summary: InsightsSummary
series: InsightsSeriesItem[]
startDate: ISODateString
endDate: ISODateString
}
const data: InsightsData = {
summary: {
uniqueVisitors: 14777,
totalSessions: 17117,
avgSessionDuration: 378.32284000000004,
totalScreenViews: 119318,
},
series: [
{
date: "2026-05-31T00:00:00.000Z",
uniqueVisitors: 437,
totalSessions: 520,
},
{
date: "2026-06-01T00:00:00.000Z",
uniqueVisitors: 554,
totalSessions: 636,
},
{
date: "2026-06-02T00:00:00.000Z",
uniqueVisitors: 587,
totalSessions: 649,
},
{
date: "2026-06-03T00:00:00.000Z",
uniqueVisitors: 456,
totalSessions: 530,
},
{
date: "2026-06-04T00:00:00.000Z",
uniqueVisitors: 507,
totalSessions: 590,
},
{
date: "2026-06-05T00:00:00.000Z",
uniqueVisitors: 532,
totalSessions: 507,
},
{
date: "2026-06-06T00:00:00.000Z",
uniqueVisitors: 446,
totalSessions: 437,
},
{
date: "2026-06-07T00:00:00.000Z",
uniqueVisitors: 542,
totalSessions: 544,
},
{
date: "2026-06-08T00:00:00.000Z",
uniqueVisitors: 576,
totalSessions: 582,
},
{
date: "2026-06-09T00:00:00.000Z",
uniqueVisitors: 563,
totalSessions: 544,
},
{
date: "2026-06-10T00:00:00.000Z",
uniqueVisitors: 553,
totalSessions: 537,
},
{
date: "2026-06-11T00:00:00.000Z",
uniqueVisitors: 495,
totalSessions: 568,
},
{
date: "2026-06-12T00:00:00.000Z",
uniqueVisitors: 534,
totalSessions: 624,
},
{
date: "2026-06-13T00:00:00.000Z",
uniqueVisitors: 436,
totalSessions: 522,
},
{
date: "2026-06-14T00:00:00.000Z",
uniqueVisitors: 440,
totalSessions: 520,
},
{
date: "2026-06-15T00:00:00.000Z",
uniqueVisitors: 492,
totalSessions: 581,
},
{
date: "2026-06-16T00:00:00.000Z",
uniqueVisitors: 472,
totalSessions: 549,
},
{
date: "2026-06-17T00:00:00.000Z",
uniqueVisitors: 454,
totalSessions: 548,
},
{
date: "2026-06-18T00:00:00.000Z",
uniqueVisitors: 477,
totalSessions: 547,
},
{
date: "2026-06-19T00:00:00.000Z",
uniqueVisitors: 395,
totalSessions: 461,
},
{
date: "2026-06-20T00:00:00.000Z",
uniqueVisitors: 397,
totalSessions: 480,
},
{
date: "2026-06-21T00:00:00.000Z",
uniqueVisitors: 424,
totalSessions: 488,
},
{
date: "2026-06-22T00:00:00.000Z",
uniqueVisitors: 519,
totalSessions: 590,
},
{
date: "2026-06-23T00:00:00.000Z",
uniqueVisitors: 463,
totalSessions: 532,
},
{
date: "2026-06-24T00:00:00.000Z",
uniqueVisitors: 469,
totalSessions: 534,
},
{
date: "2026-06-25T00:00:00.000Z",
uniqueVisitors: 469,
totalSessions: 522,
},
{
date: "2026-06-26T00:00:00.000Z",
uniqueVisitors: 481,
totalSessions: 551,
},
{
date: "2026-06-27T00:00:00.000Z",
uniqueVisitors: 475,
totalSessions: 578,
},
{
date: "2026-06-28T00:00:00.000Z",
uniqueVisitors: 570,
totalSessions: 656,
},
{
date: "2026-06-29T00:00:00.000Z",
uniqueVisitors: 1051,
totalSessions: 1190,
},
],
startDate: "2026-05-31",
endDate: "2026-06-30",
}
/**
* Formats a duration given in seconds into a compact `Xh Ym Zs` string.
* Zero-valued units are omitted; a zero duration renders as `0s`.
*/
export function formatDuration(seconds: number): string {
const totalSeconds = Math.round(seconds)
const hours = Math.floor(totalSeconds / 3600)
const minutes = Math.floor((totalSeconds % 3600) / 60)
const secs = totalSeconds % 60
const parts: string[] = []
if (hours > 0) parts.push(`${hours}h`)
if (minutes > 0) parts.push(`${minutes}m`)
if (secs > 0) parts.push(`${secs}s`)
return parts.length > 0 ? parts.join(" ") : "0s"
}
A metrics section with a line chart
@pratama/metrics-01
Files
import { GlowCard, GlowCardGrid } from "@/components/glow-card-grid"
export function Team01() {
return (
<div className="container px-4 py-8">
<GlowCardGrid className="lg:grid-cols-4">
{CARDS.map((card) => (
<GlowCard
key={card.name}
name={card.name}
handle={card.handle}
avatar={card.avatar}
/>
))}
</GlowCardGrid>
</div>
)
}
const CARDS = [
{
name: "shadcn",
handle: "@shadcn",
avatar: "https://unavatar.io/x/shadcn",
},
{
name: "Evil Rabbit",
handle: "@evilrabbit_",
avatar: "https://unavatar.io/x/evilrabbit_",
},
{
name: "OrcDev",
handle: "@orcdev",
avatar: "https://unavatar.io/x/orcdev",
},
{
name: "David Haz",
handle: "@davidhdev",
avatar: "https://unavatar.io/x/davidhdev",
},
{
name: "Shu",
handle: "@shuding",
avatar: "https://unavatar.io/x/shuding",
},
{
name: "Emil Kowalski",
handle: "@emilkowalski",
avatar: "https://unavatar.io/x/emilkowalski",
},
{
name: "Aaron",
handle: "@aaronmahlke",
avatar: "https://unavatar.io/x/aaronmahlke",
},
{
name: "Chánh Đại",
handle: "@iamncdai",
avatar: "https://unavatar.io/x/iamncdai",
},
]
A team section with glowing cards
@pratama/team-01
Files
import type { TestimonialType } from "@/components/testimonial-list"
import { TestimonialList } from "@/components/testimonial-list"
export function Testimonials02() {
return (
<div className="max-w-screen overflow-x-clip">
<div className="container mx-auto px-4">
<div className="border-x border-line py-8">
<h2 className="screen-line-top screen-line-bottom ml-4 font-heading text-3xl font-medium tracking-tight">
Loved by devs worldwide
</h2>
<p className="p-4 text-base text-balance text-muted-foreground">
See what developers are saying about my work and projects.
</p>
<div className="screen-line-top screen-line-bottom before:z-11 after:z-11 [&_.rfm-initial-child-container]:items-stretch! [&_.rfm-marquee]:items-stretch!">
<TestimonialList data={TESTIMONIALS_1} />
<div className="screen-line-top screen-line-bottom flex h-4" />
<TestimonialList data={TESTIMONIALS_2} direction="right" />
</div>
</div>
</div>
</div>
)
}
const TESTIMONIALS_1: TestimonialType[] = [
{
authorAvatar: "https://unavatar.io/x/kapehe_ok",
authorName: "Kap",
authorTagline: "Head of Developer Community @Vercel",
url: "https://x.com/kapehe_ok/status/1948104774358106612",
quote: "one of my favorite projects that submitted! you are crushing it!",
},
{
authorAvatar: "https://unavatar.io/x/rauchg",
authorName: "Guillermo Rauch",
authorTagline: "CEO @Vercel",
url: "https://x.com/rauchg/status/1978913158514237669",
quote:
"awesome. Love the components, especially slide-to-unlock. Great job",
},
{
authorAvatar: "https://unavatar.io/x/iamsahaj_xyz",
authorName: "Sahaj",
authorTagline: "Creator of tweakcn.com",
url: "https://x.com/iamsahaj_xyz/status/1982814244501381239",
quote:
"remember seeing it on @mannupaaji’s review. it’s one of the best looking ones I’ve seen",
},
{
authorAvatar: "https://unavatar.io/x/FrancescoCiull4",
authorName: "Francesco Ciulla",
authorTagline: "Developer Advocate @daily.dev",
url: "https://x.com/FrancescoCiull4/status/2006332479536529608",
quote:
"your portfolio is stunning. i created mine some weeks ago but this is another planet.",
},
{
authorAvatar: "https://unavatar.io/x/orcdev",
authorName: "OrcDev",
authorTagline: "Creator of 8bitcn.com",
url: "https://x.com/orcdev/status/2011373509310878010",
quote: "@iamncdai is one of the best design engineers!",
},
{
authorAvatar: "https://unavatar.io/x/shadcncraft?v=2",
authorName: "shadcncraft",
authorTagline: "shadcncraft.com",
url: "https://x.com/shadcncraft/status/2017091317244055988",
quote: "Love your work Dai! You’re a great talent :-)",
},
{
authorAvatar: "https://unavatar.io/x/khushiirl",
authorName: "khushi.vy",
authorTagline: "Software Engineer",
url: "https://x.com/khushiirl/status/2025894411155206168",
quote: "Goated portfolio. I love the whole UI in Vercel style",
},
{
authorAvatar: "https://unavatar.io/x/dimicx",
authorName: "dimi",
authorTagline: "Design Engineer",
url: "https://x.com/dimicx/status/2035018694053577149",
quote:
"i like this subtle version a lot more than the over-the-top examples i see everywhere, very nice",
},
]
const TESTIMONIALS_2: TestimonialType[] = [
{
authorAvatar: "https://unavatar.io/x/MaxPrilutskiy",
authorName: "Max Prilutskiy",
authorTagline: "CEO @Lingo.dev",
url: "https://x.com/MaxPrilutskiy/status/1923952193893466379",
quote: "i like your style! :)",
},
{
authorAvatar: "https://unavatar.io/x/jordwalke",
authorName: "jordwalke",
authorTagline: "Creator of React",
url: "https://x.com/jordwalke/status/1937165909778657589",
quote: "Looks great",
},
{
authorAvatar: "https://unavatar.io/x/mannupaaji",
authorName: "Manu Arora",
authorTagline: "Creator of ui.aceternity.com",
url: "https://x.com/mannupaaji/status/1944755561117163597",
quote: "Great work on the portfolio",
},
{
authorAvatar: "https://unavatar.io/x/ajaypatel_aj",
authorName: "Ajay Patel",
authorTagline: "Creator of shadcnstudio.com",
url: "https://x.com/ajaypatel_aj/status/1992946036558778494",
quote: "This Portfolio is something else",
},
{
authorAvatar: "https://unavatar.io/x/davidhdev",
authorName: "David Haz",
authorTagline: "Creator of reactbits.dev",
url: "https://x.com/davidhdev/status/2017868986969444511",
quote: "Simple and clean, love it!",
},
{
authorAvatar: "https://unavatar.io/x/uixmat",
authorName: "Matt",
authorTagline: "Creator of ui.bklit.com",
url: "https://x.com/uixmat/status/2023145872771436904",
quote: "great work bro",
},
{
authorAvatar: "https://unavatar.io/x/branmcconnell",
authorName: "Brandon McConnell",
authorTagline: "Frontend Engineer @mintlify",
url: "https://x.com/branmcconnell/status/2028391281198862377",
quote: "amazing, such cool libraries",
},
{
authorAvatar: "https://unavatar.io/x/shadcn",
authorName: "shadcn",
authorTagline: "Creator of shadcn/ui",
url: "https://x.com/shadcn/status/2032193591133495700",
quote: "You’re doing amazing work.",
},
{
authorAvatar: "https://unavatar.io/x/joshpuckett",
authorName: "joshpuckett",
authorTagline: "Teaching at interfacecraft.dev",
url: "https://x.com/joshpuckett/status/2038713206764617896",
quote: "Yooo I love this 🎨",
},
]
A testimonials section with a lined layout
@pratama/testimonials-02
Files
import { CodeXmlIcon, LightbulbIcon } from "lucide-react"
import type { ExperienceItemType } from "@/components/work-experience"
import { WorkExperience } from "@/components/work-experience"
export function Experience01() {
return (
<div className="max-w-screen overflow-x-clip">
<div className="container mx-auto px-4">
<div className="border-x border-line py-8">
<h2 className="screen-line-top screen-line-bottom ml-4 font-heading text-3xl font-medium tracking-tight">
Experience
</h2>
<WorkExperience
className="bg-transparent *:screen-line-bottom"
experiences={EXPERIENCE}
/>
</div>
</div>
</div>
)
}
const EXPERIENCE: ExperienceItemType[] = [
{
id: "shadcncraft",
companyName: "shadcncraft",
companyLogo: "https://assets.pratama.dev/images/companies/shadcncraft.svg",
companyWebsite: "https://shadcncraft.com?atp=ncdai",
positions: [
{
id: "1",
title: "Design Engineer",
employmentPeriod: {
start: "01.2026",
},
employmentType: "Full-time",
icon: <CodeXmlIcon />,
description:
"- Work on the registry and React component library.\n- Design and build Pro application components and blocks, from Figma to production-ready React.",
skills: [
"TypeScript",
"Next.js",
"Tailwind CSS",
"shadcn/registry",
"Figma",
],
isExpanded: true,
},
],
isCurrentEmployer: true,
},
{
id: "quaric",
companyName: "Quaric",
companyLogo: "https://assets.pratama.dev/images/companies/quaric.svg",
companyWebsite: "https://quaric.com",
positions: [
{
id: "2",
title: "Design Engineer",
employmentPeriod: {
start: "03.2024",
},
employmentType: "Part-time",
icon: <CodeXmlIcon />,
description: `- Integrated VNPAY-QR for secure transactions.
- Registered the e-commerce site with [online.gov.vn](https://online.gov.vn) for compliance.
- Developed online ordering to streamline purchases.
- Build and maintain ZaDark.com with Docusaurus, integrating AdSense.
- Develop and maintain the ZaDark extension for Zalo Web on Chrome, Safari, Edge, and Firefox — with 15,000+ active users via Chrome Web Store.`,
skills: [
"Next.js",
"Strapi",
"Auth0",
"VNPAY-QR",
"Docker",
"NGINX",
"Google Cloud",
"Docusaurus",
"Extension",
"Research",
"Project Management",
],
},
{
id: "1",
title: "Founder",
employmentPeriod: {
start: "03.2024",
},
employmentType: "Part-time",
icon: <LightbulbIcon />,
skills: ["Business Ownership", "Business Law", "Business Tax"],
},
],
isCurrentEmployer: true,
},
]
A work experience section with a lined layout
@pratama/experience-01
Files
import type { TestimonialType } from "@/components/testimonial-list"
import { TestimonialList } from "@/components/testimonial-list"
export function Testimonials01() {
return (
<div className="flex flex-col gap-2 [&_.rfm-initial-child-container]:items-stretch! [&_.rfm-marquee]:items-stretch!">
<TestimonialList data={TESTIMONIALS_1} />
<TestimonialList data={TESTIMONIALS_2} direction="right" />
</div>
)
}
const TESTIMONIALS_1: TestimonialType[] = [
{
authorAvatar: "https://unavatar.io/x/kapehe_ok",
authorName: "Kap",
authorTagline: "Head of Developer Community @Vercel",
url: "https://x.com/kapehe_ok/status/1948104774358106612",
quote: "one of my favorite projects that submitted! you are crushing it!",
},
{
authorAvatar: "https://unavatar.io/x/rauchg",
authorName: "Guillermo Rauch",
authorTagline: "CEO @Vercel",
url: "https://x.com/rauchg/status/1978913158514237669",
quote:
"awesome. Love the components, especially slide-to-unlock. Great job",
},
{
authorAvatar: "https://unavatar.io/x/iamsahaj_xyz",
authorName: "Sahaj",
authorTagline: "Creator of tweakcn.com",
url: "https://x.com/iamsahaj_xyz/status/1982814244501381239",
quote:
"remember seeing it on @mannupaaji’s review. it’s one of the best looking ones I’ve seen",
},
{
authorAvatar: "https://unavatar.io/x/FrancescoCiull4",
authorName: "Francesco Ciulla",
authorTagline: "Developer Advocate @daily.dev",
url: "https://x.com/FrancescoCiull4/status/2006332479536529608",
quote:
"your portfolio is stunning. i created mine some weeks ago but this is another planet.",
},
{
authorAvatar: "https://unavatar.io/x/orcdev",
authorName: "OrcDev",
authorTagline: "Creator of 8bitcn.com",
url: "https://x.com/orcdev/status/2011373509310878010",
quote: "@iamncdai is one of the best design engineers!",
},
{
authorAvatar: "https://unavatar.io/x/shadcncraft?v=2",
authorName: "shadcncraft",
authorTagline: "shadcncraft.com",
url: "https://x.com/shadcncraft/status/2017091317244055988",
quote: "Love your work Dai! You’re a great talent :-)",
},
{
authorAvatar: "https://unavatar.io/x/khushiirl",
authorName: "khushi.vy",
authorTagline: "Software Engineer",
url: "https://x.com/khushiirl/status/2025894411155206168",
quote: "Goated portfolio. I love the whole UI in Vercel style",
},
{
authorAvatar: "https://unavatar.io/x/dimicx",
authorName: "dimi",
authorTagline: "Design Engineer",
url: "https://x.com/dimicx/status/2035018694053577149",
quote:
"i like this subtle version a lot more than the over-the-top examples i see everywhere, very nice",
},
]
const TESTIMONIALS_2: TestimonialType[] = [
{
authorAvatar: "https://unavatar.io/x/MaxPrilutskiy",
authorName: "Max Prilutskiy",
authorTagline: "CEO @Lingo.dev",
url: "https://x.com/MaxPrilutskiy/status/1923952193893466379",
quote: "i like your style! :)",
},
{
authorAvatar: "https://unavatar.io/x/jordwalke",
authorName: "jordwalke",
authorTagline: "Creator of React",
url: "https://x.com/jordwalke/status/1937165909778657589",
quote: "Looks great",
},
{
authorAvatar: "https://unavatar.io/x/mannupaaji",
authorName: "Manu Arora",
authorTagline: "Creator of ui.aceternity.com",
url: "https://x.com/mannupaaji/status/1944755561117163597",
quote: "Great work on the portfolio",
},
{
authorAvatar: "https://unavatar.io/x/ajaypatel_aj",
authorName: "Ajay Patel",
authorTagline: "Creator of shadcnstudio.com",
url: "https://x.com/ajaypatel_aj/status/1992946036558778494",
quote: "This Portfolio is something else",
},
{
authorAvatar: "https://unavatar.io/x/davidhdev",
authorName: "David Haz",
authorTagline: "Creator of reactbits.dev",
url: "https://x.com/davidhdev/status/2017868986969444511",
quote: "Simple and clean, love it!",
},
{
authorAvatar: "https://unavatar.io/x/uixmat",
authorName: "Matt",
authorTagline: "Creator of ui.bklit.com",
url: "https://x.com/uixmat/status/2023145872771436904",
quote: "great work bro",
},
{
authorAvatar: "https://unavatar.io/x/branmcconnell",
authorName: "Brandon McConnell",
authorTagline: "Frontend Engineer @mintlify",
url: "https://x.com/branmcconnell/status/2028391281198862377",
quote: "amazing, such cool libraries",
},
{
authorAvatar: "https://unavatar.io/x/shadcn",
authorName: "shadcn",
authorTagline: "Creator of shadcn/ui",
url: "https://x.com/shadcn/status/2032193591133495700",
quote: "You’re doing amazing work.",
},
{
authorAvatar: "https://unavatar.io/x/joshpuckett",
authorName: "joshpuckett",
authorTagline: "Teaching at interfacecraft.dev",
url: "https://x.com/joshpuckett/status/2038713206764617896",
quote: "Yooo I love this 🎨",
},
]
A testimonials section with dual marquees
@pratama/testimonials-01
Files
import { ArrowRightIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ArticleItem } from "@/components/article-item"
export function Blog02() {
return (
<div className="max-w-screen overflow-x-clip">
<div className="container mx-auto px-4">
<div className="border-x border-line py-8">
<h2 className="screen-line-top screen-line-bottom ml-4 font-heading text-3xl font-medium tracking-tight">
Blog
</h2>
<p className="p-4 text-base text-balance text-muted-foreground">
A collection of articles on development, design, ideas, and tech
news.
</p>
<div className="screen-line-top relative py-4">
<div className="pointer-events-none absolute inset-0 -z-1 grid grid-cols-1 gap-4 max-sm:hidden sm:grid-cols-2 md:grid-cols-3">
<div className="border-r border-line" />
<div className="border-l border-line md:border-x" />
<div className="border-l border-line max-md:hidden" />
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
{articles.map((article) => (
<ArticleItem
key={article.id}
url="#"
title={article.title}
coverUrl={article.coverUrl}
createdAt={article.createdAt}
/>
))}
</div>
</div>
<div className="screen-line-top screen-line-bottom flex justify-center py-2">
<Button className="gap-2 pr-2.5 pl-3" asChild>
<a href="#">
View All
<ArrowRightIcon />
</a>
</Button>
</div>
</div>
</div>
</div>
)
}
type Article = {
id: string
title: string
coverUrl: string
createdAt: string
}
const articles: Article[] = [
{
id: "1",
title:
"Apple unveils iPhone 17 Pro: Aluminum frame returns, new colors, upgraded camera",
coverUrl:
"https://assets.pratama.dev/registry/images/blocks/blog-01/1.webp",
createdAt: "2025-09-13",
},
{
id: "2",
title:
'While the world is expecting AGI, François Chollet is showing just how "naive" AI can be',
coverUrl:
"https://assets.pratama.dev/registry/images/blocks/blog-01/2.webp",
createdAt: "2025-04-21",
},
{
id: "3",
title:
"Apple introduces iPhone 16e: A powerful new model for the iPhone 16 lineup",
coverUrl:
"https://assets.pratama.dev/registry/images/blocks/blog-01/3.webp",
createdAt: "2025-02-20",
},
{
id: "4",
title:
"Apple unveils MacBook Pro M4: Same design, base model now with 16GB RAM, priced from $1,599",
coverUrl:
"https://assets.pratama.dev/registry/images/blocks/blog-01/4.webp",
createdAt: "2024-10-31",
},
{
id: "5",
title:
"Apple unveils new Mac mini M4: Smaller, 16GB RAM on the base model, priced from $599",
coverUrl:
"https://assets.pratama.dev/registry/images/blocks/blog-01/5.webp",
createdAt: "2024-10-31",
},
{
id: "6",
title:
"Apple unveils iMac M4: Unchanged design, more powerful M4 chip, RAM starts at 16GB, priced from $1,299",
coverUrl:
"https://assets.pratama.dev/registry/images/blocks/blog-01/6.webp",
createdAt: "2024-10-29",
},
]
A blog section with a lined grid layout
@pratama/blog-02
Files
import { ArrowRightIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ArticleItem } from "@/components/article-item"
export function Blog01() {
return (
<div className="container mx-auto flex flex-col gap-8 px-4 py-8">
<h2 className="ml-4 font-heading text-4xl font-medium tracking-tight md:text-5xl">
Blog
</h2>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{articles.map((article) => (
<a key={article.id} className="block h-full" href="#">
<ArticleItem
title={article.title}
coverUrl={article.coverUrl}
createdAt={article.createdAt}
/>
</a>
))}
</div>
<div className="flex justify-center">
<Button className="gap-2 pr-2.5 pl-3" asChild>
<a href="#">
View All
<ArrowRightIcon />
</a>
</Button>
</div>
</div>
)
}
type Article = {
id: string
title: string
coverUrl: string
createdAt: string
}
const articles: Article[] = [
{
id: "1",
title:
"Apple unveils iPhone 17 Pro: Aluminum frame returns, new colors, upgraded camera",
coverUrl:
"https://assets.pratama.dev/registry/images/blocks/blog-01/1.webp",
createdAt: "2025-09-13",
},
{
id: "2",
title:
'While the world is expecting AGI, François Chollet is showing just how "naive" AI can be',
coverUrl:
"https://assets.pratama.dev/registry/images/blocks/blog-01/2.webp",
createdAt: "2025-04-21",
},
{
id: "3",
title:
"Apple introduces iPhone 16e: A powerful new model for the iPhone 16 lineup",
coverUrl:
"https://assets.pratama.dev/registry/images/blocks/blog-01/3.webp",
createdAt: "2025-02-20",
},
{
id: "4",
title:
"Apple unveils MacBook Pro M4: Same design, base model now with 16GB RAM, priced from $1,599",
coverUrl:
"https://assets.pratama.dev/registry/images/blocks/blog-01/4.webp",
createdAt: "2024-10-31",
},
{
id: "5",
title:
"Apple unveils new Mac mini M4: Smaller, 16GB RAM on the base model, priced from $599",
coverUrl:
"https://assets.pratama.dev/registry/images/blocks/blog-01/5.webp",
createdAt: "2024-10-31",
},
{
id: "6",
title:
"Apple unveils iMac M4: Unchanged design, more powerful M4 chip, RAM starts at 16GB, priced from $1,299",
coverUrl:
"https://assets.pratama.dev/registry/images/blocks/blog-01/6.webp",
createdAt: "2024-10-29",
},
]
A blog section with a grid layout
@pratama/blog-01
Files
import type { JSX } from "react"
import { Volume2Icon } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
LaravelIcon,
NextJSIcon,
NodeJSIcon,
ReactIcon,
TailwindCSSIcon,
} from "@/components/hero-01-icons"
export function Hero01() {
return (
<div className="relative w-screen overflow-hidden py-8">
<div className="container mx-auto max-sm:px-2">
<div className="screen-line-top screen-line-bottom border-x border-line md:hidden">
<svg
className="pointer-events-none absolute inset-0 overflow-visible text-line"
viewBox="0 0 210 340"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g className="text-line">
<path
d="M380.853 105.099L-201.625 464.632"
stroke="currentColor"
strokeDasharray="4 2"
vectorEffect="non-scaling-stroke"
/>
<path
d="M-165.247 -267.831L369.777 600.141"
stroke="currentColor"
strokeDasharray="4 2"
vectorEffect="non-scaling-stroke"
/>
</g>
<g>
<path
d="M209.5 260L130 260"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M129.5 339.5L129.5 210"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M159.5 260L159.5 210"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M3.09944e-06 210L209.5 210"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M160 240L130.133 240"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M149.5 240L149.5 260"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
</g>
<g>
<rect
x="159.5"
y="210"
width="30"
height="30"
transform="rotate(90 159.5 210)"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<rect
x="149.5"
y="240"
width="20"
height="20"
transform="rotate(90 149.5 240)"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<rect
x="159.5"
y="240"
width="20"
height="10"
transform="rotate(90 159.5 240)"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
</g>
{/* golden spiral */}
<path
className="text-border"
d="M149.643 239.897C155.106 239.897 159.619 244.414 159.619 249.882C159.619 255.35 155.106 259.868 149.643 259.868C138.717 259.868 129.69 250.833 129.69 239.897C129.69 223.493 143.23 209.941 159.619 209.941C186.935 209.941 209.5 232.527 209.5 259.868C209.5 303.613 173.396 339.75 129.69 339.75C58.6695 339.75 -1.22732e-05 281.027 -9.16589e-06 209.941C-4.14648e-06 95.1103 94.7738 0.24998 209.5 0.249985C395.69 0.250001 549.5 154.06 549.5 340.25"
stroke="currentColor"
strokeWidth="2"
vectorEffect="non-scaling-stroke"
/>
</svg>
<div className="relative grid aspect-[1/1.618] grid-cols-[1.618fr_minmax(0,1fr)] grid-rows-[1.618fr_1fr]">
<MainContent className="col-[1/span_2] row-1" />
<div className="col-2 row-2" />
<div className="col-1 row-2 flex flex-col items-center justify-center overflow-hidden p-2 sm:p-4" />
</div>
</div>
<div className="screen-line-top screen-line-bottom hidden border-x border-line md:block">
<svg
className="pointer-events-none absolute inset-0 overflow-visible text-line"
viewBox="0 0 340 210"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g className="text-line">
<path
d="M105.1 -170.853L464.633 411.625"
stroke="currentColor"
strokeDasharray="4 2"
vectorEffect="non-scaling-stroke"
/>
<path
d="M-267.831 375.247L600.141 -159.777"
stroke="currentColor"
strokeDasharray="4 2"
vectorEffect="non-scaling-stroke"
/>
</g>
<g>
<path
d="M260 0.5V80"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M339.5 80.5H210"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M210 210V0.5"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
</g>
<g>
<rect
x="210"
y="50.5"
width="30"
height="30"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<rect
x="240"
y="60.5"
width="20"
height="20"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<rect
x="240"
y="50.5"
width="20"
height="10"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
</g>
{/* golden spiral */}
<path
className="text-border"
d="M239.897 60.3571C239.897 54.894 244.414 50.381 249.882 50.381C255.35 50.381 259.868 54.894 259.868 60.3571C259.868 71.2835 250.833 80.3095 239.897 80.3095C223.493 80.3095 209.941 66.7704 209.941 50.381C209.941 23.0652 232.527 0.499999 259.868 0.5C303.613 0.499995 339.75 36.6043 339.75 80.3095C339.75 151.33 281.027 210 209.941 210C95.1103 210 0.25 115.226 0.25 0.5C0.250008 -185.69 154.06 -339.5 340.25 -339.5"
stroke="currentColor"
strokeWidth="2"
vectorEffect="non-scaling-stroke"
/>
</svg>
<div className="relative grid aspect-[1.618/1] grid-cols-[1.618fr_minmax(0,1fr)] grid-rows-[1fr_1.618fr]">
<MainContent className="col-1 row-[1/span_2]" />
<div className="col-2 row-1" />
<div className="col-2 row-2 flex items-center justify-center overflow-hidden p-4 lg:p-8" />
</div>
</div>
</div>
</div>
)
}
function MainContent({ className }: { className?: string }) {
return (
<div
className={cn(
"flex flex-col justify-center overflow-hidden p-4 lg:p-8",
className
)}
>
<h1 className="mb-4 font-heading text-[2.5rem]/none font-medium tracking-tight text-foreground sm:mb-6 sm:text-6xl md:text-5xl lg:text-6xl xl:text-7xl">
Plan. Build. Ship.
</h1>
<p className="mb-6 text-base leading-normal! text-muted-foreground sm:mb-8 sm:text-xl sm:text-balance md:text-lg lg:text-xl">
Acme{" "}
<button
className="relative top-0.75 inline-flex transition-[scale] outline-none active:scale-[0.97] sm:top-1"
aria-label="Pronunciation"
>
<Volume2Icon className="size-[1em]" />
</button>{" "}
provides{" "}
<strong className="font-normal text-foreground">professional,</strong>{" "}
<strong className="font-normal text-foreground">high-quality</strong>{" "}
software design and development services based on your ideas.
</p>
<div className="mb-6 grid grid-cols-2 items-center gap-4 sm:mb-8 sm:flex">
<Button className="border-none px-4 sm:px-8" size="lg" asChild>
<a href="#">Sign up now</a>
</Button>
<Button className="px-4 sm:px-8" variant="outline" size="lg" asChild>
<a href="#">Learn more</a>
</Button>
</div>
<div className="relative -ml-4 lg:ml-0">
<div className="absolute -top-2 right-0 z-1 block h-10 w-20 bg-background mask-[linear-gradient(to_left,white,transparent)] lg:hidden" />
<div className="no-scrollbar flex items-center gap-4 overflow-x-auto px-4 lg:px-0">
<TechItem icon={<NodeJSIcon />} title="Node.js" />
<TechItem icon={<LaravelIcon />} title="Laravel" />
<TechItem icon={<NextJSIcon />} title="Next.js" />
<TechItem icon={<ReactIcon />} title="React" />
<TechItem icon={<TailwindCSSIcon />} title="Tailwind CSS" />
</div>
</div>
</div>
)
}
function TechItem({ icon, title }: { icon: JSX.Element; title: string }) {
return (
<div className="flex items-center space-x-2 text-muted-foreground select-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6">
{icon}
<span className="text-sm font-medium whitespace-nowrap">{title}</span>
</div>
)
}
A hero section with a golden spiral background
@pratama/hero-01
Files
import { LoginForm } from "@/components/login-form"
export default function Page() {
return (
<div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
<div className="w-full max-w-sm">
<LoginForm />
</div>
</div>
)
}
A simple login form
@pratama/login-01
More blocks on the way…