1.0 beta · Vue 3 · TypeScript
Vue 3 components for product interfaces
A professional toolkit — typed, accessible, themeable. Tables, filters, forms and overlays that agree with each other. Windows 98 and modern in the box; your own look in one call.
Vue 3.5+ Tailwind CSS v4 TypeScript MIT
1–25 of 70
1–25 of 70
Live — sort, select and filter this table. View source →
Themes
One set of components. Any look.
A theme is token values and nothing else — the same markup, one attribute apart. Windows 98 and modern ship in the box; yours is one defineTheme() call.
data-theme="win98"data-theme="modern"defineTheme()import { defineTheme } from 'rowkit/theme'
const violet = {
'--color-control-primary': '#5b3df5',
'--color-control-primary-hover': '#4f33e0',
'--color-control-primary-active': '#4327c9',
'--color-checked': '#5b3df5',
'--radius-md': '10px',
}
export const acme = defineTheme({
name: 'acme', // <html data-theme="acme">
extends: 'modern',
light: violet,
dark: violet,
})Components
Everything a product interface is built from
21 components today — controls, data, overlays and the window around them. Each with keyboard support, a docs page and stories in both themes.
Button
Actions, from the default one Enter takes to a quiet link.
Select
One value from a list, with search for long ones.
Badge
Status at a glance, in the colour and the word.
ProgressBar
Progress you can measure, and work you cannot.
FilterBar
Search and the filters applied to a list.
Pagination
Pages and page size for a long list.
Checkbox
On or off, with a label you can click.
DataTable
Sort, select, load and empty — typed rows.
Why rowkit
Built like a professional tool
The parts you would otherwise write and test yourself — done once, with the tests to prove it.
Typed
Generics carry your row type from DataTable into its slots, sort and selection. Strict TypeScript, no any.
Accessible
WAI-ARIA patterns, full keyboard support, and an accessibility check on every story in CI — in both themes.
Its own behaviour
Focus scope, dismissable layers, positioning and scroll lock written for rowkit, with no behaviour library underneath.
Tokens all the way down
313 design tokens, each described. Change a few for your brand or define a whole theme of your own.
SSR and Nuxt
Overlays teleport after mount; nothing reads the window on the server. Works in Nuxt with the Vite plugin.
Ready for coding agents
AGENTS.md ships in the package — every prop, event and slot, generated from the source you installed.
- components, more on the way
- 21
- tests: unit, component and in a real browser
- 1,494
- the whole library, brotli; a Button alone 2.6 kB
- 39 kB
- themes in the box, and any you define
- 2 + yours
In code
A data table page in twenty lines
The table at the top of this page is this code. Your rows are typed, state is yours through v-model, and every part takes your classes.
- Sort, selection, page and filters are v-model
- Loading and empty states built in
- Pinned columns, a summary row, drawn scroll bars
<script setup lang="ts">
import { DataTable, FilterBar, Pagination } from 'rowkit'
import { columns, useUsers } from './users'
const { rows, total, filters, search, sort, selected, page } = useUsers()
</script>
<template>
<FilterBar v-model:search="search" :filters="filters" />
<DataTable
v-model:sort="sort"
v-model:selected="selected"
:rows="rows"
:columns="columns"
caption="Users"
selectable="multiple"
/>
<Pagination v-model:page="page" :total="total" />
</template>Questions
Before you install
- Is it ready for production?
- It is in the 1.0 beta: every component is tested and documented, and an API can still change between betas — each change is in the changelog.
- Does it work with Nuxt and SSR?
- Yes. Add the Tailwind Vite plugin; overlays render after mount and nothing reads the window on the server.
- Do I need Tailwind?
- Yes, Tailwind CSS v4. rowkit ships its utilities as a source your Tailwind build compiles, so you get only the classes you use.
- How big is it?
- 39 kB brotli for everything. Import one component and you ship only that — a Button is 2.6 kB.
- Which theme do I get by default?
- Windows 98, with no attribute. Put
data-theme="modern"on<html>for the modern look — light and dark — or define your own. - What is the licence?
- MIT. Use it in commercial products; no attribution in the interface is needed.