{
  "id": 5964324,
  "title": "how I make my templates easy to reskin (probably overthought this)",
  "url": "https://urgent.news/2026/09/06/how-i-make-my-templates-easy-to-reskin-probably-overthought-this",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-06T10:52:15.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/dizo11/how-i-make-my-templates-easy-to-reskin-probably-overthought-this-31no"
  },
  "original_language": "en",
  "account": "I work on client projects such as dashboards and landing pages. Over time, I noticed that I was repeatedly building the same five to six components: a stat card, a table, a hero section, and a pricing grid, all with different colors. To make these templates easily reskinned, I decided to break them down into a few key practices.\n\nFirstly, I moved all color definitions to a separate file. This way, I never have to hardcode hex codes within any component. All components simply reference the colors using simple class names like bg-primary. This way, changing the color scheme of the entire template is as easy as modifying the color definitions.\n\nSecondly, I named my components in a generic way, such as DataTable, StatCard, and StatusBadge. This prevents me from naming components after specific client industries, which would make it harder to reuse the components later. Most of the client-specific data lives in a separate mock data file, allowing the components to remain agnostic about what they display.\n\nThirdly, I avoided common grid layouts like three identical cards in a row. Instead, I used a main card for the primary content and a smaller card for supplementary content. This creates a more unique look and prevents the templates from appearing as generic copies of component libraries.\n\nLastly, I added a simple authentication mechanism to my templates. Although the first version of the Ledger dashboard didn't include proper login functionality, I later added a context-based login system that redirects users to the login page if they try to access a protected page without being logged in. This ensures that users have a good first experience with the template.",
  "summary": "how I make my templates easy to reskin (probably overthought this) so I do client work - dashboards, landing pages, that kind of thing. and at some point I noticed I basically build the same 5-6 things over and over. stat card, some kind of table, a hero section, a pricing grid. just... different colors every time. eventually turned two of these into actual products - Ledger (dashboard template)…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}