Build cool sites like
hackclub.com
The design system behind Hack Club's website, available as tokens, CSS and web components. Works with any framework, or none at all.
bun add @hackclub/themeUse as much or as little as you like
Each layer works on its own. Use just the tokens in your Tailwind config, or drop two tags on a page to get everything.
@hackclub/theme
Everything in one install: tokens, CSS, fonts and every component. Also available as a single file on a CDN.
@hackclub/tokens
Colours, type, spacing, radii, shadows and motion as JS, JSON, CSS custom properties and a Tailwind v4 theme.
@hackclub/css-base
Phantom Sans and Zarathustra, element defaults, prose styles and a few utility classes. No JavaScript.
@hackclub/components
Framework-agnostic web components: buttons, cards, nav, footer, theme toggle, polaroids, stickers and more.
Two tags and you're in
The CDN bundle includes every component, bundled via Lit, and is approximately 32 KB gzipped. Fonts load from the same package.
<link rel="stylesheet" href="https://unpkg.com/@hackclub/theme@2/dist/hackclub.css" />
<script type="module" src="https://unpkg.com/@hackclub/theme@2/dist/hackclub.js"></script>
<hc-button arrow>Join Hack Club</hc-button>Or import it
Works with Vite, Next.js, Astro, SvelteKit and Nuxt. The components are standard web components, so React 19 and Vue support them natively.
// bun add @hackclub/theme
import '@hackclub/theme/css'
import '@hackclub/theme'The colours of Hack Club
The colour palette, font pairing, pill radii and playful easing, as seen on hackclub.com. Light and dark mode are built-in to every control.
#ec3750#ff8c37#f1c40f#33d6a6#5bc0de#338eda#a633d6Components with the details done
Individual components handle focus rings, reduced motion, form participation, keyboard navigation and dark mode for you. This website is a live demo of Hack Club's design system in action.
