Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

Announcement Board CRUD Block for Vue

A notice board with a composer card over the notices: Publish or Save draft, a two-pin limit that unpins the oldest, edit in place, and Retract with a same-height Undo card.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Give a team one place to post what everyone should know, with this notice board for Vue with Ark UI. A composer sits over the board: a Field with a title Input, a body Textarea with a character count, and an audience Select that drops under the body on a phone. Publish is the one Shine Button and Save draft is outline. Each notice is a card with its audience and date, a pin Toggle, Edit and Retract. The board keeps two pins: pinning a third unpins the oldest and the foot says so ("Unpinned Fire drill to keep two"). Edit turns the card into the same composer in place, Retract swaps it for a quiet card of the same height with an Undo, and a draft carries a dashed outline and the word Draft and is left out of the audience line. For intranets, office notice boards and any feed where a few posts must stay on top.

FAQ

How do I load my own notices?

Edit NOTICES: each has an id, a title, a body, an audience (one of the four in AUDIENCES), a posted ISO day, a draft flag, a pinned number (0 is not pinned, a higher number was pinned later) and a retracted flag. The board sorts pinned notices first, newest pin on top. Everything counted, such as the live count per audience, is derived from the list.

How does the two-pin limit work?

Pinning stamps the notice with the next pin number. When two are already pinned, the one with the lowest number is unpinned in the same step and the foot names it. Retracting a pinned notice keeps its place, and Undo restores its pin unless two others have taken them meanwhile, in which case it comes back unpinned and says so.

What does Retract do, and can I undo it?

Retract does not remove the notice at once. The card swaps to "Retracted" with an Undo, in the same box, so nothing below moves. Undo brings the card back with its text. A draft says Discard instead. Retractions live in this tab only.

What is required to publish or save a draft?

A title and a body, both. A failed press shows the reason under the field in a slot that is always there, focuses the first empty field and says so in the status line. The body stops at 160 characters, with a count.

What stays local, and how do I wire it for real?

Notices live in state in this tab and a reload brings the six shown back. Nothing is sent to anyone. In your app post the composer in post, send the pin and retract changes as they are made, and keep Undo as a restore request.

How does the keyboard work?

Every control is a native button or field. After Publish focus moves to the new card's Edit button, after Pin it stays on the toggle, after Retract it moves to Undo, and Cancel returns to Edit. The audience Select follows the arrow keys of its library.

All 100 crud blocks