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

Revisions

  1. blvdmitry created this gist Jun 30, 2025.
    1,138 changes: 1,138 additions & 0 deletions ds.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,1138 @@

    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 },
    },
    },
    ],
    },
    ],
    };