Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Audit Log Onboarding Block for Vue

A setup panel with four log types as switches, a retention select with the storage it implies, and a table of eight sample events that shows only the types that are on and keeps its height.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show what an audit log will hold before it is turned on with this setup panel for Vue with Ark UI. It is a panel of Reckonby, a records tool for accounting firms: four Switch rows choose what to record (sign-ins, record changes, exports, permission changes), each with how many events a day it usually means, and a select keeps them for 30, 60 or 90 days. A line works the storage out from typed events a day and bytes an event (“About 1.4 GB over 90 days.”). Beside them, at the start from large screens, a table of eight sample events shows only the types that are on (“Showing 5 of 8”). Start recording is the one Shine Button; nothing is recorded or stored. On a phone the switches come first and the table drops its address column.

FAQ

How is the storage worked out?

Each log type in TYPES has perDay (events a day) and bytes (an event's size). The total is the sum over the types that are on, times the days kept, shown in KB, MB or GB. Replace the numbers with your own averages; the sentence stays true because it is derived, never typed.

Does the table really filter?

Yes. The eight events in SAMPLES each have a type, and the table lists the ones whose type is on, newest first, with the count (“Showing 5 of 8”). When nothing is on, the table says so in the same box. Its height is fixed, so switching a type never moves the panel.

Why are the people roles, not names?

The sample shows what a log line looks like, not who your users are: Partner, Bookkeeper, Auditor and Admin are roles. Addresses come from the ranges reserved for examples and are always shown left to right.

What does Start recording do when nothing is on?

It stays quiet and answers in the status line (“Switch on at least one log type to record.”) instead of starting an empty log. With at least one on it says how many types and how many days, and that nothing is stored.

What stays local in the demo, and how do I wire it?

The events are a typed list and nothing is recorded. In your app send the chosen types and the retention to your server where start says so, write real events as they happen and make the table read them.

How does it look on a phone?

The switches and the retention come first, then the table, which drops the address column and keeps its height. Start recording pins to the foot with the status line.

All 100 onboarding blocks