Decisions are overrated.
Carefully composed shadcn/ui components for interfaces that need a little more personality than strictly necessary.
pnpm add gra-ui01 / Selected components
A few bad ideas.
Start with unnecessarily opinionated interactions, including the newest way to perforate a label before it is considered filed.
CalibrationWindow
Four calibration notches narrow the window around one otherwise adequate notice.
SemanticLottery
Three semantic wrappers give one child three genuinely different kinds of officialness.
CellularDrift
A click sends content to one of nine cells and keeps it there instead of using normal flow.
ReverseQueue
A queue accepts its children only from last to first, then displays that reverse manifest.
PunctuationSieve
One mark at a time leaves a sentence for a tray that did not improve it.
RecessDepth
A child is filed under four actual layers until it becomes needlessly recessed.
CustodyChoice
Three custody buttons send one child to three genuinely different stations.
Counterweight
Dragging a weight to one slot sends its content to the mirrored slot.
ShadowPair
Each child must be paired with its matching witness in the exact order.
CenterOut
A label is reassembled from its middle outward into a new reading order.
PunchProof
A child earns five actual perforations before its proof card is complete.
SortMandate
Three arbitrary sorting mandates put the same roster under genuinely different orders.
LensRail
A draggable lens travels across a label and enlarges one actual excerpt at a time.
QuotaProcession
Each child demands its own number of taps before the procession may move on.
Braidline
One click separates a label into two interlaced rows of its actual characters.
WheelStamp
A child collects five paper seals from a mouse wheel before it is overqualified.
ElasticFrame
A draggable frame forces its child through arbitrary widths and keeps the chosen measurement.
NeighborMarch
Children can be visited only by stepping to an untouched adjacent neighbor.
SignalChoice
Three choices encode one label as Morse, Braille or a numbered ledger.
FootnoteShift
Clicked words leave a sentence and become numbered footnotes with visible gaps behind.
PrecisionLadder
A label climbs four shrinking target rings before it is allowed to be centered.
MaskBallot
Three stencil votes clip the same content into three genuinely different openings.
FreeDrift
A child keeps the exact arbitrary coordinates assigned to it by direct manipulation.
DocketSequence
A child travels through a docket only after click, type and click happen in order.
VowelHinge
One first vowel leaves each word and becomes a raised hinge chip beside its gap.
RatchetReveal
A one-way ratchet opens children one sealed tooth at a time.
VerdictSelector
Three binding verdicts turn one label into three genuinely different readings.
OrbitStow
A draggable piece parks itself at one of eight unnecessary orbital docks.
PalindromeLatch
Children lock only when the activation route reads the same forwards and backwards.
InsideOutWords
Clicking a word reverses its actual letters and leaves the sentence awkwardly changed.
FocusReceipt
Every focus prints a persistent duplicate at the child’s original station.
RulerRise
A draggable ruler raises one child at a time onto an unnecessary staircase.
LassoLock
Pieces that leave the field when a pointer box manages to enclose them.
WordTurnstile
A label that turns each word upside down before it may finish.
MarginQuota
A label that rents a margin one character at a time.
RotationTithe
A label that charges pointer distance for every unnecessary turn.
LetterLevy
A label that pays every matching letter into a visible drawer.
ParityPurge
Children sorted into survivors and rejects by an odd-or-even decree.
BlankFiling
Children filed one at a time by submitting absolutely nothing.
MomentumWeave
Children that weave themselves according to the speed of a drag.
SpaceStaple
A label that lets a dragged staple erase one of its spaces.
ArrowBias
A row that lets three arrow presses decide which way it should drift.
IdleUnspool
A row that quietly moves its children onto an aside shelf.
DisclosureSpill
A disclosure that lets its last child escape when closed.
CursorProof
A label that becomes legible only after a pointer passes each character.
SeamFold
A row that folds its lower half backwards around a movable seam.
SelectionSeal
An excerpt that needs three identical selections before it can be sealed.
CheckpointQueue
A queue that reorders itself at three drag checkpoints.
AlphabetTreadmill
A label that walks twelve letters forward one click at a time.
WeekdayLedger
A date that files ordinary children into an unnecessary week.
LayoutReferendum
Three binding ways to make the same children harder to read.
ChildGravity
One chosen child that pushes its siblings apart by calculation.
ScaleSweep
Children that stay enlarged after a pointer sweeps across them.
ScrollRedact
A label that gets redacted one wheel notch at a time.
CopyEcho
A copied label that leaves visible souvenirs behind.
WordRelay
Words that pass their last letters to the next word.
IndexSum
Children selected by the arithmetic value of their position.
DragThreshold
Content that unlocks after three increasingly long drags.
SideSplit
Children routed into two permanent sides one choice at a time.
DurationScale
Content scaled by the average time you hold it.
MixedClick
Content that releases only after left-right-left clicking.
WeightVote
Children that grow toward a winner one click at a time.
CaseGate
Content that unlocks after six alternating letter cases.
IndecisiveButton
A button that cycles through labels before accepting a decision.
FocusFade
A focusable group that fades away and returns to confirm focus.
ReorderBack
Two items that swap places and immediately regret it.
DragDuplicate
A draggable child that makes a second copy of itself.
HoverConfirm
A card that needs three separate hover entries before confirmation.
HoldPosition
A held item that stays wherever you leave it.
TimedRelease
A hold whose release time chooses where the content lands.
LengthOrder
A list that sorts itself by the length of its labels.
ClickOrder
Fragments that remember the order you clicked them in.
CornerFold
A card that folds only after every corner has been visited.
PairwiseMerge
Groups that can only be reduced two at a time.
AveragePosition
A label that settles at the average of three clicks.
LastRemaining
An option list that removes choices until one remains.
FocusUnpack
A focused bundle that separates its children for inspection.
BackspaceArchive
An input that archives every character removed with Backspace.
HoverRoute
Content that moves only when you hover a fixed route in order.
NestChildren
A stack that makes you nest every child by hand.