Gumtree UI

ReadmeCard

A rendered README card with a file header bar, used on repository landing pages.

Import

import { ReadmeCard } from "@gumtree/ui/forge/ReadmeCard";

Props

PropTypeDefaultDescription
filenamestring"README.md"Filename displayed in the header
childrenComponentChildren-Rendered markdown content

Examples

With Content

A README card with rendered HTML content.

README.md

my-project

A lightweight tool for managing configurations.

Getting Started

Install with cargo install my-project and run my-project init.

<ReadmeCard>
  <h1>my-project</h1>
  <p>A lightweight tool for managing configurations.</p>
  <h2>Getting Started</h2>
  <p>Install with <code>cargo install my-project</code> and run <code>my-project init</code>.</p>
</ReadmeCard>

Custom Filename

Display a different filename in the header.

CONTRIBUTING.md

Contributing

We welcome all contributions!

<ReadmeCard filename="CONTRIBUTING.md">
  <h1>Contributing</h1>
  <p>We welcome all contributions!</p>
</ReadmeCard>