https://github.com/stoplightio/elements-starter-gatsby
Gatsby starter for Stoplight Elements components
https://github.com/stoplightio/elements-starter-gatsby
gatsby stoplight-elements
Last synced: about 1 year ago
JSON representation
Gatsby starter for Stoplight Elements components
- Host: GitHub
- URL: https://github.com/stoplightio/elements-starter-gatsby
- Owner: stoplightio
- License: unlicense
- Archived: true
- Created: 2020-08-28T19:02:04.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2023-10-28T04:48:37.000Z (over 2 years ago)
- Last Synced: 2025-04-05T22:43:21.923Z (about 1 year ago)
- Topics: gatsby, stoplight-elements
- Language: JavaScript
- Size: 11.6 MB
- Stars: 3
- Watchers: 15
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Stoplight Elements - Gatsby Example
Stoplight Elements provides components that can be used in any React application.
This example project demonstrates usage with Gatsby.
## Table Of Contents
* [Try the example locally](#try-the-example)
* [Set up Elements in your own Gatsby app](#elements-in-your-gatsby-app)
* [Step 1 - Install Elements](#step-1---install-elements)
* [Step 2 - Include the styles](#step-2---include-the-styles)
* [Ready to go](#ready-to-go)
## Try the example
Clone the [@stoplight/elements-starter-gatsby](https://github.com/stoplightio/elements-starter-gatsby) and install dependencies.
```bash
git clone https://github.com/stoplightio/elements-starter-gatsby.git
cd elements-starter-gatsby
yarn
```
Alternatively install it as a Gatsby starter using `gatsby-cli`.
```bash
yarn global add gatsby-cli
gatsby new elements-starter-gatsby https://github.com/stoplightio/elements-starter-gatsby
cd elements-starter-gatsby
yarn
```
If the above was successful, you can launch the example project using `yarn start`.
Now if you open your browser and navigate to `http://localhost:8000/` as instructed, you will see a page with two links to Stoplight Elements components.
## Elements in your own Gatsby app
### Step 1 - Install Elements
Install Elements and it's peer dependencies:
```bash
yarn add @stoplight/elements @stoplight/prism-http mobx
```
### Step 2 - Include the styles
You can import the CSS file directly into your component files
```jsx
import '@stoplight/elements/styles/elements.min.css';
```
or into your CSS
```css
@import '~@stoplight/elements/styles/elements.min.css';
```
### Ready to go
Congratulations! At this point, you are ready to use *Stoplight Elements* in your Gatsby application.