Skip to content
UI Kit
Accent color

Portfolio sections and project pages

Projects as a filtered grid, large rows, a sideways gallery, an index with hover pictures, a project header and a project in numbers.

6 variants
Switch category

Show the work, then the story

A portfolio is a list of proof, and the six layouts here show projects as more than thumbnails. They take title, client, year, tags, cover and link as data, so the overview and the project page read from the same entries.

Grid with filter is the overview for studios with many projects across disciplines. Large alternating rows give each project a picture and a paragraph, for a handful of strong cases. Horizontal gallery shows work as a sideways strip, List with hover picture is the quiet index that designers and architects like. Project header opens a case study page, Project in numbers ends it with results.

Lead with your best three projects, not your newest. Say what the problem was and what changed, one sentence each. Every project title links to its own page, which gives search engines a page per case instead of one long list.

Portfolio

Grid with filter

Work in two calm columns, filtered by discipline.

Open in Studio

Large alternating rows

One project per row, picture left and right in turn.

Open in Studio

Project header

The opening of a project page with title, facts and pictures.

Open in Studio

Horizontal gallery

Tall project cards run to the screen edge, with arrows and progress.

Open in Studio

List with hover picture

An index of large titles, the picture follows the pointer on desktop.

Open in Studio

Project in numbers

Results, timeline and deliverables of one project next to its picture.

Open in Studio

Details

What Portfolio brings along, read from the registry and the source.

Area
Content
Variants
6
Version
1.0.0 · since 1.0.0
File
components/ui/portfolio.tsx
Brings along
utilskitbuttoniconsectionreveal
npm packages
None
Languages
English and German, 14 texts of its own
Studio
All 6 variants editable
In collections
Portfolio
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The PortfolioProps interface from components/ui/portfolio.tsx, with the comments from the code.

  • variantoptional
    PortfolioVariant

    filter-gridalternatingproject-headerhorizontalhover-listproject-stats

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • projectsoptional
    PortfolioProject[]
  • projectoptional
    PortfolioDetail

    project-header

  • statsoptional
    PortfolioStats

    project-stats

  • actionoptional
    { label: string; href: string }

Built-in texts

Portfolio writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 14 texts
allEnglish All workGerman Alle Arbeiten
filterEnglish Filter projectsGerman Projekte filtern
viewEnglish View projectGerman Projekt ansehen
previousEnglish Previous projectsGerman Vorherige Projekte
nextEnglish Next projectsGerman Nächste Projekte
projectsEnglish ProjectsGerman Projekte
backEnglish All projectsGerman Alle Projekte
liveEnglish Visit the live siteGerman Live-Seite besuchen
clientEnglish ClientGerman Kunde
yearEnglish YearGerman Jahr
deliverablesEnglish DeliveredGerman Geliefert
timelineEnglish TimelineGerman Zeitplan
weeksEnglish {n} weeksGerman {n} Wochen
weekEnglish {n} weekGerman {n} Woche

Accessibility

Read from the source of the component.

  • Portfolio handles the keys Arrow left, Arrow right and Space itself.
  • Sets aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
  • Uses the roles group and region.
  • Announces changes through a live region without moving focus.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 9 places in the code switch motion off then.

Frequent questions

How do I install Portfolio?

With aiw add @ai-website/portfolio. The command puts components/ui/portfolio.tsx into your project, the code is yours from then on. It brings along button, icon, section and reveal. It needs no further npm packages.

Which variants does Portfolio have?

6 variants, Grid with filter, Large alternating rows, Project header, Horizontal gallery, List with hover picture and Project in numbers. You pick one with the variant prop, for example variant="alternating".

Can I translate the texts of Portfolio?

Yes. Portfolio carries 14 texts of its own in English and German, such as “All work”, “Filter projects” and “View project”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Portfolio?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Portfolio with aiw_components and install it with aiw_add @ai-website/portfolio. Name the variant in your prompt, for example variant="filter-grid", and the assistant writes your content straight into the props.

Can I adjust Portfolio without code?

Yes, in the Studio. All 6 variants are editable there, texts, lists and switches. The Studio writes the matching Portfolio code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Portfolio on a page.

Often searched

Jump to

Copied to the clipboard