Home / Open source / slotsmith

slotsmith

React components you can take apart.

A headless library where every part is a slot you can replace, and everything you don't replace renders as finished, accessible HTML. Ship on day one, match your design system on day forty, never fork.

v1.4.0
ISC
React 18 · 19
0 runtime deps
RTL built in

Read the docs GitHub npm


Pagination bar	Yousef	shipped
Skeleton state	Noor	review
Error state	Yousef	shipped
Empty state	Lina	shipped
Sticky header	Omar	review

Built with my slotsmith DataTable

users-table.tsx

import { DataTable } from "slotsmith"

// It works, and it already looks finished.
<DataTable data={users} columns={columns} />

Two kinds of parts

Element parts

Root · Table · Row · Cell …

Plain DOM props, state as data-* attributes. Drop in shadcn, MUI or Chakra primitives unchanged.

Widget parts

Checkbox · Pagination · Empty …

Semantic props like checked and pageIndex. Your components, through a few-line adapter.

Data table

21 parts · TanStack v9

Built on TanStack Table v9, with 21 replaceable parts.

Client or server sorting and pagination
Selection that survives server pages
Tree rows, virtual rows, sticky header
Loading, error and empty states

Try it live

Autocomplete

17 parts

A combobox and a select in one, with 17 replaceable parts. Tags for many values; remote options that are debounced, abortable and paged.

Try it live

File uploader

drop zone · tile · picker

Drop zone, image tile or picker-only. Queued uploads with progress and retry, real cancellation, instant previews.

Try it live

Date picker

13 parts · single · multiple · range

One date, several, or a range, with 13 replaceable parts. A full keyboard grid, bounds and blocked dates, presets, and YYYY-MM-DD values that never shift across time zones.

Try it live

Your AI agent knows it too

slotsmith-ai is an MCP server for coding agents such as Claude Code, Cursor and VS Code Copilot. It hands them the exact props, slots, fallback markup and MUI, shadcn and Chakra adapter recipes for the slotsmith version you have installed, and warns when the versions differ. No guessed props, no invented slot names.

AI tools guide

Claude Code

claude mcp add slotsmith -- npx -y slotsmith-ai mcp

Cursor · VS Code · Claude Desktop

{"command":"npx","args":["-y","slotsmith-ai","mcp"]}

Tools it gives your agent

list_components
get_component_api
list_slots
get_slot
get_adapter_example
get_setup
search_docs

What every component promises

Fallbacks shipIf the built-in look isn't production-ready, it isn't done.
Uncontrolled firstNo required state to render anything.
Every string a labelTranslation and RTL are props, not a fork.
AccessibleKeyboard paths, ARIA and focus live in the fallbacks.
No runtime depsOnly the peer a component is built on.

Why I built it

Styled kits hand you someone else's design language; headless kits hand you a blank page and a week of rebuilding the obvious. After shipping the same tables and pickers across client projects, I wanted the middle: behaviour plus named parts, each with a fallback worth shipping.

This is only the beginning

Four components today. More are on the way: new components, better versions of the ones that exist, and ideas that make everyday programming easier. Same rules for all of them: headless logic, replaceable parts, fallbacks good enough to ship.

Coming next

More components, built the same way
Deeper polish on the current four
Tools and ideas that remove everyday boilerplate

Want this level of care in your product?

Send a project brief

$ npm i slotsmith