Open source

For open source projects and open core products. The install line with repository figures, the people who build it with a year of activity, a getting started in tabs, sponsors with a goal and the free edition next to the hosted one.

5 variants

Switch category

Repository figures

Version and license on top, the install line to copy in an always dark field, figures that count up in a seamless grid. Copy confirms with a tick.

Open in Studio

Installv1.0.0

aiw add @ai-website/open-source

Brings along utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<OpenSource variant="repo-stats" title="…" install="npx lumen-sync init" version="v4.2.0" license="MIT" stats={[{ label, value, icon }]} repo={{ label, href }} />

Source

Contributors

Faces of the people who build it rise in one after another, the count counts up. Below, a year of commits as a heat strip that fills week by week.

Open in Studio

Installv1.0.0

aiw add @ai-website/open-source

Brings along utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<OpenSource variant="contributors" title="…" contributorCount={412} people={[{ name, commits }]} activity={[0, 2, 3, …]} />

Source

Getting started

Install, use and configure as tabs in an always dark window. The marker glides under the tab, code rises in with line numbers, copy leaves out the prompt.

Open in Studio

Installv1.0.0

aiw add @ai-website/open-source

Brings along utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<OpenSource variant="get-started" title="…" steps={[{ label, text, code }]} cta={{ label, href }} />

Source

Free and hosted

The free self-hosted edition next to the hosted one, with what each includes row by row. Rows rise in, on phones the editions stack and the rows keep two narrow columns.

Open in Studio

Installv1.0.0

aiw add @ai-website/open-source

Brings along utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<OpenSource variant="editions" title="…" license="MIT" editions={[{ name, price, text, cta, highlight }]} rows={[{ label, values: [true, "30 days"] }]} />

Source

Details

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

Area: Marketing
Variants: 5
Version: 1.0.0 · since 1.1.0
File: components/ui/open-source.tsx
Brings along: utilskitbutton iconmotionrevealsectionnumber-ticker
npm packages: None
Languages: English and German, 18 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The OpenSourceProps interface from components/ui/open-source.tsx, with the comments from the code.

variantoptional
OpenSourceVariant
repo-statscontributorsget-startedsponsorseditions
eyebrowoptional
React.ReactNode
titlerequired
React.ReactNode
descriptionoptional
React.ReactNode
installoptional
string
The one command to install
licenseoptional
string
e.g. MIT, Apache 2.0
versionoptional
string
e.g. v4.2.0
statsoptional
{ label: string; value: number; icon?: IconName; suffix?: string }[]
repooptional
{ label: string; href: string }
Where the code lives
peopleoptional
{ name: string; commits?: number }[]
contributors
contributorCountoptional
number
activityoptional
number[]
52 weeks, 0 to 4
stepsoptional
{ label: string; text?: string; code: string }[]
get-started: tabs of code
goaloptional
{ raised: number; target: number; text: string }
sponsors
tiersoptional
{ name: string; amount: number; perks: string[]; highlight?: boolean }[]
backersoptional
string[]
currencyoptional
string
editionsoptional
{ name: string; /** Short name for the narrow columns on phones */ short?: string; price: string; text: string; cta: { label: string; href: string }; highlight?: boolean }[]
editions
rowsoptional
{ label: string; values: (boolean | string)[] }[]
ctaoptional
{ label: string; href: string }

Built-in texts

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

Show all 18 texts

Key	English	German
copy	English Copy command	German Befehl kopieren
copyCode	English Copy code	German Code kopieren
copied	English Copied	German Kopiert
license	English License	German Lizenz
latest	English Latest	German Aktuell
contributors	English contributors	German Mitwirkende
andMore	English +{n}	German +{n}
activity	English Commits per week over the last year	German Commits pro Woche im letzten Jahr
less	English Less	German Weniger
more	English More	German Mehr
commits	English {n} commits	German {n} Commits
perMonth	English / month	German / Monat
monthly	English of {a} a month	German von {a} im Monat
sponsor	English Sponsor with {a} a month	German Mit {a} im Monat unterstützen
backers	English Backed by	German Unterstützt von
included	English Included	German Enthalten
notIncluded	English Not included	German Nicht enthalten
feature	English Feature	German Funktion

Read from the source of the component.

Open source handles the keys Arrow left, Arrow right and Space itself.
Sets aria-controls, aria-label, aria-labelledby, aria-selected, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
Uses the roles cell, columnheader, img, progressbar, row, rowgroup, rowheader, status, tab, table, tablist and tabpanel.
Announces changes through a live region without moving focus.
Adds text for screen readers where icons and graphics stand alone.
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).
With reduced motion (prefers-reduced-motion) it stays still. 3 places in the code switch motion off then.

Frequent questions

How do I install Open source?

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

Which variants does Open source have?

5 variants, Repository figures, Contributors, Getting started, Sponsors and Free and hosted. You pick one with the variant prop, for example variant="contributors".

Can I translate the texts of Open source?

Yes. Open source carries 18 texts of its own in English and German, such as “Copy command”, “Copy code” and “Copied”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Open source?

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

Can I adjust Open source without code?

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

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Open source on a page.

Open source

Repository figures

Contributors

Getting started

Sponsors

Free and hosted

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with