Lotfi Bennour

Posted on Dec 28

Introducing shadcn-data-views: Instant Kanban, Grid, and Calendar for your Data with a Single JSON Schema

#webdev #react #shadcn #opensource

😓 The "Data View" Fatigue

We’ve all been there. You start building a new SaaS or an internal admin tool. It starts simple, but then the requirements roll in:

"Can we see this data as a Kanban board?"

"We need a Calendar view for the deadlines."

"Can you add a form to edit these records?"

"Make it look modern and handle Dark Mode."

Suddenly, you’re spending weeks glueing together five different libraries for tables, drag-and-drop, and calendars.

There has to be a better way.

✨ Introducing shadcn-data-views

I built shadcn-data-views to solve exactly this problem.

It is a powerful, schema-driven component for React that instantly generates polished, complex data interfaces. By defining a single JSON schema, you get five different synchronized views out of the box.

🏆 Why use this over other libraries?

Most data grid libraries give you a table and stop there.

shadcn-data-views gives you an entire ecosystem for your data.

🔹 1. One Schema, Five Views

Define your data structure once (fields, types, selects), and the component automatically renders:

📋 Grid View — A powerful spreadsheet-like table
🏗️ Kanban View — Drag-and-drop status management
🖼️ Gallery View — A clean card-based layout
📅 Calendar View — Visualize dates and schedules
📝 Form View — Auto-generated forms for creating/editing records

🔹 2. Backend Agnostic

You provide the dbClient.

Supabase, Firebase, REST APIs, or LocalStorage are supported.

You control the data fetching; we handle the UI.

🔹 3. It actually looks good (shadcn/ui style)

Modern aesthetics with native Dark Mode support via next-themes.

Clean typography and subtle gradients.

🔹 4. Global Ready 🌍

Built-in support for 10 languages with automatic RTL handling.

5. Screenshots

💻 How it works

1️⃣ Install

npm install shadcn-data-views

2️⃣ Define your Schema

import { TableSchema } from 'shadcn-data-views';

const mySchema = {
  id: 'tasks',
  name: 'Tasks',
  icon: '📋',
  fields: [
    { id: 'title', name: 'Title', type: 'text', isPrimary: true },
    {
      id: 'status',
      name: 'Status',
      type: 'select',
      options: [
        { id: 'todo', name: 'To Do', color: 'gray' },
        { id: 'done', name: 'Done', color: 'green' }
      ]
    },
    { id: 'dueDate', name: 'Due Date', type: 'date' }
  ]
};

3️⃣ Render the Component

import { DataViews } from 'shadcn-data-views';

export default function App() {
  return (
    <div className="h-screen w-full">
      <DataViews
        schema={mySchema}
        dbClient={myDbClient}
        config={{ defaultView: 'kanban' }}
      />
    </div>
  );
}

That’s it.

A fully functional Kanban, Grid, and Calendar view instantly available.

🎨 Color & Customization

Includes 50+ preset colors (Emerald, Amber, Rose, Violet).

import { PRESET_COLORS } from 'shadcn-data-views';

🚀 Try it out

📦 NPM: npmjs.com/package/shadcn-data-views
🐙 GitHub: github.com/lotfibennour/shadcn-data-views

⭐ Star the repo if useful.

Happy coding!

DEV Community