- Add @site/* path alias to docs tsconfig for generated integration files - Fix label-has-associated-control: use htmlFor/id pairs in SubmitForm - Suppress no-noninteractive-element-interactions for drag-and-drop zones - Add aria-labels to search and comment inputs - Remove unused Label component import
1.7 KiB
Product
Register
product
Users
Self-hosting enthusiasts managing homelab services. Technical users comfortable with Docker, APIs, and configuration files. They use Homarr as a personal dashboard to monitor and control 50+ services (media servers, DNS, NAS, download clients). Context: desktop browser, often on a local network, task-focused.
Product Purpose
Homarr is a self-hosted dashboard for homelab management. It aggregates service status, media libraries, system stats, and administrative controls into a single drag-and-drop interface with 39+ widgets. The marketplace extension lets users share and install custom widgets and CSS themes created by the community.
Brand Personality
Practical, capable, community-driven.
Anti-references
- Generic SaaS landing pages with gradient hero sections and metric grids
- Overly corporate enterprise dashboards (ServiceNow, Salesforce)
- Cluttered "hacker" UIs with no visual hierarchy
Design Principles
- Tool disappears into the task. The interface should feel invisible; users came to manage their homelab, not admire the dashboard.
- Density when it earns it. Show useful information compactly; don't spread thin content across oversized cards.
- Community first. Sharing, voting, and installing should feel effortless and trustworthy.
- Consistency across surfaces. The marketplace in the docs app should feel like it belongs to the same product as the main Next.js app.
- Respect the user's time. Fast loads, instant feedback, no choreographed animations.
Accessibility & Inclusion
WCAG 2.1 AA. Support for reduced motion. Sufficient contrast ratios (4.5:1 body text, 3:1 large text). Keyboard navigable.