@graphty/compact-mantine


A Mantine theme and component library optimized for dense, compact UIs. All components default to compact sizing automatically using Mantine's defaultProps system.

Features

- Compact by Default: All components render at compact size without explicit props
- Mantine-Idiomatic: Uses defaultProps with size="sm" as default
- Global Token Overrides: Smaller font sizes, tighter spacing, compact radii
- Visual Styling: Borderless inputs, semantic color backgrounds
- Fully Customizable: Spread the theme to add your own customizations

Installation

``bash
npm install @graphty/compact-mantine @mantine/core @mantine/hooks
`

Quick Start

`tsx
import { MantineProvider, TextInput, Button } from '@mantine/core';
import { compactTheme } from '@graphty/compact-mantine';

function App() {
return (

{/ Components use compact sizing automatically /}

Submit

);
}
`

Usage

$3

No size prop needed - components render compact by default:

`tsx
// All of these use compact sizing automatically



Submit


`

$3

When you need larger components, use the standard Mantine size prop:

`tsx
// Override to larger sizes when needed


Large Button
`

$3

Spread the compact theme to add your own customizations:

`tsx
import { MantineProvider } from '@mantine/core';
import { compactTheme } from '@graphty/compact-mantine';

const customTheme = {
...compactTheme,
primaryColor: 'teal',
other: {
myCustomProperty: true,
},
};

function App() {
return (

{/ Still compact by default with your customizations /}
Teal Button

);
}
`

$3

Use nested MantineProvider to create compact regions within a regular-sized UI:

`tsx
import { MantineProvider, TextInput, Button } from '@mantine/core';
import { compactTheme } from '@graphty/compact-mantine';

function App() {
return (

{/ Regular Mantine UI /}


{/ Compact region /}





Compact Button





);
}
`

Global Token Overrides

The compact theme overrides Mantine's global tokens:

| Token | Values |
|-------|--------|
| fontSizes | xs=10px, sm=11px, md=13px, lg=14px, xl=16px |
| spacing | xs=4px, sm=6px, md=8px, lg=12px, xl=16px |
| radius | xs=2px, sm=4px, md=6px, lg=8px, xl=12px |

Exports

$3

`tsx
import { compactTheme, compactColors, compactDarkColors } from '@graphty/compact-mantine';
`

- compactTheme - Complete Mantine theme with compact defaults
- compactColors - Color palette including dark colors
- compactDarkColors - Dark color palette array

$3

`tsx
import {
CompactColorInput,
ControlGroup,
ControlSection,
ControlSubGroup,
EffectToggle,
GradientEditor,
Popout,
PopoutManager,
StatRow,
StyleNumberInput,
StyleSelect,
} from '@graphty/compact-mantine';
`

$3

`tsx
import { useActualColorScheme } from '@graphty/compact-mantine';
`

Affected Components (43 total)

$3

TextInput, NumberInput, Select, Textarea, PasswordInput, Autocomplete, MultiSelect, TagsInput, PillsInput, FileInput, JsonInput, ColorInput, NativeSelect, InputWrapper

$3

Button, ActionIcon, CloseButton

$3

Switch, Checkbox, Radio, Slider, RangeSlider, SegmentedControl

$3

Badge, Text, Avatar, ThemeIcon, Indicator, Kbd, Pill

$3

Tabs, NavLink, Pagination, Stepper, Anchor, Burger

$3

Loader, Progress, RingProgress

$3

Menu, Tooltip, Popover, HoverCard

Migration from size="compact"

If you're migrating from the previous size="compact" pattern:

1. Remove all size="compact" props - components are now compact by default
2. Add size="md" or size="lg"` where you previously relied on Mantine's default sizing

See the Migration Guide for detailed instructions.

License

MIT

Show more