Aedis UI

Item

A row in a list: media, content and actions.

Avalo

Answers leads on WhatsApp.

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css
@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add item# pnpm dlx @aedis/cli@0.1.0 add item · yarn dlx @aedis/cli@0.1.0 add item · bunx @aedis/cli@0.1.0 add item

Props

PropTypeDefaultDescription
hrefstring—Makes the row a link, through safeUrl. Inside an ItemGroup it is wrapped in a listitem and keeps its link role.
variant"default" | "outline" | "muted""default"Surface.
size"default" | "sm""default"Padding.
renderReactElement—Another element to render, e.g. a router link.

Security

  • Links go through safeUrl; external ones get noopener noreferrer and a marker.