Animated React components installed as source. Text Reveal, Number Roll, Link, Field and Input are free; the rest comes with a one-time license.
Rows that open to show more. One thing moves: the panel’s height, on one short clock both ways, so rows trading places leave everything below them still and nothing creeps into place at the end. The plus turns into a minus on the same clock. Built on Base UI, animated in CSS.
Example usage of Accordion.
Example usage of Accordion.
Example usage of AI.
Example usage of Authentication.
Three ways to sign in on the left, one check in the middle, your app on the right. Each turn a different method sends a signal, the lock becomes a tick that draws itself, and the app opens.
The 8 by 8 Bayer matrix behind ordered dithering, as a threshold from 0 to 1 for any pixel. Compare a brightness with it to decide whether that pixel is on.
A button that feels like an object: light on its surface, a shadow that deepens under the pointer and closes up when pressed, a quick press and a slow release. Busy and done states swap in softly without the button changing width. Built on Base UI, animated in CSS.
Example usage of Button.
Example usage of Button.
A soft tray around a raised surface, with concentric corners. As a link its surface lifts on hover and sinks on press, and its media breathes; it does not jump at the pointer.
Example usage of Card.
Example usage of Chat.
The quiet structure of a conversation: a line for each day, a line where the unread messages start, and a small note when someone joins or leaves.
Example usage of Chat Divider.
A box that ticks. The check draws itself in, and a parent checkbox shows a dash when only some of its children are on.
Example usage of Checkbox.
Where a message is written. It grows with what you type, Enter sends, and the microphone turns into a send button as soon as there is something to send.
Example usage of Composer.
The agent asking for a yes before it does something: run a command, start a plan, touch a file. One line says what and why, two buttons answer, and once answered it settles into a quiet record of the decision.
Example usage of Confirmation.
A spreadsheet-style table on TanStack Table, assembled from the data pieces: toolbar with search and column picker, typed filters, the grid, a selection bar and a pager. Sort, pin, resize, reorder and hide columns from each header; select rows or drag out a range of cells and copy it; edit in place and save or discard the batch. Only the rows on screen are in the page, so three hundred rows cost the same as thirty.
Example usage of Data Grid.
The menu behind each Data Grid header: sort either way or as a second key, pin to the start or the end, reset the width and hide the column. The header's own label is the trigger.
Example usage of Data Grid.
Gets data out of the Data Grid as the user sees it: CSV with spreadsheet-safe quoting, tab-separated text for the clipboard, and a print window that holds every row instead of the few a virtual list has mounted.
The TanStack Table features the Data Grid is built on, registered once, with the table, column and row types every part of the grid is written against and the per-column meta the grid reads.
The Data Grid's filter bar. A popover picks a column and its value, and each filter becomes a chip whose operator and value can be changed on their own. Text, number, date, option and multi-option columns each get their own editor.
The logic under the Data Grid's filter bar: the five data types a column can be filtered as, the operators each one takes and how they negate and widen, the function that tests a value against a filter, and the bridge that hands the filters to TanStack Table.
The strip under the Data Grid: which rows are showing, how many are selected, the count, sum, average, minimum and maximum of the selected cells, and paging with a rows-per-page select.
The stroke icons the Data Grid's parts share, drawn on a 16px grid in the current text colour.
The controls that go in a Data Grid's own columns: a select-all and a per-row checkbox with shift-click ranges, a disclosure arrow for rows with sub-rows, and a row menu with your actions, copy and pinning.
A toolbar that rises over the foot of the Data Grid while rows are selected, with export, pin, an optional delete and a way to clear the selection.
The strip above the Data Grid: a title and row count, a search field that opens from an icon, the column visibility menu, and a menu for CSV export, print and resetting the layout.
A delete button you press and hold. A fill sweeps across it while the bin’s lid lifts; let go early and it drains back, hold to the end and it deletes. Holding is the confirmation, so there is no dialog.
Example usage of Delete Button.
The parts the illustrations are made from: tiles, routes with ports, and a signal that travels them, all on one clock. Lay out your own in a few lines, with the glyph set or any icons you already use.
Example usage of Diagram.
Example usage of Diagram.
Sixteen marks drawn by hand for Diagram tiles on a 24 unit grid, in a line style and a solid style: app, database, mail, card, chart, key, phone, shield, bank, receipt, coin, check, cloud, user and bolt.
Example usage of Diagram.
A dialog built like the card: what you read sits on a raised surface, what you press sits under it on the tray. It comes towards you in 250ms and is gone in 150. Built on Base UI, animated in CSS.
Example usage of Dialog.
Example usage of Dialog.
Make an element crumble into ash and drift off as smoke. A ragged edge crosses it, and everything the edge passes turns into fine grey dust, made from the element’s own text and icons, that lifts away on a slow swirl and thins out to nothing.
Example usage of Dissolve.
Light drawn in two colours. A slow field of light, or a photograph, rendered the way a one-bit screen would: every dot is ink or nothing, and the shades are made by how thickly the ink is scattered. The pointer is a lamp.
Example usage of Dither.