React Templates & Themes Logo React Templates & Themes
Pages Uswds Gatsby screenshot

Pages Uswds Gatsby

Author Avatar Theme by Cloud gov
Updated: 3 Oct 2025
40 Stars

A template for Federalist that uses Gatsby and USWDS 2.0

Github

Categories

Gatsby Scss

Overview:

This site is developed using the U.S. Web Design System v2.0 and focuses on providing developers a starter kit and reference implementation for cloud.gov Pages websites. The project aims to comply with the requirements set by the 21st Century IDEA Act, including accessibility, consistent appearance, no duplication of legacy websites, search function, secure connection, user-centric design, user customization, and mobile-friendliness. The site uses the Gatsby framework and is built with Javascript and React.

Features:

  • USWDS v2 integration: Includes USWDS v2 javascript, styles, images, and fonts by default, with the ability to customize styles using SASS or CSS in src/styles/index.scss.
  • Publish blog posts using Markdown: Any markdown files in the src/blog-posts directory can be turned into pages at /blog/ in the application. An index of all posts will be displayed at /blog.
  • Publish documentation pages using Markdown: Any markdown files in the src/documentation-pages directory can be turned into pages at / in the application. Side navigation for documentation pages can be controlled through the use of the “sidenav” property in the front matter of the file.
  • Publish custom pages using React: Allows for the creation of custom pages using JavaScript files in the src/pages directory. These pages will be accessible at /.html.
  • Customizable SEO information: SEO information for each page can be customized by adding the src/components/seo.js component and providing desired information.
  • Search.gov integration: Supports integration with Search.gov by adding the “affiliate” and “access key” to gatsby-config.js. The search functionality is implemented in the src/components/search-form.js component.
  • Digital Analytics Program (DAP) integration: Supports integration with DAP by adding the “agency” and optionally, subagency, to gatsby-config.js and uncommenting the appropriate lines.
  • Google Analytics integration: Allows for the integration of Google Analytics, although specific implementation details are not provided in the content.

Installation:

To install this theme, follow these steps:

  1. Clone the project repository.
  2. Install the required dependencies by running the following command in the project’s root directory:
npm install
  1. Customize the styles by modifying the SASS or CSS files in src/styles/index.scss.
  2. Add blog posts by creating markdown files in the src/blog-posts directory. These files will be turned into pages at /blog/.
  3. Add documentation pages by creating markdown files in the src/documentation-pages directory. These files will be turned into pages at /.
  4. Create custom pages by adding JavaScript files in the src/pages directory. These files will be turned into pages at /.html.
  5. Customize the SEO information by adding the src/components/seo.js component to the desired pages or templates.
  6. Set up Search.gov integration by following the provided instructions and adding the “affiliate” and “access key” to gatsby-config.js.
  7. Set up DAP integration by registering your site with DAP, adding the “agency” and optionally, subagency, to gatsby-config.js, and uncommenting the appropriate lines.
  8. Set up Google Analytics integration based on your specific requirements.

Summary:

This project is a theme for developing cloud.gov Pages websites, using the U.S. Web Design System v2.0 and Gatsby framework. It aims to comply with the requirements set by the 21st Century IDEA Act and provides various features such as USWDS integration, publishing blog and documentation pages using Markdown, creating custom pages using React, customizable SEO information, Search.gov integration, and DAP integration. The theme also allows for the integration of Google Analytics for analytics tracking purposes.