Styling

The component ships unstyled by default — semantic <table>/<article> markup with BEM-ish class names, no visual opinion. The look is entirely up to the consumer: wire the cell-/card-/actions slots to your own component library instead of plain HTML, as shown in Extension points.

The bundled stylesheet

A ready-to-use Material-ish stylesheet is available as an opt-in import, for consumers who don't already have their own design system — this whole documentation site uses it:

import 'v0-adaptive-table/style.css'

It exposes a handful of CSS variables for quick theming:

Variable	Purpose
--v0-at-surface	Table/card/list background
--v0-at-text	Base text color
--v0-at-border	Border color
--v0-at-muted	Secondary text (subtitle, labels)
--v0-at-hover	Row/header hover background
--v0-at-radius	Border radius
--v0-at-accent	Active sort indicator
--v0-at-shadow	Card/list drop shadow

Set them on .v0-adaptive-table or an ancestor to override:

.v0-adaptive-table {
  --v0-at-accent: #7c3aed;
  --v0-at-radius: 4px;
}

The stylesheet pins color-scheme: light on the root so its own light-mode colors aren't overridden by a dark browser or OS preference — there's no dark variant yet.

Class names

Class	Where
.v0-adaptive-table__grid	Desktop <table>
.v0-adaptive-table__cards, .v0-adaptive-table__card	card mobile mode
.v0-adaptive-table__card-title, -subtitle, -body	Card sections
.v0-adaptive-table__card-field--block	A field given its own line via mobile.block
.v0-adaptive-table__list, .v0-adaptive-table__list-item	list mobile mode
.v0-adaptive-table__list-summary	The clickable, always-visible row summary
.v0-adaptive-table__list-detail	The body fields, only present once a row is expanded

None of these are part of the component's public API in the semver sense — they're a styling hook, not a contract. If you need something more structural than a CSS override, reach for a slot instead.