Relay App UI Kit
A browsable component library for building a product: fifty-seven components on one token file, from buttons and fields to tables, kanban, charts and overlays, plus four screens that open as working pages, dark and light.
The kit's assembled screens, full window and fully interactive:
About This Kit
Relay is a component library rather than a demo of one screen. The page you see is the library itself: an index down the left, a search that filters it, and fifty-seven components shown live at product density, grouped into foundations, controls, inputs, navigation, data display, feedback and overlays, sections, and four screens composed from the parts above.
Read the full effect overview
Every component reads one token file, so tables, menus, dialogs and charts agree about surface, ink, line, radius, spacing and motion, and the dark and light themes are the same design at two sets of values. The register is a modern issue tracker: a near-black neutral ground, hairline borders, one indigo accent that means primary or selected, colour otherwise reserved for status, and one typeface carrying hierarchy through weight and ink rather than size.
Each component ships in its own folder with its markup, its stylesheet and its script, so you can take one part or link the two bundled files and take everything. Overlays share one Escape, one focus trap and one scroll lock; motion is short, layered product motion with GSAP, and every animated part has a reduced-motion state.
The four screens are not screenshots. Issues, settings, billing and onboarding each open as a full page (issues.html and its three siblings) that you can click around: the sidebar navigates between them, the command menu's commands act, filters filter, the drawer edits write back to the row, and the onboarding walk-through validates each step. Every one of them is composed from the components with include directives and a short glue script, so a screen is also the worked example of how the parts fit together.
What's Included
- Fifty-seven components in eight families, each in its own folder with markup, styles and script
- A searchable catalogue page with an index rail, family groups and a theme toggle
- One token file driving dark and light themes; no component holds a colour of its own
- Data table with sorting, selection, a bulk bar, sticky header and density toggle
- Kanban board with drag between columns and a keyboard route for the same moves
- Line and bar charts that draw on enter, with crosshair, legend toggles and a range control
- Command menu, context menu, dropdown, select, combobox and date picker on one shared menu style
- Dialog, drawer, bottom sheet, popover, tooltip and toast queue sharing one overlay layer
- Sections ready to drop in: page header, settings groups, pricing table, billing and usage, onboarding steps, activity feed, team members
- Keyboard and ARIA contracts on every control, with live announcements for state changes
- Reduced-motion end states throughout; nothing animates while off screen
- Four screens that open as working pages: an issues view with 31 issues, filters, a board switch, a drawer, a composer and a right-click menu; settings, billing and a five-step onboarding
- Screens composed from the components with include directives, never redrawn, so each is a worked example of how the parts fit together
Perfect For
- A SaaS product that needs a complete component set on one design system
- An admin panel or internal tool that should feel like a modern product rather than a framework default
- A project management, CRM, support desk or analytics app that starts from finished tables, boards and forms
- A design system starting point where the tokens are the deliverable and the components prove them
How It Works
The library is the page
The catalogue is generated from the component folders, so what you browse is exactly what you download. The rail lists every component by family, the search filters both the rail and the specimens, and each specimen is the component in every state a buyer would check, with product copy rather than placeholder text.
One token file, two themes
Surfaces, ink, lines, accent, status colours, chart series, radii, spacing, control heights, durations and eases are role-named custom properties in one file. The light theme re-values the same names, so a component never branches on the theme and a rebrand is one edit.
One overlay contract
Everything that opens over the page goes through a shared layer stack in the base script, which owns Escape, the focus trap, focus return, scroll lock and stacking order. A component only supplies its enter and exit motion, so a dialog inside a drawer inside a command menu behaves like one system.
Questions about this component kit
Can I take one component without the rest?
Yes. Each component lives in its own folder with its markup, its stylesheet and, where it needs one, its script. To use one part you link tokens.css, base.css and base.js, then that folder's files, and paste the fragment. To use everything you link the two bundled files instead. The catalogue page and its rail are demo furniture; nothing in a product needs them.
What kind of app does this suit, and how do I rebrand it?
Anything with lists, tables, forms and settings: a project tool, a CRM, a support desk, an analytics dashboard, an admin panel. The worked example is a work tracker, but no layout says so except the words. Rebranding is editing tokens.css: change the accent, the ground, the ink ramp or the face and every component follows, in both themes, with no component-level overrides.
Is there a backend, and do the components hold state?
No backend. Every issue, member, invoice and event is sample content in the markup, and the interactions change the page rather than a database: sorting reorders rows, dragging moves a card, the invite form appends a pending row. Wiring it to your data means rendering the same markup from whatever you already have; the scripts initialise any instance they find.
Which framework is it for?
None. It is HTML, CSS custom properties and plain JavaScript with GSAP, so it drops into a static page, a server-rendered app or a React, Vue, Svelte or Astro component as markup and classes. The scripts find their components by a data attribute and initialise every instance once, so rendering the markup from a framework and calling the init after mount is enough.
What happens on a phone?
The app shell's sidebar becomes a bottom tab bar, tables and wide boards scroll sideways inside their frame, dialogs sit at the bottom of the screen, the bottom sheet is built for touch with drag to dismiss, and hover-only affordances such as row actions also appear on focus and on tap. The catalogue's rail becomes an Index button opening a sheet.
Does the kanban really drag, and what about the keyboard?
Yes, cards drag between and within columns with GSAP Draggable, and the siblings settle into place. The same moves exist on the keyboard: Space picks up a card, the arrow keys move it, Space drops it and Escape cancels. Every menu, select, tab set, table and picker in the kit has its keyboard route listed in the README.
