bulk-select-actions

Implement table multi-selection with a floating action toolbar using Radix UI and Tailwind CSS.

1|2|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/blink-new/claude --skill bulk-select-actions
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bulk-select-actions
Source: https://github.com/blink-new/claude/tree/main/skills/bulk-select-actions
Command: npx skills add https://github.com/blink-new/claude --skill bulk-select-actions

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of managing multiple items in a table or list by providing a robust and intuitive multi-selection mechanism with a floating action toolbar.

Core Features & Use Cases

  • Multi-Selection: Allows users to select multiple rows in a table.
  • Floating Toolbar: Displays a contextual toolbar with bulk actions (e.g., delete, archive) that appears only when items are selected.
  • Confirmation Dialogs: Ensures critical actions like deletion are confirmed before execution.
  • Use Case: In an e-commerce admin panel, a user can select multiple products and perform a bulk "delete" action, with a confirmation prompt before the deletion occurs.

Quick Start

Use the bulk-select-actions skill to implement a table with multi-selection and a floating delete toolbar.

Frequently Asked Questions about bulk-select-actions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement bulk selection in a React table with a floating action toolbar?

You can implement bulk actions in a table by tracking selected rows and rendering a contextual floating toolbar that appears only when items are selected. This approach manages selection states and triggers confirmation dialogs for destructive operations.

What is the best way to handle indeterminate selection states for table rows?

Indeterminate selection states are handled by tracking the selection status of individual rows against the full dataset. When only a subset of rows is selected, the master checkbox displays an indeterminate state to accurately reflect partial selection across the table.

How do I add confirmation dialogs for destructive bulk actions in a UI component?

Confirmation dialogs for destructive bulk actions are added by intercepting the action trigger from the floating toolbar and rendering a prompt before execution. This ensures critical operations like batch deletion require explicit user confirmation.

Does this table multi-selection pattern work with Radix UI and Tailwind CSS?

Yes, the table multi-selection pattern works with Radix UI and Tailwind CSS. It utilizes Radix UI for accessible interactive primitives, Tailwind CSS for styling the floating toolbar, and Lucide React for action icons to ensure a polished user experience.

When should I use a floating toolbar for batch processing table rows?

You should use a floating toolbar for batch processing when users need to perform bulk operations like delete or archive on multiple table rows. It provides an intuitive, contextual interface that appears only when items are selected, reducing UI clutter.