style

UI Style Guidelines

PrimeVue

• Prefer to use PrimeVue compontents where possible
• A custom PrimeVue theme is configured with dark mode as default, handling most color-related styles for us.

General Theme

• Dark Mode is default — all UI elements follow a dark, low-contrast background with light text for high readability.
• For text / background colors, prefer to use ...-surface-... f.e. border-surface-700.
• Caido uses bg-surface-800 as the main app background, bg-surface-700 is the background used for Card component.
• Follow minimalistic color palette. AVOID using too much colors where possible.

Layout & Components

• Often use PrimeVue Splitter and SplitterPanel for vertical or horizontal layout.
• Prefer to use Card PrimeVue components a lot, if needed add h-full to them via pt params.
• Remember to use <template #content> and other named slots (like #header, #footer) in Card and other PrimeVue components that support them.

Example:

<Card
  class="h-full"
  :pt-body="{ class: 'h-full p-0' }"
  :pt-content="{ class: 'h-full flex flex-col' }"
>
  <template #content>
     ...
  </template #content>
</Card>

Enviroment

• Keep in mind that we are building a plugin that's inside a Caido web app, we can modify frontend by adding sidebar pages using Caido Frontend SDK.
• Our plugin content is rendered within a dedicated window/panel that Caido provides for our sidebar page.
• The plugin UI should integrate seamlessly with Caido's existing interface and theming.

Data Representation

• Prefer DataTable component for displaying structured data:
  • Caido often uses stripedRows, use it where possible
  • Actions column at the end (e.g. “Install” buttons).
• Empty states use friendly, minimal messages with icons.

Icons

• Always use fas fa-[...] for icons. We don't support any other icon libraries.