0
# Configuration
1

2
Constants and configuration objects for consistent branding, external links, and color schemes across Mantine properties.
3

4
## Capabilities
5

6
### meta
7

8
Central configuration object containing all external links, brand colors, and site metadata used throughout Mantine properties.
9

10
```typescript { .api }
11
/**
12
 * Central configuration object with external links and brand settings
13
 * Contains all URLs, colors, and metadata used across Mantine websites
14
 */
15
interface MetaConfig {
16
  /** Main documentation website URL */
17
  docsLink: string;
18
  /** Mantine UI components website URL */
19
  uiLink: string;
20
  /** Discord community server invite URL */
21
  discordLink: string;
22
  /** Official Twitter account URL */
23
  twitterLink: string;
24
  /** NPM organization page URL */
25
  npmLink: string;
26
  /** Discord brand color hex code */
27
  discordColor: string;
28
  /** Twitter brand color hex code */
29
  twitterColor: string;
30
  /** Collection of GitHub-related URLs */
31
  gitHubLinks: {
32
    /** Main Mantine repository URL */
33
    mantine: string;
34
    /** Mantine UI website repository URL */
35
    mantineUi: string;
36
    /** GitHub Discussions URL */
37
    discussions: string;
38
    /** Mantine organization URL */
39
    organization: string;
40
    /** Releases page URL */
41
    releases: string;
42
  };
43
}
44

45
const meta: MetaConfig;
46
```
47

48
**Usage Examples:**
49

50
```typescript
51
import { meta } from "@mantine/ds";
52

53
// Link to documentation
54
function DocsLink() {
55
  return (
56
    <a href={meta.docsLink} target="_blank" rel="noopener noreferrer">
57
      View Documentation
58
    </a>
59
  );
60
}
61

62
// Community links
63
function CommunitySection() {
64
  return (
65
    <div>
66
      <a href={meta.discordLink}>Join Discord</a>
67
      <a href={meta.twitterLink}>Follow on Twitter</a>
68
      <a href={meta.gitHubLinks.discussions}>GitHub Discussions</a>
69
    </div>
70
  );
71
}
72

73
// Styled with brand colors
74
function BrandedButton() {
75
  return (
76
    <button 
77
      style={{ 
78
        backgroundColor: meta.discordColor,
79
        color: 'white'
80
      }}
81
      onClick={() => window.open(meta.discordLink)}
82
    >
83
      Join our Discord
84
    </button>
85
  );
86
}
87

88
// Development links
89
function DeveloperResources() {
90
  return (
91
    <div>
92
      <h3>Developer Resources</h3>
93
      <ul>
94
        <li><a href={meta.gitHubLinks.mantine}>Source Code</a></li>
95
        <li><a href={meta.gitHubLinks.releases}>Releases</a></li>
96
        <li><a href={meta.npmLink}>NPM Packages</a></li>
97
        <li><a href={meta.uiLink}>UI Components</a></li>
98
      </ul>
99
    </div>
100
  );
101
}
102

103
// Access nested values
104
const mainRepoUrl = meta.gitHubLinks.mantine;
105
const brandColor = meta.discordColor; // '#5865f2'
106
```
107

108
## Constants Reference
109

110
The `meta` object contains the following constant values:
111

112
**Website Links:**
113
- `docsLink`: `'https://mantine.dev'`
114
- `uiLink`: `'https://ui.mantine.dev/'`
115
- `npmLink`: `'https://www.npmjs.com/org/mantine'`
116

117
**Social Media:**
118
- `discordLink`: `'https://discord.gg/wbH82zuWMN'`
119
- `twitterLink`: `'https://twitter.com/mantinedev'`
120

121
**Brand Colors:**
122
- `discordColor`: `'#5865f2'`
123
- `twitterColor`: `'#1C8CD8'`
124

125
**GitHub Links:**
126
- `gitHubLinks.mantine`: `'https://github.com/mantinedev/mantine'`
127
- `gitHubLinks.mantineUi`: `'https://github.com/mantinedev/ui.mantine.dev'`
128
- `gitHubLinks.discussions`: `'https://github.com/mantinedev/mantine/discussions'`
129
- `gitHubLinks.organization`: `'https://github.com/mantinedev'`
130
- `gitHubLinks.releases`: `'https://github.com/mantinedev/mantine/releases'`
131

132
## Types
133

134
```typescript { .api }
135
interface MetaConfig {
136
  docsLink: string;
137
  uiLink: string;
138
  discordLink: string;
139
  twitterLink: string;
140
  npmLink: string;
141
  discordColor: string;
142
  twitterColor: string;
143
  gitHubLinks: GitHubLinks;
144
}
145

146
interface GitHubLinks {
147
  mantine: string;
148
  mantineUi: string;
149
  discussions: string;
150
  organization: string;
151
  releases: string;
152
}
153
```