Add Card

v0.2.0

Clickable dashed placeholder card with a label and icon, used to trigger adding a new item.

Install

npx shadcn@latest add @signalos/add-card

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/utils, @signalos/skeleton) are pulled automatically.

Preview

Example & code

add-card.example.tsx

import { FolderPlus } from "lucide-react"

import { AddCard } from "./AddCard"

export default function Example() {
  return (
    <div className="max-w-sm">
      <div className="grid grid-cols-2 gap-6">
        <AddCard
          label="New Project"
          onClick={() => {}}
          icon={
            <div className="rounded-full bg-primary/10 p-3">
              <FolderPlus className="h-6 w-6 text-primary" />
            </div>
          }
          className="border-primary/30 bg-primary/5 hover:bg-primary/10"
        />
      </div>
    </div>
  )
}

Props

AddCardProps

Prop	Type	Default	Description
label*	`ReactNode`	-	Label displayed inside the card.
onClick*	`() => void`	-	Callback when the card is clicked.
icon	`ReactNode`	-	Optional icon. Defaults to Plus.
disabled	`boolean \| undefined`	-	Disable interaction.
className	`string \| undefined`	-	Additional CSS classes.
data-testid	`string \| undefined`	-	Test identifier rendered as `data-testid` on the root element.

npm dependencies

lucide-react@^1.7.0

Changelog

add-card

0.2.0

Breaking: rename the testId prop to data-testid to match the rest of the registry and the DOM attribute name.

0.1.2

Content sync fix to bring source in line with published registry payload.

0.1.1

Minor updates.

0.1.0

Initial release.