The project site for Steeped: Modern Audiobooks — an independent, unofficial Flutter client for a self-hosted Audiobookshelf server. Built with React, Vite, HeroUI, and TailwindCSS, same as codeneedscoffee.com.
Steeped is an independent, unofficial project. Neither it nor this site is affiliated with, endorsed by, or maintained by the Audiobookshelf team.
- HeroUI + Tailwind styling, themed around the Steeped logo's own brown/sage palette
- Dark/Light mode toggle synced to your system preferences
- Optimized with Vite for lightning-fast builds
- Deployed via Cloudflare Workers for speed and reliability
- Framework: React + TypeScript
- UI Components: HeroUI
- Styling: Tailwind CSS
- Build Tool: Vite
- Deployment: Cloudflare Workers
Clone the repository:
git clone https://github.com/CodeNeedsCoffee/Steeped-Site.gitNavigate to the project directory:
cd Steeped-SiteInstall dependencies:
npm installStart the development server:
npm run devOpen your browser and visit:
http://localhost:5173
Build your project for production:
npm run buildPreview your build locally:
npm run previewDeploy your project to Cloudflare Workers:
npm run build && npm run deployMonitor your workers:
npx wrangler tailLight/dark mode is driven by src/hooks/useTheme.ts, which syncs to your system preference on load and
toggles the dark class on <html> from there (matched by @custom-variant dark in index.css). HeroUI's
color tokens pick up the rest via the custom primary/secondary palettes passed to heroui(...) in
src/react-app/hero.ts — that's the file Tailwind v4's pipeline actually loads (@plugin './hero.ts' in
index.css), so theme customization belongs there, not in a tailwind.config.ts nothing references.
src/
├── react-app/
│ ├── App.tsx # Main React component
│ ├── hero.ts # HeroUI Tailwind plugin registration
│ ├── index.css # Tailwind + HeroUI entry styles
│ └── main.tsx # Entry point
├── hooks/useTheme.ts # Theme management hook
└── worker/index.ts # Cloudflare Worker (Hono) backend
This project is licensed under the MIT License.