gatsby-theme-pocket is a Gatsby theme that imports articles you've saved to Pocket into your Gatsby site, rendering them as an SEO-optimized, tag-filterable index page.
What is gatsby-theme-pocket?
gatsby-theme-pocket is a Gatsby theme created by Rich Haines of Hungry Bear Studio. It connects to the Pocket API using your access token and weeksOfHistory option to fetch saved articles, then outputs an article index page that lists each item as a clickable card. The page includes the article's title, excerpt, image when available, and word count, and it ships with built-in SEO props for title, description, keywords, and site URL.
Key Features
- Pocket API integration — Requires a Pocket access token obtained via
yarn pocket-setup; fetches saved items from the lastweeksOfHistoryweeks. - Tag filtering — Set
tagFiltertotrueand providetagFilterStringto show only articles with that tag; use_untagged_to show only untagged saves. - Search filtering — Set
searchFiltertotrueand providesearchFilterStringto match articles against their URL or title. - Custom page URL — The default page at
/articleIndexcan be overridden by setting thecustomUrltheme option, for exampleresearch. - Built-in SEO fields — Configure
seoTitle,seoDescription,seoKeywordsas a string array, andsiteUrlfor the generated page. - Theme-UI styling — The theme uses Theme-UI out of the box; the Article component styles come from the
sxprop, so overriding the theme-ui index changes fonts and colors globally. - Shadowable Article component — The card component is exported separately, so Gatsby component shadowing can replace or alter its markup and behavior.
- No CSS framework lock-in — Built with Emotion and Theme-UI, so styling is scoped and theme-able.
Who is it for?
- Personal site owners — Add a curated list of articles they've read or saved, ready for visitors to browse by tag.
- Business websites — Show market-relevant articles on a campaign page such as
/research, using tags to keep the list focused. - Gatsby developers — Easily extend the theme with component shadowing and theme-ui overrides without forking the package.
What can you do with gatsby-theme-pocket?
- Personal bloggers: Display a tag-filtered list of your Pocket saves so readers can see your reading interests without leaving your site.
- Marketing teams: Curate third-party articles that support your industry positioning and place them on a custom URL with SEO metadata controlled per site.
- Advanced users: Filter by tags or search terms, then restyle the cards entirely by shadowing the Article component.
How does the theme work?
Install the theme with yarn add gatsby-theme-pocket, then run yarn pocket-setup to authorize your Pocket account and receive an access token. Add the theme to your gatsby-config.js plugins array with the required options — pocketAccessToken, weeksOfHistory, tagFilter, searchFilter, pageTitle, and SEO fields — and the theme generates a page listing article cards at your chosen URL.
Pricing
gatsby-theme-pocket is open-source and released under the MIT License, so it is free to use, modify, and redistribute. A Pocket account is required; Pocket itself offers a free tier.
FAQ
How do I get my Pocket access token?
Run yarn pocket-setup from your project after installing the theme. It will open a browser URL where you authorize your Pocket account, then prints an access token to save and pass to the theme.
Can I change the page URL from /articleIndex?
Yes. Set the customUrl theme option to a path such as research, and the article index page will be served at that path instead of the default.
How do I filter articles by tag?
Enable tagFilter and set tagFilterString to the desired tag. If you set tagFilterString to _untagged_, only articles without any tags will be shown.
Can I restyle the article cards?
The Article component uses Theme-UI's sx prop, so you can change colors and typography by shadowing the theme-ui index. For more control, shadow the Article component itself.
Does the theme include SEO support?
Yes. The theme accepts seoTitle, seoDescription, seoKeywords, and siteUrl options and applies them to the generated page's metadata.
