Components
Table
A data table where row separators are hand-drawn rough lines instead of CSS borders.
| Name | Status | Role |
|---|---|---|
| Alice Chen | Active | Admin |
| Bob Marsh | Inactive | Editor |
| Carol Dana | Active | Viewer |
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/table.jsonProps
PropTypeDefaultDescription
theme"pencil" | "ink" | "crayon"—
Overrides the global Crumble theme for all rows.
strokestring—
CSS color for row separator strokes.
strokeMutedstring—
CSS color for muted strokes.
fillstring—
CSS color for rough fills.
Notes
Each TableRow receives an index prop — this is used as the seed for the rough separator line so each row's line is consistently wobbly but stable across renders. Pass sequential integers starting from 0.
Accessibility
Table is best for genuinely tabular relationships, not just layout. Use clear headers and keep cell content concise so screen-reader users can understand row and column relationships without extra narration.
Examples
import {
Table,
TableHeader,
TableBody,
TableRow,
TableHead,
TableCell,
} from "@/components/crumble/ui/table";
<Table>
<TableHeader>
<TableRow index={0}>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow index={1}>
<TableCell>Alice</TableCell>
<TableCell>Active</TableCell>
<TableCell>Admin</TableCell>
</TableRow>
</TableBody>
</Table>;