---
title: "Sortable List Pro — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Can Girgin · Buttons. Drag Reorder + Sort + Search + 5 Themes"
canonical: "https://framer.elliotli.dev/component/sortable-list-pro"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Sortable List Pro

# Sortable List Pro

Drag Reorder + Sort + Search + 5 Themes

[View on Framer](https://framer.com/marketplace/components/sortable-list-pro/?via=elliot-li)

![Sortable List Pro preview image 1](https://framer.elliotli.dev/og/component/sortable-list-pro/461155ee551c998a/1600x1200.jpg)

## Summary

Drag Reorder + Sort + Search + 5 Themes

## Description

**The Most Customizable List Component for Framer**

Turn any data set into a polished, interactive list. Drag rows to reorder, click column headers to sort, and search to filter. Everything is wrapped in 5 carefully crafted themes with full color and typography control.

**5 Premium Themes (No AI Aesthetics)**

• Ink - warm charcoal with amber accent• Paper - clean light with rose accent• Slate - cool dark with teal accent• Espresso - rich brown with golden accent• Sand - warm beige with burnt orange accent

Switch themes instantly or enable custom colors to override all 10 color slots.

**Core Features**

• Drag to reorder with smooth interaction and elevation feedback• Multi-column sort on Task, Status, Priority, and Value• Live search with instant filtering, focus ring, and clear button• localStorage persistence so order survives refresh• Priority badges: Critical, High, Medium, Low• Status badges: Completed, In Progress, Planning, Not Started• Responsive columns that hide progressively on smaller screens• Canvas-safe behavior so everything stays visible inside Framer

**Why This Isn’t Native in Framer**

Drag-based reordering, persistent state, real-time filtering, and multi-level sorting require JavaScript logic beyond standard Framer layers and variants. This component handles all of it.

**Typography (4 Independent Controls)**

• Title font for main heading• Subtitle font for headers, search, and footer• Row name font for primary content• Row detail font for metadata and badges

Each comes with full control over size, weight, spacing, and line height.

**Granular Spacing Controls**

• Card radius and row radius• Header and row padding (horizontal and vertical)• Row gap, column gap, and title spacing• Optional row borders with adjustable width• Optional card shadow with theme-aware intensity

**Custom Data via JSON**

Use your own data with a simple JSON structure including id, name, category, status, priority, date, and value.Leave it empty to use 8 realistic demo items.

**Full Property Panel (40+ Controls)**

• Theme selection with 5 presets• Custom data input via JSON• Content editing for titles, labels, and placeholders• Feature toggles for search, sorting, drag, and persistence• Style controls for spacing, radius, and borders• Optional color overrides for full customization• Typography controls for all text roles

**Use Cases**

• Project task dashboards• CRM lists and deal tracking• Product and inventory management• Team workflows and sprint boards• Content pipelines and editorial systems• Any sortable, filterable, reorderable data

**Default Setup**

Comes with the Ink theme and 8 realistic task items ready to drag, sort, and search instantly.

**Tags**

sortable list, drag reorder, data table, sort filter, task list, project management, interactive list, framer component, list view, data display, multi sort, search filter, localStorage, responsive, typography, custom colors, drag and drop

## Rank history [How rankings work →](/terms#rankings)

-   All · #8173

## Details

- **Author**: Can Girgin
- **Price**: $7.00
- **Published**: 2026-04-01
- **Updated**: 2026-04-01
- **Added**: 2026-03-24
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow