Notification Matrix

Events down the side, email, push and in-app across the top: group checkboxes that go half-checked, locked security rows with a reason, edited cells that glow, and a save bar that floats in only when something changed.

akanotification settings·preferences·email preferences

Install

Run this in any project set up for the shadcn CLI. It copies the Notification Matrix source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/notification-matrix.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { NotificationMatrix } from "@/components/notification-matrix";

export default function Page() {
  return <NotificationMatrix />;
}

Built with

A free React block in the Dashboards collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

coss ui: button, checkbox, switch, tooltip
npm: lucide-react, motion

Props

Read from the Notification Matrix source. Everything is optional unless it says required.

Prop	Type	Default
title	string	"Notifications"
description	string	"Choose where each kind of update reaches you."
groupsrequired	NotificationGroup[]	—
channels	NotificationChannel[]	DEFAULT_CHANNELS
defaultValue	NotificationPrefs	—
quietHours	string	"10 pm – 7 am"
onSave	(value: NotificationPrefs) => Promise<void>	async () => {}
className	string	—

More in Dashboards

165

Dashboard Header

The top of a dashboard: three trend cards, a this-period-versus-last chart you can scrub day by day, and a goal ring that fills as sales come in.

166

Sales Overview

A year of sales on one page: pick a number up top and the monthly chart, best sellers and channel split all follow it, with a line or bar view to taste.

167

Billing Overview

A billing page in one glance: plan and seats, the next invoice with its cycle progress, a payment card that holds its colours in both themes, usage bars that warn near the limit, and invoices with a one-click retry.

Prop

Type

Default

title

string

"Notifications"

description

string

"Choose where each kind of update reaches you."

groupsrequired

NotificationGroup[]

—

channels

NotificationChannel[]

DEFAULT_CHANNELS

defaultValue

NotificationPrefs

—

quietHours

string

"10 pm – 7 am"

onSave

(value: NotificationPrefs) => Promise<void>

async () => {}

className

string

—