Docs
Extension Card
Extension Card
A card containing basic information about an extension(an app, widget or plugin).
Extensions
CoffeeLover
0x8a0...098b95
Add
Installation
pnpm dlx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/extension-card.json"
Usage
import {
ExtensionCard,
ExtensionCardAction,
ExtensionCardActionActive,
ExtensionCardActionInactive,
ExtensionCardAvatar,
ExtensionCardAvatarFallback,
ExtensionCardAvatarImage,
ExtensionCardContent,
ExtensionCardDescription,
ExtensionCardName,
} from "<path-to-ui-component>/extension-card";<ExtensionCard extensionId=''>
<ExtensionCardAvatar>
<ExtensionCardAvatarImage>
<ExtensionAvatarImage
src="https://github.com/akashaorg.png"
alt="@akashaorg"
showLoadingIndicator={true}
>
<ExtensionCardAvatarFallback />
</ExtensionCardAvatarImage>
</ExtensionAvatar>
</ExtensionCardAvatar>
<ExtensionCardContent>
<ExtensionCardName>Extensions</ExtensionCardName>
<ExtensionCardDescription>Extension description</ExtensionCardDescription>
</ExtensionCardContent>
<ExtensionCardAction active={active}>
<ExtensionCardActionInactive
onClick={() => {
setActive(true);
}}
>
Add
</ExtensionCardActionInactive>
<ExtensionCardActionActive
onClick={() => {
setActive(false);
}}
>
Added
</ExtensionCardActionActive>
</ExtensionCardAction>
</ExtensionCard>Props
| Name | Type | Description |
|---|---|---|
| extensionId | string | Extension id. |
| extensionType | ExtensionType | Extension type. |
ExtensionCardAction
| Name | Type | Description |
|---|---|---|
| active | boolean | Indicates if a badge button is in active state. |