NodariqThe Nodariq Components Lab
Thirteen interface pieces we wanted to exist: dials, hour rings, a permission painter, a receipt you can tear. Drag, hold and type on them, and change any of them with the controls underneath.
Hold to confirm
For actions you can't undo. Press and hold; letting go early cancels, so a stray click never deletes anything. Works with Space or Enter too.
Rotary dial
A slider you turn. Drag around it, scroll on it, or use the arrow keys. Each notch is a real choice, so there are no in-between values.
Branching setup route
Setup as a journey, not a list of steps. The line remembers every answer and the roads you didn't take. Click any stop to go back and pick a different road.
Card with settings on the back
The feature on the front and its settings on the back, so changing it doesn't mean opening another page.
👋 Welcome messages
Greets every new member in #welcome with their name and a card.
Support hours ring
The day as a clock face. Drag the two handles to set opening and closing time. The orange tick is the time now where you are.
Permission painter
Pick a brush and drag across the grid, like painting. A whole row or column takes one stroke instead of 25 checkboxes.
Word fence
Blocked words as chips. Paste a whole list at once; a * matches anything. Type a test message underneath to see exactly what would be caught.
Mood meter
A rating that shows how it feels. The face, the color and the words follow the slider, which is a normal range input underneath.
Tear-off receipt
An order you can hold. Drag the stub down to tear it off and mark the order delivered, or use the button.
ORDER #1042
Constellation checklist
Every finished setup task lights a star and joins it to the last one. Finish them all and the shape is complete.
Split-flap counter
A member count with the clack of a station board. Each digit flips through the numbers to reach its new value.
Elastic tabs
A segmented choice whose highlight stretches across to the new option before settling. It works with arrow keys like any radio group.
Message builder
Type on the left and watch the Discord message build on the right. Nothing is posted; this is the same idea as the dashboard's embed builder.