curio.
no. 23 · projects

Project tiles

Square cards with screenshots.

Preview
L
Lumen2026
T
Tidepool2026
P
Pocketlog2025
H
Harbor2024

Install

npx shadcn@latest add https://curio-components.vercel.app/r/project-tiles.json

First curio component? Also add @import "./curio.css"; to your global CSS. See installation.

Usage

import { ProjectTiles } from '@/components/curio/projects/project-tiles'

const projects = [
  { name: 'lumen', description: 'A calm reading app.', url: 'https://...', year: '2026', tags: ['next.js'] },
  { name: 'pocketlog', description: 'A cli for daily logs.', url: 'https://...', year: '2025', tags: ['rust'] },
]

export function Work() {
  return <ProjectTiles items={projects} />
}

Props

PropTypeDefaultDescription
itemsProject[]-Name, description, url, year, tags?, image?, status?
columnsnumber2Grid columns.

Source

This is exactly what the command copies into your project.

components/curio/projects/project-tiles.tsx
import type { Project } from '../lib/types'
import { external, ProjectThumb } from './project-parts'

// square cards with screenshots
export function ProjectTiles({ items, columns = 2 }: { items: Project[]; columns?: number }) {
  return (
    <div className="grid gap-3" style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>
      {items.map((p) => (
        <a
          key={p.name}
          {...external(p)}
          className="group flex aspect-square flex-col overflow-hidden rounded-xl border transition-transform duration-300 hover:-translate-y-1"
          style={{ borderColor: 'var(--curio-border)', background: 'var(--curio-surface)' }}
        >
          <div className="relative min-h-0 flex-1 overflow-hidden">
            <ProjectThumb project={p} className="absolute inset-0 h-full w-full transition-transform duration-500 group-hover:scale-105" />
          </div>
          <div className="flex items-baseline justify-between gap-2 border-t px-3 py-2.5" style={{ borderColor: 'var(--curio-border)' }}>
            <span className="truncate text-[14px] transition-colors group-hover:text-[var(--curio-accent)]" style={{ color: 'var(--curio-fg)' }}>
              {p.name}
            </span>
            <span className="shrink-0 text-[11px]" style={{ color: 'var(--curio-muted)' }}>
              {p.year}
            </span>
          </div>
        </a>
      ))}
    </div>
  )
}
components/curio/projects/project-parts.tsx
import type { Project } from '../lib/types'

export function ProjectThumb({ project: p, className = '' }: { project: Project; className?: string }) {
  if (p.image) {
    // eslint-disable-next-line @next/next/no-img-element
    return <img src={p.image} alt="" className={`object-cover object-top ${className}`} />
  }
  return (
    <span
      className={`flex items-center justify-center text-[28px] font-medium ${className}`}
      style={{ background: 'var(--curio-accent)', color: 'var(--curio-on-accent)' }}
    >
      {p.name[0]}
    </span>
  )
}

export function ProjectTags({ project: p, className = '' }: { project: Project; className?: string }) {
  if (!p.tags?.length) return null
  return (
    <span className={`flex flex-wrap gap-1.5 text-[11px] ${className}`} style={{ color: 'var(--curio-muted)' }}>
      {p.tags.map((t) => (
        <span key={t} className="rounded-md border px-1.5 py-px" style={{ borderColor: 'var(--curio-border)' }}>
          {t}
        </span>
      ))}
    </span>
  )
}

export const external = (p: Project) => ({ href: p.url, target: '_blank', rel: 'noopener noreferrer' })

export function Arrow() {
  return (
    <svg viewBox="0 0 10 10" width={10} height={10} fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M2.5 7.5 7.5 2.5M3.5 2.5h4v4" />
    </svg>
  )
}
← Project accordionStatus rows →