# Overview

With the API connectors, you can access data from connected APIs and services. The Design System provides you with a set of components that you can use to build your extension. The design sytstem helps you build extensions for the Stage platform. It is built on top of [React](https://reactjs.org) and [TypeScript](https://www.typescriptlang.org). The API & Design System are designed with simplicity in mind, so you can focus on building your extension.

## API Connectors

The API connectors are the building blocks of your extension. They allow you to access data from connected APIs and services. The API connectors are designed to be simple and easy to use. You can use them to build your extension.

### Installation

To install the API connectors, you need to run the following command:

```shell
npm i @stagehq/api
```

{% hint style="warning" %}
This doesn't work atm, we are currently under construction.
{% endhint %}

### Usage

The following example shows how to use the API connectors to fetch data from GitHub:

```tsx
import { Block, List } from "@stagehq/ui";
import * as API from "@stagehq/api";
import { useEffect, useState } from "react";

export default function Extension() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await API.gh.get("/users/:owner/repos");
      setData(response.data);
    };
    fetchData();
  }, []);

  return (
    <Block
      title="Repositories"
      imagePath="https://source.unsplash.com/random/400x200"
      actions={link: { url="https://github.com" }}
      size={2}
    >
      <List>
        {data.map((item) => (
          <List.Item key={item.id} title={item.title} />
        ))}
      </List>
    </Block>
  );
};
```

## Design System

### Installation

You can install the Stage Design System with npm:

```shell
npm i @stagehq/ui
```

{% hint style="warning" %}
This doesn't work atm, we are currently under construction.
{% endhint %}

### Usage

You can import the Stage Design System components in your extension:

```tsx
import { Block, Header, Actions, Action, Pills, List } from "@stagehq/ui";

export default function Extension() {
  <Block
    title="Contributions"
    imagePath="https://source.unsplash.com/random/400x200"
    actions={link: { url="https://github.com" }}
    size={2}
  >
    <Pills pills={["react.js", "vue.js", "angular.js", "ember.js", "svelte.js"]} />
    <List>
      {openSource.map((project) => (
        <List.Item
          type={project.type}
          title={project.title}
          additional={project.additional}
          subtitle={project.subtitle}
          count={project.count && { value: project.count?.value, icon: project.count?.icon }}
        />
      ))}
    </List>
  </Block>
}
```

## Next Steps

Now that you know how to use the API connectors and the Design System, you can start building your extension. You can learn more about the API connectors and the Design System in the following Blocks:

* [API Connectors](https://github.com/stagehq/stage/blob/main/docs/api-reference/api-connectors/README.md)
* [Design System](https://github.com/stagehq/stage/blob/main/docs/api-reference/broken-reference/README.md)