Hack Club Theme

Hack Club Theme is a frontend design system and React component library for Theme UI, created by Hack Club to provide a consistent visual foundation for their projects. The repository publishes two npm packages: @hackclub/theme, a Theme UI base theme with design tokens, and @hackclub/meta, a React component that generates social media tags for the HTML head.

What is Hack Club Theme?

Hack Club Theme is the official frontend design system maintained by Hack Club, a student coding club community. It is built for Theme UI, a library for styling React applications with design tokens. The project provides a theme object and a React component as output, and it takes a base Theme UI configuration and extends it with Hack Club's visual style. The documentation is hosted at theme.hackclub.com, with the docs site source located in the /docs folder and built with Next.js and deployed on Vercel.

Key Features

• Two npm packages — @hackclub/theme provides the base Theme UI theme; @hackclub/meta provides a React component for social head tags.
• Theme UI integration — The theme is designed to be passed directly into a Theme UI ThemeProvider, so it works with any Theme UI–based React project.
• React component for metadata — @hackclub/meta generates social tags for the head, useful for Next.js applications.
• Starter template — The theme-starter repository is available for getting a new Theme UI project up quickly.
• CSS alternative — For projects not using React or Theme UI, Hack Club publishes a separate CSS implementation of the design system at github.com/hackclub/css.
• Documentation source — The docs site source is in the /docs directory; it's a Next.js application deployed on Vercel.
• Automated checks — GitHub Actions workflows named format and test run against the repository, ensuring consistent formatting and passing tests.

Who Should Use Hack Club Theme?

• Hack Club members and clubs: Build club websites, event pages, and projects with the same look and feel Hack Club uses.
• Theme UI users: Skip recreating design tokens and use a ready-made theme that works with Theme UI's theming system.
• Next.js developers: Use the @hackclub/meta component to handle social metadata generation without writing custom head markup.

What Can You Do with Hack Club Theme?

• Hack Club project builders: Apply consistent branding to any new React site by installing @hackclub/theme and passing it to Theme UI's provider.
• Non-React developers: If the project uses plain CSS, switch to the hackclub/css alternative instead of the React package.
• Content creators: Use the docs and starter template to spin up a themed site quickly with Next.js and Vercel deployment.

FAQ

Is Hack Club Theme free?

The repository is publicly available on GitHub under the Hack Club organization, and the packages can be installed from npm. No commercial pricing or licensing terms are mentioned in the repository.

What does @hackclub/meta do?

It is a React component that generates social media tags for the head of a page, such as Open Graph and Twitter card metadata. You can place it in your layout or page component to handle these tags.

How do I get started with Hack Club Theme?

The recommended starting point is the theme-starter repository, which provides a workspace for using the theme. The documentation at theme.hackclub.com includes setup examples and API details.

Is there a CSS-only version?

Yes. Hack Club publishes a separate repository at github.com/hackclub/css that provides the same design system for CSS-based projects that do not use Theme UI or React.