Introducing tables to the retro UI kit

Tables join the retro UI kit

The retro UI kit just gained one of the most-requested building blocks: a proper table. Until now the kit covered buttons, cards, inputs, badges, and gadgets, but anything tabular meant hand-rolling markup. The new RetroTable fills that gap with a component that renders real, semantic HTML tables and dresses them in the same cassette-futurism look as the rest of the kit.

Semantics matter here. RetroTable outputs genuine table, thead, tbody, tr, th, and td elements rather than a pile of styled divs. That keeps the component accessible to screen readers, friendly to search engines, and easy to copy out as plain data. The retro styling — charcoal borders, a hard offset shadow, monospace data, and a terminal-style header — is layered on top purely through CSS.

It is also a pure presentational component with no client-side JavaScript, so it works in both server and client parts of the app and adds nothing to your bundle beyond a little CSS.

A basic table

At its simplest, a table is a header row and some body rows. In a blog post you write it as plain markdown:

That markdown renders as a fully styled retro table, complete with zebra striping on alternate rows and a hover highlight. Notice the alignment markers in the divider row: :---: centers a column and ---: pushes it to the right, exactly as you would expect from standard markdown.

A wider comparison

Tables earn their keep when you need to compare several things at once. Because every column is a real table cell, wide tables stay readable and scroll horizontally on small screens instead of breaking the layout.

The same data, written once in markdown, produces the comparison table above. The header row is detected automatically and rendered as proper th cells, which is what gives assistive technology the column context it needs.

The terminal variant

For a louder, more cyberpunk feel, the component ships a terminal variant: amber-on-black with subtle CRT scanlines. It is the same semantic markup underneath, so you can switch the entire look with a single prop while keeping the content identical.

When you author tables by hand in code rather than in markdown, you compose the component directly:

Pick the default variant for documentation and pricing pages, and the terminal variant when you want a table to feel like a readout from an old mainframe.

Markdown tables in blog posts

The best part is that none of this requires special syntax. Any standard markdown table written in a blog post is now converted to the retro table automatically — the content pipeline recognises the | … | rows, builds the underlying table nodes, and the blog renderer draws them with the new styles. Write markdown, get a retro table. That is the whole workflow.