Areia — UI kit for Ilha

Displays contextual inline messages for informational, alert, or error states.

Update available

A new version is ready to install.

Session expiring

Your session will expire in 5 minutes.

Save failed

We couldn't save your changes. Please try again.

import ilha from "ilha";
import { Info, TriangleAlert } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <div class="flex w-full max-w-2xl flex-col gap-3">
    <Banner
      icon={<Icon icon={Info} class="size-5" />}
      title="Update available"
      description="A new version is ready to install."
    />
    <Banner
      icon={<Icon icon={TriangleAlert} class="size-5" />}
      variant="alert"
      title="Session expiring"
      description="Your session will expire in 5 minutes."
    />
    <Banner
      icon={<Icon icon={TriangleAlert} class="size-5" />}
      variant="error"
      title="Save failed"
      description="We couldn't save your changes. Please try again."
    />
  </div>
));

Import

import { Banner } from "areia";

Usage

Update available

A new version is ready to install.

import ilha from "ilha";
import { Info } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={Info} class="size-5" />}
    title="Update available"
    description="A new version is ready to install."
  />
));

Examples

Variants

Default

Update available

A new version is ready to install.

import ilha from "ilha";
import { Info } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={Info} class="size-5" />}
    title="Update available"
    description="A new version is ready to install."
  />
));

Alert

Session expiring

Your session will expire in 5 minutes.

import ilha from "ilha";
import { TriangleAlert } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={TriangleAlert} class="size-5" />}
    variant="alert"
    title="Session expiring"
    description="Your session will expire in 5 minutes."
  />
));

Error

Save failed

We couldn't save your changes. Please try again.

import ilha from "ilha";
import { TriangleAlert } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={TriangleAlert} class="size-5" />}
    variant="error"
    title="Save failed"
    description="We couldn't save your changes. Please try again."
  />
));

With Icon

Review required

Please review your project settings before proceeding.

import ilha from "ilha";
import { TriangleAlert } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={TriangleAlert} class="size-5" />}
    variant="alert"
    title="Review required"
    description="Please review your project settings before proceeding."
  />
));

With Action

Update available

A new version is ready to install.

import ilha from "ilha";
import { Info } from "lucide";
import { Banner, Button, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={Info} class="size-5" />}
    title="Update available"
    description="A new version is ready to install."
    action={
      <Button size="sm" variant="primary">
        Update now
      </Button>
    }
  />
));

With Multiple Actions

Session expiring

Your session will expire in 5 minutes.

import ilha from "ilha";
import { TriangleAlert } from "lucide";
import { Banner, Button, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={TriangleAlert} class="size-5" />}
    variant="alert"
    title="Session expiring"
    description="Your session will expire in 5 minutes."
    action={
      <>
        <Button size="sm" variant="ghost">
          Dismiss
        </Button>
        <Button size="sm" variant="secondary">
          Extend session
        </Button>
      </>
    }
  />
));

Custom Content

Use markup in description when the message needs links, emphasis, or other inline content.

Custom content supported

This banner supports custom content with Ilha markup.

import ilha from "ilha";
import { Info } from "lucide";
import { Banner, Icon } from "areia";

export default ilha.render(() => (
  <Banner
    icon={<Icon icon={Info} class="size-5" />}
    title="Custom content supported"
    description={
      <>
        This banner supports <strong>custom content</strong>{" "}
        with Ilha markup.
      </>
    }
  />
));

API Reference

Prop	Type	Default	Description
`icon`	`unknown`	-	Icon markup rendered before the banner content.
`title`	`unknown`	-	Primary heading text for the banner.
`description`	`unknown`	-	Secondary description displayed below the title.
`action`	`unknown`	-	Action slot rendered at the trailing end of structured banners.
`text`	`unknown`	-	Simple banner content used when `title` and `description` are not provided.
`variant`	`"default" \| "alert" \| "error"`	`"default"`	Visual style of the banner.
`class`	`string`	-	Additional CSS classes merged with the generated classes.
`className`	`string`	-	Alias for `class`.