Resources and downloads

Guides, templates, reports and press files. Real download links, filters by type, a form that unlocks files and one featured guide.

4 variants

Switch category

Download list

Files with format and size. The button fills a ring and turns into a check while the browser downloads.

Open in Studio

Installv1.0.0

aiw add @ai-website/resources

Brings along utils, kit, button, icon, reveal, motion, section

Usage

<Resources variant="download-list" title="Press and downloads" items={[{ title, format, size, href }]} />

Source

Library with filters

Cards with covers that zoom on hover, filters with a gliding marker. Webinars open, files download.

Open in Studio

Installv1.0.0

aiw add @ai-website/resources

Brings along utils, kit, button, icon, reveal, motion, section

Usage

<Resources variant="filter-grid" title="…" types={[{ id, label, icon }]} items={[{ type, title, cover, href }]} />

Source

Unlock with a form

Name and email unlock the files in place, they rise in one after another. The cover drifts behind the form.

Open in Studio

Installv1.0.0

aiw add @ai-website/resources

Brings along utils, kit, button, icon, reveal, motion, section

Usage

<Resources variant="gated" title="…" points={[…]} items={[…]} onUnlock={async ({ name, email }) => …} cover={…} />

Source

Featured guide

One guide with its cover, facts and chapters. The pages behind the cover fan out on hover, the cover drifts while scrolling.

Open in Studio

Installv1.0.0

aiw add @ai-website/resources

Brings along utils, kit, button, icon, reveal, motion, section

Usage

<Resources variant="featured" title="…" cover={…} facts={[…]} chapters={[{ title, page }]} items={[{ title, format, size, href }]} />

Source

Details

What Resources and downloads brings along, read from the registry and the source.

Area: Content
Variants: 4
Version: 1.0.0 · since 1.0.0
File: components/ui/resources.tsx
Brings along: utilskitbutton iconrevealmotionsection
npm packages: None
Languages: English and German, 19 texts of its own
Studio: All 4 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The ResourcesProps interface from components/ui/resources.tsx, with the comments from the code.

variantoptional
ResourcesVariant
download-listfilter-gridgatedfeatured
eyebrowoptional
React.ReactNode
titlerequired
React.ReactNode
descriptionoptional
React.ReactNode
itemsoptional
ResourceItem[]
typesoptional
{ id: string; label: string; icon?: IconName }[]
filter-grid: the filters
chaptersoptional
{ title: string; page?: string }[]
featured: the chapters
factsoptional
{ value: string; label: string }[]
featured, gated: facts, e.g. [{ value: '48', label: 'pages' }]
coveroptional
React.ReactNode
featured, gated: the picture of the guide
pointsoptional
string[]
gated: what is inside, as short points
onUnlockoptional
(data: { name: string; email: string; company?: string }) => void | Promise<void>
gated: called with the form data. Throw to show the error.
askCompanyoptional
boolean
gated: ask for the company too
noteoptional
React.ReactNode
gated: small print under the form

Built-in texts

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

Show all 19 texts

Key	English	German
download	English Download	German Herunterladen
downloading	English Downloading	German Wird geladen
downloaded	English Downloaded	German Heruntergeladen
open	English Open	German Öffnen
all	English All	German Alle
new	English New	German Neu
count	English {n} files	German {n} Dateien
name	English Name	German Name
email	English Work email	German Geschäftliche E-Mail
company	English Company	German Firma
unlock	English Get the files	German Dateien erhalten
unlocking	English One moment	German Einen Moment
invalid	English Please enter your name and an email like name@company.com.	German Bitte gib deinen Namen und eine E-Mail wie name@firma.de ein.
failed	English That did not go through. Please try again in a moment.	German Das hat nicht geklappt. Bitte versuch es gleich noch einmal.
unlocked	English The files are yours. We also sent the links to {email}.	German Die Dateien gehören dir. Die Links haben wir auch an {email} geschickt.
inside	English What is inside	German Das steckt drin
chapters	English Chapters	German Kapitel
page	English p. {n}	German S. {n}
downloadGuide	English Download the guide	German Leitfaden herunterladen

Read from the source of the component.

Sets aria-describedby, aria-label and aria-selected, so screen readers announce purpose and state.
Uses the roles alert, status, tab and tablist.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
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. 2 places in the code switch motion off then.

Frequent questions

How do I install Resources and downloads?

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

Which variants does Resources and downloads have?

4 variants, Download list, Library with filters, Unlock with a form and Featured guide. You pick one with the variant prop, for example variant="filter-grid".

Can I translate the texts of Resources and downloads?

Yes. Resources and downloads carries 19 texts of its own in English and German, such as “Download”, “Downloading” and “Downloaded”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Resources and downloads?

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

Can I adjust Resources and downloads without code?

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

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Resources and downloads on a page.