https://github.com/cometkim/gatsby-theme-stitches
A GatsbyJS plugin for styling with Stitches
https://github.com/cometkim/gatsby-theme-stitches
css-in-js gatsby gatsby-plugin gatsby-theme
Last synced: 4 months ago
JSON representation
A GatsbyJS plugin for styling with Stitches
- Host: GitHub
- URL: https://github.com/cometkim/gatsby-theme-stitches
- Owner: cometkim
- License: mit
- Created: 2020-09-02T04:12:53.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2026-02-11T14:54:46.000Z (4 months ago)
- Last Synced: 2026-02-11T22:43:25.112Z (4 months ago)
- Topics: css-in-js, gatsby, gatsby-plugin, gatsby-theme
- Language: TypeScript
- Homepage:
- Size: 128 MB
- Stars: 11
- Watchers: 1
- Forks: 3
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - gatsby-theme-stitches
README
# gatsby-theme-stitches
A GatsbyJS plugin for styling with [Stitches](https://stitches.dev/)
## Install
```bash
yarn add gatsby-theme-stitches @stitches/react
```
## Usage
```js
// Add plugin to gatsby-config.js
plugin: ['gatsby-theme-stitches']
```
That's it! You can import sitiches module from `gatsby-plugin-stitches/src/config`;
```js
import { styled } from 'gatsby-theme-stitches/src/config';
const Container = styled("div", {
margin: 10,
backgroundColor: 'red',
});
```
And also you can create your own config by shadowing the `gatsby-theme-stitches/src/config` module.
```js
// src/gatsby-theme-stitches/config.ts
import { createStitches } from '@stitches/react';
// You should exports all properties
export const {
styled,
css,
globalCss,
keyframes,
getCssText,
theme,
createTheme,
config,
} = createStitches({
// See the [configuration guide](https://stitches.dev/docs/tokens)
});
```
### TypeScript
Add a module resolution to your `tsconfig.json` file to get autocompletion.
```json
{
"baseUrl": ".",
"paths": {
"gatsby-theme-stitches/src/*": ["./src/gatsby-theme-stitches/*"]
}
}
```
## LICENSE
MIT