Adapters
An adapter applies a Recursica theme to an existing component library, so a team can keep the library it already uses. The adapter reads the Recursica tokens and applies them, so a newly exported theme restyles every component without changes to the code that uses it.
Each adapter’s repository includes an ADAPTER_STATUS.md file that lists the components the adapter covers. Recursica reads the component lists straight from those files, so the lists match each adapter’s latest update.
Recursica has adapters for two React libraries, Mantine and Material UI, and for Angular Material. This site is built with the Mantine adapter. Every adapter is MIT licensed and uses the same structure. To request an adapter for another library, ask in the Recursica community. To contribute one, open a pull request.
Mantine (React)
@recursica/adapter-mantine-v8 — Repository · Adapter status · npm
- Accordion
- AssistiveElement
- AutoComplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- CheckboxGroup
- Chip
- Container
- DatePicker
- Dropdown
- FileInput
- FileUpload
- Flex
- FormControlLayout
- FormControlWrapper
- Grid
- Group
- Heading
- HoverCard
- Label
- Layer
- Link
- Loader
- Menu
- Modal
- NumberInput
- Pagination
- Panel
- Popover
- Radio
- RadioGroup
- ReadOnlyField
- RecursicaThemeProvider
- SegmentedControl
- Slider
- Stack
- Stepper
- Switch
- SwitchGroup
- Table
- Tabs
- Text
- TextArea
- TextField
- Timeline
- TimePicker
- Toast
- Tooltip
- TransferList
- Tree
Material UI (React)
@recursica/adapter-mui-v7 — Repository · Adapter status · npm
- Accordion
- AssistiveElement
- AutoComplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Chip
- Container
- DatePicker
- Dropdown
- FileInput
- FileUpload
- Flex
- FormControlLayout
- FormControlWrapper
- Grid
- Group
- Heading
- HoverCard
- Label
- Link
- Loader
- Menu
- Modal
- NumberInput
- Pagination
- Panel
- Popover
- Radio
- ReadOnlyField
- SegmentedControl
- Slider
- Stack
- Stepper
- Switch
- Table
- Tabs
- Text
- TextArea
- TextField
- Timeline
- TimePicker
- Toast
- Tooltip
- TransferList
- Tree
- Typography
Angular Material
@recursica/adapter-angular-material — Repository · Adapter status · npm
- Accordion
- AssistiveElement
- AutoComplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Chip
- Container
- DatePicker
- Dropdown
- FileInput
- FileUpload
- Flex
- FormControlLayout
- FormControlWrapper
- Grid
- Group
- Heading
- HoverCard
- Label
- Layer
- Link
- Loader
- Menu
- Modal
- NumberInput
- Pagination
- Panel
- Popover
- Radio
- ReadOnlyField
- SegmentedControl
- Slider
- Stack
- Stepper
- Switch
- Table
- Tabs
- Text
- TextArea
- TextField
- ThemeProvider
- Timeline
- TimePicker
- Toast
- Tooltip
- TransferList
- Tree
Shared packages
Each adapter has its own repository. The packages the adapters share live in the recursica monorepo and are published to npm from there.
The Mantine and Material UI adapters use all five shared packages. The Angular Material adapter uses only adapter-tester.
- adapter-common reads the tokens, defines which props each component accepts, and provides the
overStyledescape hatch. - adapter-tester checks that an adapter renders every component in every variant and state.
- storybook-template is the Storybook a designer uses to review a re-themed branch before it goes to a developer.
- recursica-postcss-vars resolves the exported CSS variables at build time.
- recursica-token-analyzer reports which tokens a codebase uses, and where the codebase hardcodes values instead.
The Recursica MCP server is also in the monorepo, but no adapter uses it.
Planned
A Carbon adapter is in development. Its repository doesn’t have an ADAPTER_STATUS.md file yet, so Recursica doesn’t list its components.