Skip to content

Instantly share code, notes, and snippets.

@blvdmitry

blvdmitry/ds.ts

Created June 30, 2025 08:40
Show Gist options
  • Save blvdmitry/46c395cfa8f29f75bcde18ec05a019df to your computer and use it in GitHub Desktop.
Save blvdmitry/46c395cfa8f29f75bcde18ec05a019df to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ds.ts
const config: Config = {
systems: {
reshaped: { name: "Reshaped" },
chakra: { name: "Chakra UI" },
mui: { name: "MUI" },
radix: { name: "Radix" },
shadcn: { name: "shadcn/ui" },
mantine: { name: "Mantine" },
},
sections: [
{
title: "React features",
features: [
{
title: "NPM package",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: {
value: true,
partial: true,
note: "CLI package, components copied to your product",
},
mantine: { value: true },
},
},
{
title: "Dependencies",
systems: {
reshaped: { note: "reshaped: 67.4kb" },
chakra: {
note: (
<>
@chakra-ui/react: 72.9kb
<br /> @emotion/react: 8.6kb
</>
),
},
mui: {
note: (
<>
@mui/material: 159.7kb
<br />
@emotion/react: 8.6kb
<br />
@emotion/styled: 5.3kb
</>
),
},
radix: {
note: (
<>
radix-ui: 89.3kb
<br />
@radix-ui/themes: 20.9kb
</>
),
},
shadcn: {
note: (
<>
Exact value not available
<br />
Estimated to be 150kb+ for all dependencies and styles
</>
),
},
mantine: {
note: (
<>
@mantine/core: 142.5kb
<br />
@mantine/hooks: 12.3kb
<br />
@mantine/dates: 18.2kb
<br />
@mantine/charts: 11kb
<br />+ more packages
</>
),
},
},
},
{
title: "ESM tree-shaking",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Styling",
systems: {
reshaped: { note: "CSS Modules, Tailwind integration" },
chakra: { note: "Emotion" },
mui: { note: "Emotion, opt-in Pigment CSS" },
radix: { note: "Vanilla CSS in Radix Themes" },
shadcn: { note: "Tailwind" },
mantine: { note: "Custom emotion-based styling" },
},
},
{
title: "TypeScript support",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "React server components",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: true, partial: true, note: "Works with Pigment CSS" },
radix: { value: true },
shadcn: { value: true },
mantine: { value: false },
},
},
{
title: "Dark mode",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Theming",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Scoped theming",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: false },
radix: { value: false },
shadcn: { value: true },
mantine: { value: false },
},
},
{
title: "Responsive components",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: {
value: true,
partial: true,
note: "Limited to client-side code and layout utilities",
},
radix: { value: true },
shadcn: { value: true, partial: true, note: "Needs manual tailwind implementation" },
mantine: { value: true },
},
},
{
title: "Source code",
systems: {
reshaped: { value: true, paid: true, note: "Included in the Pro license" },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Paid features",
systems: {
reshaped: {
value: true,
paid: true,
note: "Design library and source code access",
},
chakra: { value: true, paid: true, note: "Chakra Pro with premium components" },
mui: {
value: true,
paid: true,
note: "MUI X, Design libraries and templates",
},
radix: { value: false },
shadcn: { value: false },
mantine: { value: false },
},
},
],
},
{
title: "Figma features",
features: [
{
title: "Figma library",
systems: {
reshaped: { value: true, note: "Updates aligned with code", paid: true },
chakra: { value: true },
mui: {
value: true,
paid: true,
partial: true,
note: "Not always aligned with the code, might be outdated",
},
radix: {
value: false,
},
shadcn: {
value: true,
paid: true,
partial: true,
note: "Maintained by a different team",
},
mantine: { value: false },
},
},
{
title: "Figma properties",
systems: {
reshaped: { value: true },
chakra: { value: true, partial: true, note: "Not always aligned with the code" },
mui: { value: true, partial: true, note: "Not always aligned with the code" },
radix: { value: false },
shadcn: { value: true, partial: true, note: "Not always aligned with the code" },
mantine: { value: false },
},
},
{
title: "Figma variables",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true, partial: true, note: "Not always aligned with the code" },
radix: { value: false },
shadcn: { value: true },
mantine: { value: false },
},
},
{
title: "Slot utilities",
systems: {
reshaped: { value: true, note: "Supports slot composition" },
chakra: { value: false },
mui: { value: true, partial: true },
radix: { value: false },
shadcn: { value: true, partial: true },
mantine: { value: false },
},
},
],
},
{
title: "Input components",
features: [
{
title: "Autocomplete",
systems: {
reshaped: { value: true },
chakra: { value: true, note: "Combobox" },
mui: { value: true },
radix: { value: false },
shadcn: { value: true, note: "Combobox" },
mantine: { value: true },
},
},
{
title: "Button",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Calendar",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: true, paid: true },
radix: { value: false },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Checkbox",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "CheckboxCard",
systems: {
reshaped: { value: true, note: "Achieved with Card composition" },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true, note: "Achieved with Card composition" },
mantine: { value: true, note: "Achieved with Card composition" },
},
},
{
title: "ColorPicker",
systems: {
reshaped: { value: false },
chakra: { value: true },
mui: { value: false },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "ColorSwatch",
systems: {
reshaped: { value: false },
chakra: { value: true },
mui: { value: false },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "DatePicker",
systems: {
reshaped: { value: true, partial: true, note: "Achieved with Select and Calendar" },
chakra: { value: false },
mui: { value: true, paid: true },
radix: { value: false },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "FileUpload",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: false },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true, note: "FileInput" },
},
},
{
title: "NumberField",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true, note: "NumberInput" },
},
},
{
title: "PasswordField",
systems: {
reshaped: { value: true, partial: true, note: "Achieved with TextField" },
chakra: { value: true },
mui: { value: true, partial: true, note: "Achieved with TextField" },
radix: { value: true, note: "PasswordToggleField" },
shadcn: { value: false },
mantine: { value: true, note: "PasswordInput" },
},
},
{
title: "PinField",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: false },
radix: { value: true, note: "OneTimePasswordField" },
shadcn: { value: true, note: "InputOTP" },
mantine: { value: true, note: "PinInput" },
},
},
{
title: "Radio",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "RadioCard",
systems: {
reshaped: { value: true, note: "Achieved with Card composition" },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true, note: "Achieved with Card composition" },
mantine: { value: true, note: "Achieved with Card composition" },
},
},
{
title: "Select",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Slider",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Switch",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "TextArea",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true, note: "TextField" },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "TextField",
systems: {
reshaped: { value: true },
chakra: { value: true, note: "Input" },
mui: { value: true },
radix: { value: true },
shadcn: { value: true, note: "Input" },
mantine: { value: true, note: "Input" },
},
},
{
title: "ToggleButton",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: true },
radix: { value: true, note: "Toggle, ToggleGroup" },
shadcn: { value: true, note: "Toggle, ToggleGroup" },
mantine: { value: false },
},
},
],
},
{
title: "Navigation components",
features: [
{
title: "Breadcrumbs",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: false },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "ContextMenu",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: false },
radix: { value: true },
shadcn: { value: true },
mantine: { value: false },
},
},
{
title: "DropdownMenu",
systems: {
reshaped: { value: true },
chakra: { value: true, note: "Menu" },
mui: { value: true, note: "Menu" },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true, note: "Menu" },
},
},
{
title: "Link",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: false },
mantine: { value: true, note: "Anchor" },
},
},
{
title: "MenuItem",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: false },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true, note: "NavLink" },
},
},
{
title: "Pagination",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "Tabs",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
],
},
{
title: "Feedback components",
features: [
{
title: "Alert",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true, note: "Callout" },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Loader",
systems: {
reshaped: { value: true },
chakra: { value: true, note: "Spinner" },
mui: { value: false },
radix: { value: true, note: "Spinner" },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "Progress",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "ProgressIndicator",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: false },
radix: { value: false },
shadcn: { value: false },
mantine: { value: false },
},
},
{
title: "Skeleton",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Toast",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true, note: "Snackbar" },
radix: { value: true },
shadcn: { value: true, note: "Sonner" },
mantine: { value: true, note: "Notification" },
},
},
],
},
{
title: "Container components",
features: [
{
title: "Accordion",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "ActionBar",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true, partial: true, note: "BottomNavigation" },
radix: { value: false },
shadcn: { value: false },
mantine: { value: false },
},
},
{
title: "Card",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Carousel",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: false },
radix: { value: false },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Modal",
systems: {
reshaped: { value: true },
chakra: { value: true, note: "Dialog, Drawer" },
mui: { value: true, note: "Dialog, Drawer" },
radix: { value: true, note: "Dialog" },
shadcn: { value: true, note: "Dialog, Drawer" },
mantine: { value: true },
},
},
{
title: "Popover",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true, note: "Popover, HoverCard" },
shadcn: { value: true, note: "Popover, HoverCard" },
mantine: { value: true, note: "Popover, HoverCard" },
},
},
{
title: "Scrim",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: false },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true, note: "Overlay" },
},
},
],
},
{
title: "Data display components",
features: [
{
title: "Avatar",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Badge",
systems: {
reshaped: { value: true },
chakra: { value: true, note: "Badge, Status, Chip" },
mui: { value: true, note: "Badge, Chip" },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true, note: "Badge, Pill, Chip" },
},
},
{
title: "Divider",
systems: {
reshaped: { value: true },
chakra: { value: true, note: "Separator" },
mui: { value: true },
radix: { value: true, note: "Separator" },
shadcn: { value: true, note: "Separator" },
mantine: { value: true },
},
},
{
title: "Hotkey",
systems: {
reshaped: { value: true },
chakra: { value: true, note: "Kbd" },
mui: { value: false },
radix: { value: true, note: "Kbd" },
shadcn: { value: true, note: "Kbd" },
mantine: { value: true, note: "Kbd" },
},
},
{
title: "Rating",
systems: {
reshaped: { value: false },
chakra: { value: true },
mui: { value: true },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "Stepper",
systems: {
reshaped: { value: true },
chakra: { value: true, note: "Steps" },
mui: { value: true },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "Table",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Timeline",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "Tooltip",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
],
},
{
title: "Chart components",
features: [
{
title: "Bars chart",
systems: {
reshaped: { value: true, partial: true, note: "Supports recharts theming" },
chakra: { value: true },
mui: { value: true },
radix: { value: false },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Lines chart",
systems: {
reshaped: { value: true, partial: true, note: "Supports recharts theming" },
chakra: { value: true },
mui: { value: true },
radix: { value: false },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Pie chart",
systems: {
reshaped: { value: true, partial: true, note: "Supports recharts theming" },
chakra: { value: true },
mui: { value: true },
radix: { value: false },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Scatter chart",
systems: {
reshaped: { value: true, partial: true, note: "Supports recharts theming" },
chakra: { value: true },
mui: { value: true },
radix: { value: false },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Sparkline chart",
systems: {
reshaped: { value: true, partial: true, note: "Supports recharts theming" },
chakra: { value: true },
mui: { value: true },
radix: { value: false },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Radar chart",
systems: {
reshaped: { value: true, partial: true, note: "Supports recharts theming" },
chakra: { value: true },
mui: { value: true },
radix: { value: false },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Heatmap chart",
systems: {
reshaped: { value: false },
chakra: { value: false },
mui: { value: true, paid: true, note: "Part of MUI X Pro" },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "Funnel chart",
systems: {
reshaped: { value: false },
chakra: { value: false },
mui: { value: true, paid: true, note: "Part of MUI X Pro" },
radix: { value: false },
shadcn: { value: false },
mantine: { value: false },
},
},
],
},
{
title: "Component utilities",
features: [
{
title: "Actionable",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: false },
radix: { value: true },
shadcn: { value: false },
mantine: { value: false },
},
},
{
title: "Container",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "FormControl",
systems: {
reshaped: { value: true },
chakra: { value: true, note: "Field" },
mui: { value: true },
radix: { value: true, note: "Form" },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "Grid",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "Hidden",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: true, partial: true, note: "Achieved with sx prop" },
radix: { value: false },
shadcn: { value: false },
mantine: { value: false },
},
},
{
title: "HiddenVisually",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: false },
radix: { value: true },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "Icon",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: false },
mantine: { value: false },
},
},
{
title: "Image",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: false },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "Overlay",
systems: {
reshaped: { value: true },
chakra: { value: true, note: "OverlayManager" },
mui: { value: true, note: "Backdrop" },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "Portal",
systems: {
reshaped: { value: false },
chakra: { value: true },
mui: { value: true },
radix: { value: true },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "Resizable",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: false },
radix: { value: false },
shadcn: { value: true },
mantine: { value: false },
},
},
{
title: "ScrollArea",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: false },
radix: { value: true },
shadcn: { value: true },
mantine: { value: true },
},
},
{
title: "Text",
systems: {
reshaped: { value: true },
chakra: { value: true },
mui: { value: true, note: "Typography" },
radix: { value: true, note: "Text, Heading, Strong" },
shadcn: { value: true, partial: true, note: "Typography" },
mantine: { value: true },
},
},
{
title: "View",
systems: {
reshaped: { value: true },
chakra: { value: true, note: "Box, Flex, Center, Float, Group, Stack, HStack, VStack" },
mui: { value: true, note: "List, Box, Paper, Stack, ImageList" },
radix: { value: true, note: "Box, Flex, Section" },
shadcn: { value: false },
mantine: { value: true, note: "Box, Flex, Group, Stack" },
},
},
],
},
{
title: "Hooks",
features: [
{
title: "useHotkeys",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: false },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "useOnClickOutside",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: true },
radix: { value: false },
shadcn: { value: false },
mantine: { value: true },
},
},
{
title: "useRTL",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: false },
radix: { value: true, partial: true, note: "DirectionProvider" },
shadcn: { value: false },
mantine: { value: false },
},
},
{
title: "useScrollLock",
systems: {
reshaped: { value: true },
chakra: { value: false },
mui: { value: false },
radix: { value: false },
shadcn: { value: false },
mantine: { value: false },
},
},
],
},
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment