Styling

Sileo is designed to look great out of the box. When you need to customize, there are a few escape hatches.

Fill Color

The fill prop controls the badge/accent color. Set it to "black" to make the entire toast dark.

Style Overrides

The styles prop lets you override classes on individual sub-elements. Use Tailwind's ! modifier to ensure specificity.

Available Keys

Custom Icons

Pass any React node as the icon prop to replace the default state icon.

Set icon to null to hide the badge entirely.

Custom Description

The description prop accepts JSX, so you can build rich toast content.

Global Defaults

Use the Toaster's options prop to set defaults for every toast.

<Toaster
  position="top-right"
  offset={16}
  options={{
    fill: "#171717",
    roundness: 18,
    styles: {
      description: "text-white/75!",
    },
  }}
/>

Roundness

Control the border radius with the roundness prop (default 18).

Autopilot

By default, toasts auto-expand after a short delay and collapse before dismissing. Control this with the autopilot prop.