Components

Interactive examples of React components from @facioquo/react-ui, demonstrating the integration of GitHub Primer components with FacioQuo branding.

Primer standard components

Button

Standard Primer Button components with all style variants.

tsx

import { Button, Stack } from "@primer/react";

<Stack direction="horizontal" gap="condensed">
  <Button variant="primary">Primary</Button>
  <Button variant="default">Default</Button>
  <Button variant="invisible">Invisible</Button>
  <Button variant="danger">Danger</Button>
</Stack>

DataTable

Standard Primer DataTable for displaying tabular data (experimental).

Repositories

Name	Type	Stars
design-system	Public	42
stock-indicators	Public	128
internal-tools	Private	5

tsx

import { Table, DataTable } from "@primer/react/experimental";

<Table.Container>
  <Table.Title as="h4" id="table-title">Repositories</Table.Title>
  <DataTable
    aria-labelledby="table-title"
    data={[
      { id: 1, name: "design-system", type: "Public", stars: 42 }
    ]}
    columns={[
      { header: "Name", field: "name", rowHeader: true },
      { header: "Type", field: "type" },
      { header: "Stars", field: "stars" }
    ]}
  />
</Table.Container>

ActionList

Standard Primer ActionList for displaying lists of actions or items.

tsx

import { ActionList } from "@primer/react";

<ActionList>
  <ActionList.Item>First item</ActionList.Item>
  <ActionList.Item>Second item</ActionList.Item>
</ActionList>

Dialog

Standard Primer Dialog for modal interactions.

tsx

import { Button } from "@primer/react";
import { Dialog } from "@primer/react/experimental";

const buttonRef = useRef<HTMLButtonElement>(null);

<Button ref={buttonRef} onClick={() => setIsOpen(true)}>Open Dialog</Button>
{isOpen && (
  <Dialog
    title="Example Dialog"
    onClose={() => setIsOpen(false)}
    returnFocusRef={buttonRef}
  >
    <p>Dialog content</p>
  </Dialog>
)}

FormControl

Standard Primer FormControl with various input types.

Text input

Textarea

Select

Checkbox option

Radio group

Radio option 1

Radio option 2

tsx

import { FormControl, TextInput, Checkbox } from "@primer/react";

<FormControl>
  <FormControl.Label>Text input</FormControl.Label>
  <TextInput value={value} onChange={(e) => setValue(e.target.value)} />
</FormControl>

<FormControl>
  <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />
  <FormControl.Label>Checkbox</FormControl.Label>
</FormControl>

ProgressBar

Standard Primer ProgressBar for showing progress.

tsx

import { ProgressBar } from "@primer/react";

<ProgressBar progress={30} />
<ProgressBar progress={60} />

Label

Standard Primer Label for tags and labels.

DefaultPrimarySecondaryAccentSuccessAttentionDanger

tsx

import { Label, Stack } from "@primer/react";

<Stack direction="horizontal" gap="condensed">
  <Label>Default</Label>
  <Label variant="primary">Primary</Label>
  <Label variant="success">Success</Label>
</Stack>

Spinner

Standard Primer Spinner for loading states.

LoadingLoadingLoading

tsx

import { Spinner, Stack } from "@primer/react";

<Stack direction="horizontal" gap="normal">
  <Spinner size="small" />
  <Spinner size="large" />
</Stack>

Custom components

BrandButton

FacioQuo brand buttons extending Primer Button with custom brand colors.

BrandCard

FacioQuo theme-aware card component for content grouping.

Example Card

This is an example of the BrandCard component with theme-aware styling.

CodeBlock

Syntax-highlighted code blocks with VitePress-style copy functionality and optional filename headers.

example.tsxtsx

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}