A visual field guide to 100 production-grade interface components built with pure HTML, CSS, and Vanilla JavaScript.
This repository powers the public demo and marketing showcase for the library. Visitors can browse the finished interfaces, test the interactions, and understand the quality and range of the collection before purchasing the complete package.
- Browse the live component previews in the demo.
- Search by component name and category.
- Open the project on GitHub to inspect the public project context.
- Get the complete source package, commercial delivery, and product updates on Gumroad.
- 100 standalone interface components
- 10 focused categories
- Navigation, forms, motion, data visualisation, layouts, cards, feedback, loading, commerce, and product UI patterns
- HTML, CSS, and JavaScript components with zero runtime dependencies
- Responsive, interaction-focused examples built for real product interfaces
The public demo is a visual showcase. It lets you see the result and interact with each component before purchasing the complete product package.
The complete library is distributed through Gumroad with the full organised collection and product delivery details. Keep the demo link and the GitHub link in your marketing posts so people can evaluate the work before they buy.
artifacts/frontend-library— the public showcase application and preview catalogueartifacts/frontend-library/public/components— preview assets used by the demoartifacts/frontend-library/src— the React/Vite showcase interface.github/workflows— deployment automation
This repository uses pnpm workspaces. From the repository root:
pnpm install
pnpm --filter @workspace/frontend-library run devBefore publishing a change, run:
pnpm run typecheck
pnpm run buildKeep release notes and demo changes visible in the repository so the public showcase stays aligned with the product being sold.