Open Source

Für Open-Source-Projekte und Open-Core-Produkte. Die Installationszeile mit Kennzahlen, die Menschen, die es bauen, mit einem Jahr Aktivität, ein Einstieg in Reitern, Sponsoren mit Ziel und die freie Ausgabe neben der gehosteten.

5 Variants

Kategorie wechseln

Kennzahlen

Version und Lizenz oben, die Installationszeile zum Kopieren in einem stets dunklen Feld, Kennzahlen, die in einem lückenlosen Raster hochzählen. Kopieren bestätigt mit einem Haken.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/open-source

Bringt mit 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

Mitwirkende

Gesichter der Menschen, die es bauen, steigen nacheinander auf, die Zahl zählt hoch. Darunter ein Jahr Commits als Wärmestreifen, der sich Woche für Woche füllt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/open-source

Bringt mit utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

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

Source

Einstieg

Installieren, nutzen und einstellen als Reiter in einem stets dunklen Fenster. Die Marke gleitet unter den Reiter, Code steigt mit Zeilennummern auf, Kopieren lässt das Prompt weg.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/open-source

Bringt mit utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

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

Source

Sponsoren

Ein Monatsziel, das sich beim Hereinscrollen füllt, drei Sponsorenstufen mit dem, was sie zurückgeben, und die Namen der Unterstützer, die aufsteigen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/open-source

Bringt mit utils, kit, button, icon, motion, reveal, section, number-ticker

Usage

<OpenSource variant="sponsors" title="…" goal={{ raised, target, text }} tiers={[{ name, amount, perks, highlight }]} backers={[…]} />

Source

Frei und gehostet

Die freie, selbst gehostete Ausgabe neben der gehosteten, mit dem, was jede enthält, Zeile für Zeile. Zeilen steigen auf, auf dem Telefon stapeln sich die Ausgaben und die Zeilen behalten zwei schmale Spalten.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/open-source

Bringt mit 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

Was Open Source mitbringt, aus Registry und Quellcode gelesen.

Bereich: Marketing
Variants: 5
Version: 1.0.0 · seit 1.1.0
Datei: components/ui/open-source.tsx
Bringt mit: utilskitbutton iconmotionrevealsectionnumber-ticker
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 18 eigene Texte
Studio: Alle 5 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle OpenSourceProps aus components/ui/open-source.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
OpenSourceVariant
repo-statscontributorsget-startedsponsorseditions
eyebrowoptional
React.ReactNode
titlePflicht
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 }

Eingebaute Texte

Diese Texte schreibt Open Source selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 18 Texte anzeigen

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

Aus dem Quellcode der Component abgeleitet.

Open Source reagiert selbst auf die Tasten Pfeil links, Pfeil rechts und Leertaste.
Setzt aria-controls, aria-label, aria-labelledby, aria-selected, aria-valuemax, aria-valuemin und aria-valuenow, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen cell, columnheader, img, progressbar, row, rowgroup, rowheader, status, tab, table, tablist und tabpanel.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Open Source?

Mit aiw add @ai-website/open-source. Der Befehl legt die Datei components/ui/open-source.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, motion, reveal, section und number-ticker. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Open Source?

5 Varianten, Kennzahlen, Mitwirkende, Einstieg, Sponsoren und Frei und gehostet. Du wählst sie mit der Prop variant, zum Beispiel variant="contributors".

Kann ich die Texte von Open Source übersetzen?

Ja. Open Source bringt 18 eigene Texte auf Deutsch und Englisch mit, etwa „Befehl kopieren“, „Code kopieren“ und „Kopiert“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Open Source einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Open Source mit aiw_components und installieren sie mit aiw_add @ai-website/open-source. Nenn im Prompt die Variante, etwa variant="repo-stats", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Open Source ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden OpenSource-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Open Source stehen.

Open Source

Kennzahlen

Mitwirkende

Einstieg

Sponsoren

Frei und gehostet

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit