0
# @mantine/ds
1
2
@mantine/ds is an internal component library designed specifically for use on Mantine-related websites (*.mantine.dev). It provides essential UI components, demo systems, brand elements, and navigation controls that maintain consistency across Mantine's documentation sites and marketing materials.
3
4
## Package Information
5
6
- **Package Name**: @mantine/ds
7
- **Package Type**: npm (scoped)
8
- **Language**: TypeScript
9
- **Installation**: `npm install @mantine/ds`
10
11
## Core Imports
12
13
```typescript
14
import {
15
Demo,
16
MantineLogo,
17
SearchControl,
18
HeaderControl,
19
TwitterButton,
20
DiscordButton,
21
meta
22
} from "@mantine/ds";
23
```
24
25
For CommonJS:
26
27
```javascript
28
const {
29
Demo,
30
MantineLogo,
31
SearchControl,
32
HeaderControl,
33
TwitterButton,
34
DiscordButton,
35
meta
36
} = require("@mantine/ds");
37
```
38
39
## Basic Usage
40
41
```typescript
42
import { Demo, MantineLogo, SearchControl, DiscordButton } from "@mantine/ds";
43
44
// Brand logo with different types
45
function Header() {
46
return (
47
<div>
48
{/* Full logo with text */}
49
<MantineLogo type="full" size={120} />
50
51
{/* Just the mark/icon */}
52
<MantineLogo type="mark" size={40} />
53
</div>
54
);
55
}
56
57
// Demo system for component examples
58
function ComponentDemo() {
59
const demoData = {
60
type: 'code',
61
component: MyComponent,
62
code: `<MyComponent prop="value" />`
63
};
64
65
return <Demo data={demoData} />;
66
}
67
68
// Navigation controls
69
function SiteHeader() {
70
return (
71
<div>
72
<SearchControl onClick={() => openSearch()} />
73
<DiscordButton />
74
</div>
75
);
76
}
77
```
78
79
## Architecture
80
81
@mantine/ds is built around several key component categories:
82
83
- **Brand Components**: Logo and visual identity elements (`MantineLogo`)
84
- **Demo System**: Flexible demo rendering with support for code, configurator, and styles-api demos (`Demo`, `CodeDemo`, `ConfiguratorDemo`, `StylesApiDemo`)
85
- **Navigation Controls**: Header controls for search, settings, and external links (`SearchControl`, `HeaderControl` variants)
86
- **Social Integration**: Pre-configured social media buttons (`TwitterButton`, `DiscordButton`)
87
- **Icon Library**: Brand-specific icons for platforms and technologies (`DiscordIcon`, `TwitterIcon`, etc.)
88
- **Configuration**: Meta constants for links and brand colors (`meta`)
89
90
## Capabilities
91
92
### Brand & Logo Components
93
94
Logo and brand identity components for consistent visual representation across Mantine properties.
95
96
```typescript { .api }
97
type MantineLogoVariant = 'mantine.dev' | 'ui.mantine.dev';
98
99
interface MantineLogoProps extends LogoProps {
100
type?: 'mark' | 'full';
101
}
102
103
interface LogoProps extends React.ComponentPropsWithoutRef<'svg'> {
104
color?: MantineColor;
105
variant?: MantineLogoVariant;
106
size?: number | string;
107
inverted?: boolean;
108
}
109
110
function MantineLogo(props: MantineLogoProps): JSX.Element;
111
```
112
113
[Brand Components](./brand-components.md)
114
115
### Demo System
116
117
Complete demo rendering system supporting multiple demo types with syntax highlighting and interactive controls.
118
119
```typescript { .api }
120
type MantineDemo =
121
| ({ type: 'code' } & DemoComponent & CodeDemoProps)
122
| ({ type: 'configurator' } & DemoComponent & ConfiguratorDemoProps)
123
| ({ type: 'styles-api' } & DemoComponent & StylesApiDemoProps);
124
125
interface DemoProps {
126
data: MantineDemo;
127
}
128
129
function Demo(props: DemoProps): JSX.Element;
130
```
131
132
[Demo System](./demo-system.md)
133
134
### Navigation & Controls
135
136
Header controls for search functionality, settings toggles, and navigation elements.
137
138
```typescript { .api }
139
interface HeaderControlProps extends BoxProps {
140
tooltip: string;
141
children: React.ReactNode;
142
}
143
144
interface HeaderControlsProps extends BoxProps {
145
onSearch?: () => void;
146
githubLink?: string;
147
withDirectionToggle?: boolean;
148
withSearch?: boolean;
149
withGithub?: boolean;
150
withDiscord?: boolean;
151
discordLink?: string;
152
withColorScheme?: boolean;
153
}
154
155
interface SearchControlProps extends BoxProps, ElementProps<'button'> {}
156
157
function SearchControl(props: SearchControlProps): JSX.Element;
158
function HeaderControl(props: HeaderControlProps): JSX.Element;
159
function HeaderControls(props: HeaderControlsProps): JSX.Element;
160
function GithubControl(props: { link: string }): JSX.Element;
161
function DiscordControl(props: { link?: string }): JSX.Element;
162
function SearchMobileControl(props: { onSearch: () => void }): JSX.Element;
163
function ColorSchemeControl(): JSX.Element;
164
function DirectionControl(): JSX.Element;
165
```
166
167
[Navigation Controls](./navigation-controls.md)
168
169
### Social Integration
170
171
Pre-configured social media buttons with brand-appropriate styling and links.
172
173
```typescript { .api }
174
interface SocialButtonProps extends BoxProps, ElementProps<'a', 'type'> {
175
icon?: React.ReactNode;
176
}
177
178
function TwitterButton(props?: SocialButtonProps): JSX.Element;
179
function DiscordButton(props?: SocialButtonProps): JSX.Element;
180
```
181
182
[Social Integration](./social-integration.md)
183
184
### Icon Library
185
186
Brand-specific icons for platforms, technologies, and social media.
187
188
```typescript { .api }
189
interface IconProps {
190
size?: number | string;
191
style?: React.CSSProperties;
192
}
193
194
function DiscordIcon(props: IconProps): JSX.Element;
195
function TwitterIcon(props: IconProps): JSX.Element;
196
function GithubIcon(props: IconProps): JSX.Element;
197
function NpmIcon(props: IconProps): JSX.Element;
198
function YarnIcon(props: IconProps): JSX.Element;
199
function TypeScriptIcon(props: IconProps): JSX.Element;
200
function TypeScriptCircleIcon(props: IconProps): JSX.Element;
201
function CssIcon(props: IconProps): JSX.Element;
202
```
203
204
[Icon Library](./icon-library.md)
205
206
### Configuration & Meta
207
208
Constants and configuration objects for consistent branding and external links.
209
210
```typescript { .api }
211
interface MetaConfig {
212
docsLink: string;
213
uiLink: string;
214
discordLink: string;
215
twitterLink: string;
216
npmLink: string;
217
discordColor: string;
218
twitterColor: string;
219
gitHubLinks: {
220
mantine: string;
221
mantineUi: string;
222
discussions: string;
223
organization: string;
224
releases: string;
225
};
226
}
227
228
const meta: MetaConfig;
229
```
230
231
[Configuration](./configuration.md)
232
233
## Types
234
235
```typescript { .api }
236
interface DemoComponent {
237
component: React.FC<any>;
238
}
239
240
type MantineColor = string;
241
type BoxProps = Record<string, any>;
242
type ElementProps<T extends keyof JSX.IntrinsicElements, U extends string = never> =
243
Omit<JSX.IntrinsicElements[T], U>;
244
245
type ConfiguratorControlOptions =
246
| ConfiguratorBooleanControlOptions
247
| ConfiguratorSegmentedControlOptions
248
| ConfiguratorColorControlOptions
249
| ConfiguratorStringControlOptions
250
| ConfiguratorSelectControlOptions
251
| ConfiguratorSizeControlOptions
252
| ConfiguratorNumberControlOptions;
253
254
function getCodeFileIcon(fileName: string): React.ReactNode | null;
255
```