shadcn.io is not affiliated with official shadcn/ui
Config Editor CRUD Block for Solid
An app host's runtime settings as typed records in a native table: edit a value in place under its type's rules, see which settings are overridden, reset one to its default without losing the row, and add a setting in a draft row.
Installation
Overview
Show which settings an app overrides and let people change them safely, with this config editor for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a strip of three counts (overridden, at default, total), a filter field and a native table of nine settings in a frame of fixed height. Each setting has a key in mono, a type of String, Number, Boolean or JSON, a value and the default it ships with. A value is an Editable: click it or press its pencil, Enter saves and Escape cancels, and the type decides what is accepted, so a Number must be numeric and JSON must parse; a refused value keeps the old one and says why under the field. A Boolean is a Switch. A setting that differs from its default says Overridden, and Reset to default puts the default back and keeps the row, so deleting here means removing the override. Add a setting opens a draft row at the head with a key in UPPER_SNAKE that must be unique, a type in a Native Select and a value; its Shine Button adds it. Every change can be undone from the foot. For admin consoles, feature configuration and runtime settings pages.
FAQ
How do I fill it with my settings?
Edit SETTINGS. Each has an id, a key, a kind of String, Number, Boolean or JSON, the current value and the shipped def (default) as text. Overridden is derived by comparing the two, so the counts and the Overridden word always agree. JSON values are stored compact, so a default and a value that differ only in spacing count as the same.
What does the type check?
A Number must look like a number (an optional minus, digits and up to six decimals), JSON must pass JSON.parse, a Boolean must be true or false, and a String may be at most 60 characters. The check runs while you type, the Save button stays disabled while the draft is refused, and Enter on a refused value keeps the saved one and says why in the polite line.
What does Reset to default do, and is it a delete?
It sets the value back to the default and keeps the row, with a line such as Reset PAGE_SIZE to 25 and an Undo. Here removing the override is the delete: a setting always has its shipped default, so there is no way to remove the row itself, only to add rows of your own.
What is checked when I add a setting?
The key must be UPPER_SNAKE_CASE, from 2 to 32 characters, and not already a key. The value is checked against the type you pick, and the value you enter also becomes the new setting's default, so a new row starts as not overridden. Enter adds, Escape cancels, and focus lands on the new row's value.
What stays local, and how do I wire a real store?
The settings live in React state in this tab and a reload brings the originals back; nothing is saved to a service. In your app call your config API from commit, flip, reset and add, and show a server refusal in the same reason slot the Editable already has.