Theta UI
Foundations
Interaction
- SelectionIdentifying the items an action applies to: one, several, or a range.
- Keyboard navigationMoving focus among the items of a control with the arrow keys, in any layout and reading direction.
- TypeaheadMoving to an item by typing the beginning of its name.
- FocusReal focus on real controls: where it lands, how it is shown, and where it goes when what held it opens, closes or goes.
- AnnouncementsSaying aloud what happened where focus is not: once, politely, in a region beside what speaks.
- Adapting to the environmentReading the pointer in use, the platform's command key, the direction of text, the language and the person's settings, and doing what is right there.
Pointer and gesture
- DraggingPress, move, release: telling a drag from a click, following the pointer, and letting people cancel.
- ResizingEight handles around a thing: which edges each moves, about the middle or in proportion, never inside out.
- SnappingWhat is moved comes to rest in line with what is around it, or on a grid, and shows the line it found.
- ScrubbingChanging a value by dragging across what names it, without losing the click, the scroll or the way back.
- Pan and zoomA view onto a plane larger than the screen: moved by a drag, scaled about the point under the pointer.
- ConnectingJoining one port to another by a drag, by two presses or by keys, with the answer shown before the hand lets go.
- ReorderingPutting the items of a row in another order, by a drag or a key, and keeping the order as data.
Surfaces
Values
- Editing valuesLetting people type freely into a field that must end up holding a valid value.
- TextKeeping text as it is typed, counting it as people count, and bringing every way of typing a character into one form before a value is read.
- NumbersReading numbers as people type and paste them, and showing them as their locale and their work expect.
- DatesReading calendar dates in the many forms people write them, and showing them as their locale does.
- CalendarsA month laid out in weeks as its locale lays them out, and how the keyboard moves a day through it.
Data
- SchemasDescribing structured data once, so its fields, its checks and its type all follow from one description.
- Values as textWhat a value looks like as text and how text is read back, so cells copy and paste between applications.
- Schemas of schemasDescribing data that describes data: a schema held as a value, so the interface that edits records edits their shape.
- FormulasFields computed from a record's other fields: typed when written, empty where an input is, evaluated without re-reading.
- Computed and locked valuesValues that follow from others, kept right by recomputing only what a change reaches; and values frozen or held against change.
- Changes to recordsWhat was done to a list of records, as a value: told to its owner, applied, and turned about to undo it.
- Undo and redoTaking back what was done and doing it again: one line of history, an action at a time.
- Sorting a viewShowing records in another order than they are kept in, without moving one, and without a row jumping as it is edited.
Grids and graphs
- Cell selectionSelecting the cells of a grid in rectangles, with one active cell among them.
- Grid navigationMoving the active cell through a grid by the keyboard, to its neighbours and to its edges.
- FillingFilling cells from the cells beside them: repeated as they are, or continued where there is one way to continue them.
- GraphsNodes, ports and edges as data: what may be joined, changes that undo, and a layout that follows or is pinned against.
Components
Inputs
- ButtonAn action, pressed: one that can stay in reach while unavailable and say why, show its work, or toggle.
- Text fieldText that people type, of one line or several, kept as typed and checked when committed.
- Number fieldA single numeric value, typed with arithmetic and units or stepped with the keys, committed when people are done.
- Date fieldA single calendar date, typed in whatever form comes to hand or stepped with the keys.
- CheckboxA yes or a no: an option that is on or off, independent of any other.
- Radio groupOne choice among a few, all in view: as segments in a row, or as a list with a mark beside each.
- SelectOne choice among several: a button holding the current choice, which opens the options in a list.
Collections
Editors
Surfaces
Canvas
React
- Merging propsA consumer's props over a component's: its handlers run first and can prevent the component's, and both receive the element.
- useControllableStateControlled and uncontrolled state behind a single interface.
- CollectionItem discovery in document order, independent of how the items are composed.
Algorithms
Sets and sums
Space
- GeometryRectangles, polygons and directions: what contains a point, what meets what, the order things are read in and the nearest one each way.
- Spatial indexWhich rectangles touch a point, a marquee or a viewport: a packed R-tree in two typed arrays.
- Virtual windowWhich rows of a long list to draw: those in view and a few beyond, at the same cost for a million as for forty.
Graphs
- Dependency orderThe order to recompute in, the cycle when there is none, and what a change affects — over typed arrays.
- Layered layoutA directed graph laid out to read one way: layers by longest path, order by fewest crossings, places in line with neighbours.
- Edge routesThe path of a line between two boxes, round them and not through: level and upright, or a curve; and what a pointer picks.
Time
Text
Install
Components install with the shadcn CLI, bringing the primitives they use and the colour tokens. Import the tokens once, after Tailwind:
@import "tailwindcss"; @import "./lib/tokens.css";