Catppuccin Mocha
The Catppuccin Mocha dark theme for Hack Cove: one CSS file that remaps the Tailwind utilities @hackcove/ui is written against.
@hackcove/theme-catppuccin-mocha
Class on <html>: dark
Getting started
An opinionated UI library that is fully integrated with its theming.
Hack Cove UI is strict on purpose. It fixes the look and feel, so a site built with it, by people or by agents, looks good every time. It is not an extensible framework with every option.
The components and the themes are designed together. Every theme remaps every palette utility the components use, and the library's tests enforce it for each theme. Switching theme reskins a whole site with no component change, and there is nothing to configure.
The aim is a site built only from Hack Cove components, configured through props, with no custom CSS or Tailwind.
Install
Add the components and a theme. React, React DOM and Tailwind CSS v4 are peers.
bun add @hackcove/ui @hackcove/theme-catppuccin-mochaImport the theme in your CSS, after Tailwind, and point Tailwind at the components' build, since it skips node_modules:
@import "tailwindcss";
@import "@hackcove/theme-catppuccin-mocha/theme.css";
@source "../node_modules/@hackcove/ui/dist";Put the theme's class on <html>. The class for each theme is listed below.
Themes
Each theme is its own package: one CSS file that remaps the components' colours under its own class.
Thrifty Paper
The Thrifty Paper light theme for Hack Cove: one CSS file that remaps the Tailwind utilities @hackcove/ui is written against.
@hackcove/theme-thrifty-paper
Class on <html>: thrifty-paper
Components
Every component in @hackcove/ui has a page, in these groups.
Layout
6Page layouts
8The whole-page templates: pick the one for the kind of page, and it fixes the width and the rhythm.
Text
10Headings, body copy, links, code and the small text parts.
Content
11Actions
5Things a person presses.
Forms
11Fields, controls and how a form is laid out.
Data
6Tables, rows, figures and bars.
Feedback
6Status, notices and the layers over the page.
Navigation
2Moving between pages and views.
Pages
1Whole-page layouts and the status pages.
Component docs
AvailableEvery component has a page. Each leads with the one right way to use it and its Do and Don't, then the usage rules, accessibility and every prop. /ui/llms.txt is the same content as plain text, for agents.