# Creating samples

The [components section of the bridge catalog app](http://aurelia-ui-toolkits.github.io/demo-materialize/#/project-status) consists of usage samples for each component. These samples are created using a GitHub Gist running in [gist.run](https://gist.run).

When you create a sample, you actually create a Gist.

![](https://2629791603-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LA5Feyiy4dGfI_l2ToU%2F-LA5FoQMb3Q21km2Syfn%2F-LA5G19b1L5m9_iGCcid%2Fbutton-gist-sample.png?generation=1523744778785568\&alt=media)

In the top right corner of the example you find a "Play" button. When you click the "Play" button, a `gist.run` instance will open in a new tab. A very convenient feature of `gist.run` is the ability to create a fork. A fork is basically a copy of the current gist with a new ID.

## Creating a new sample

Probably the easiest way to crate a new sample is to fork an existing one.

Assign a meaningful name to the gist (to better find it later) and click the button "fork to public gist"&#x20;

![](https://2629791603-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LA5Feyiy4dGfI_l2ToU%2F-LA5FoQMb3Q21km2Syfn%2F-LA5G1AMhmeg7akSdcY0%2Fgistrun-fork-button.png?generation=1523744778853954\&alt=media)

## Adding the sample to the catalog

The components and gist IDs of the catalog app are stored in a file names [`components.json`](https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/sample/src/shared/components.json).

The `button` configuration in this file looks like this:

```javascript
"Button": {
      "status": "done",
      "samples": {
        "basic-use": {
          "default": true,
          "gist": "09534739133e8f53bbf5ad3fff6fa75a"
        },
        "fab": "8c5bcfc325dcced715e2ea5d70ff1b44",
        "fab-fixed": "94c6cf6fd564e68dc2cac0952261b320",
        "fab-fixed-toolbar": "1dd0131d47642edadf583e946e256f0b"
      }
    },
```

Note there's a `samples` property with a default entry `basic-use` and three other properties which have gist IDs as their value.

To add a sample here, create a new property as a child of the `samples` property and copy the ID of your gist from the previous section here.

If you refresh your catalog fork now, you should see a new entry on the `buttons` component page and when you click on it the app should load your gist along with its source files.
