Dropdown Filter Blocks based on shadcn/ui
Priority filter dropdown with archive icons in different colors (red for Urgent, amber for High, green for Normal, blue for Low). Clean and simple menu layout for task priority filtering.
import DropdownWithFilterByPriority from "@/components/creative-tim/blocks/dropdown-with-filter-by-priority"
export default function Page() {
return <DropdownWithFilterByPriority />
}
Status filter dropdown with colored filled square icons (blue for In Progress, amber for In Review, green for Completed, red for Blocked). Perfect for project or task status filtering.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROimport DropdownWithFilterByStatus from "@/components/creative-tim/blocks/dropdown-with-filter-by-status"
export default function Page() {
return <DropdownWithFilterByStatus />
}
Category filter dropdown with checkboxes for multiple selection (Marketing, Sales, Support, Finance, HR). Each option displays item count and includes a 'Show 10 More' button for expanded lists.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROimport DropdownWithFilterWithCheckbox from "@/components/creative-tim/blocks/dropdown-with-filter-with-checkbox"
export default function Page() {
return <DropdownWithFilterWithCheckbox />
}
Comprehensive price range filter with preset radio options (Under $50, $50-$100, $100-$500, Over $500) and custom range section with dual sliders and from/to input fields. Includes Clear All and Apply buttons.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROimport DropdownWithFilterWithRange from "@/components/creative-tim/blocks/dropdown-with-filter-with-range"
export default function Page() {
return <DropdownWithFilterWithRange />
}
Advanced filter dropdown with search bar and collapsible category sections (Marketing, Product Development, Customer Support). Each section expands to reveal checkboxes with item counts. Includes Clear All button for resetting filters.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROimport DropdownWithFilterWithSearch from "@/components/creative-tim/blocks/dropdown-with-filter-with-search"
export default function Page() {
return <DropdownWithFilterWithSearch />
}
Sophisticated tabbed filter dropdown with four tabs (Ratings, Availability, Color, Technology). Each tab contains relevant checkboxes for filtering. Perfect for ecommerce product filtering with multiple criteria.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROimport DropdownWithFilterWithTabs from "@/components/creative-tim/blocks/dropdown-with-filter-with-tabs"
export default function Page() {
return <DropdownWithFilterWithTabs />
}