---
title: "प्रीसेट"
description: "अपने प्रोडक्ट को साथ आने वाले किसी प्रीसेट में बनाएँ — एक स्टाइलशीट और एक एट्रिब्यूट, उसके माँगे फ़ॉन्ट, उसके कंपोनेंट — या किसी प्रीसेट का सिर्फ़ एक कंपोनेंट अपने सिस्टम में लें।"
url: "https://tanrei.chnotchy.com/hi/getting-started/presets/"
last_updated: 2026-10-18T09:04:58.000Z
---

# प्रीसेट

> अपने प्रोडक्ट को साथ आने वाले किसी प्रीसेट में बनाएँ — एक स्टाइलशीट और एक एट्रिब्यूट, उसके माँगे फ़ॉन्ट, उसके कंपोनेंट — या किसी प्रीसेट का सिर्फ़ एक कंपोनेंट अपने सिस्टम में लें।

Tanrei अपने डिफ़ॉल्ट सिस्टम `tanrei` और तीन प्रीसेट के साथ आता है: `m3-like`, `m3-expressive-like` और `cupertino`। प्रीसेट एक [डिज़ाइन सिस्टम लेयर](https://tanrei.chnotchy.com/hi/foundations/design-systems/#%E0%A4%B8%E0%A4%BE%E0%A4%A5-%E0%A4%86%E0%A4%A8%E0%A5%87-%E0%A4%B5%E0%A4%BE%E0%A4%B2%E0%A5%87-%E0%A4%B8%E0%A4%BF%E0%A4%B8%E0%A5%8D%E0%A4%9F%E0%A4%AE) है, ठीक वैसी जैसी आप खुद लिखेंगे: यह Tanrei के कंपोनेंट को किसी दूसरे डिज़ाइन सिस्टम के मान देती है, और तय करती है कि उसमें कौन-से कंपोनेंट हैं और उनके `variant` के कौन-से मान। इसे जैसा है वैसा इस्तेमाल करें, या [आपके अपने डिज़ाइन सिस्टम](https://tanrei.chnotchy.com/hi/getting-started/your-design-system/) की शुरुआत के रूप में।

## वेब पर प्रीसेट इस्तेमाल करें

1. टोकन लोड करें, फिर प्रीसेट की स्टाइलशीट। उसके टोकन वहाँ लागू होते हैं जहाँ उसका एट्रिब्यूट लगा हो।

   ```js
   import '@tanrei/web/tokens.css';
   import '@tanrei/web/systems/m3-like.css';
   ```

2. एट्रिब्यूट `<html>` पर, या पेज के किसी भी हिस्से पर लगाएँ: एक पेज पर कई सिस्टम साथ रह सकते हैं।

   ```html
   <html data-tanrei-system="m3-like">
   ```

3. `@tanrei/web` की जगह प्रीसेट की एंट्री से कंपोनेंट रजिस्टर करें। यह सिर्फ़ वही कंपोनेंट रजिस्टर करती है जो प्रीसेट में हैं।

   ```js
   import '@tanrei/web/m3-like';
   ```

4. उसके फ़ॉन्ट उन्हीं फ़ैमिली नामों से लोड करें जो उसके टोकन इस्तेमाल करते हैं; सूची नीचे है। Tanrei कोई फ़ॉन्ट फ़ाइल साथ नहीं देता: [फ़ॉन्ट](https://tanrei.chnotchy.com/hi/getting-started/web/#%E0%A4%AB%E0%A4%BC%E0%A5%89%E0%A4%A8%E0%A5%8D%E0%A4%9F) देखें।

प्रीसेट में क्या है, यह उसके कंपोनेंट मैनिफ़ेस्ट `@tanrei/web/systems/<id>.components.json` में लिखा है, जिसे एडिटर और कोडिंग एजेंट पढ़ते हैं। इस साइट पर [कंपोनेंट की सूची](https://tanrei.chnotchy.com/hi/components/) के पास या साइडबार के ऊपर कोई डिज़ाइन सिस्टम चुनें, तो सूचियाँ सिर्फ़ वही दिखाती हैं जो उस सिस्टम में है।

## प्रीसेट

नीचे हर प्रीसेट की जानकारी उसकी लेयर, उसके रिज़ॉल्व किए गए टोकन और उसके कंपोनेंट मैनिफ़ेस्ट से पढ़ी जाती है।

### m3-like

- **स्टाइलशीट**: `@tanrei/web/systems/m3-like.css`
- **एट्रिब्यूट**: `data-tanrei-system="m3-like"`
- **कंपोनेंट**: 96, `@tanrei/web/m3-like` से रजिस्टर होते हैं
- **टेक्स्ट**: `Roboto, system-ui, sans-serif` — Roboto (`@fontsource-variable/roboto`) लोड करें
- **कोड**: `Roboto Mono, ui-monospace, monospace` — Roboto Mono (`@fontsource-variable/roboto-mono`) लोड करें
- **आइकन**: `Material Symbols Outlined` — Material Symbols Outlined (`@fontsource-variable/material-symbols-outlined`) लोड करें
- **डिफ़ॉल्ट सिस्टम के अलावा**: [FAB menu](https://tanrei.chnotchy.com/hi/components/fab-menu/), [Segmented button](https://tanrei.chnotchy.com/hi/components/segmented-button/)
- **इसमें नहीं**: कोई नहीं
- **डिफ़ॉल्ट सिस्टम के अलावा वेरिएंट मान**: `filled, outlined`: [Chip field](https://tanrei.chnotchy.com/hi/components/chip-field/), [Color field](https://tanrei.chnotchy.com/hi/components/color-field/), [Color input](https://tanrei.chnotchy.com/hi/components/color-input/), [Combobox](https://tanrei.chnotchy.com/hi/components/combobox/), [Combobox field](https://tanrei.chnotchy.com/hi/components/combobox-field/), [Number field](https://tanrei.chnotchy.com/hi/components/number-field/), [Number input](https://tanrei.chnotchy.com/hi/components/number-input/), [Select](https://tanrei.chnotchy.com/hi/components/select/), [Select field](https://tanrei.chnotchy.com/hi/components/select-field/), [Text field](https://tanrei.chnotchy.com/hi/components/text-field/), [Text input](https://tanrei.chnotchy.com/hi/components/text-input/)
- **वे वेरिएंट मान जो यह छोड़ देता है**: `filled`: [Navigation bar](https://tanrei.chnotchy.com/hi/components/navigation-bar/) · `tonal`: [Tabs](https://tanrei.chnotchy.com/hi/components/tabs/)

इससे जनरेट किया गया: `tokens/systems/m3-like.system.json`, `tokens/generated/m3-like/components.json`

### m3-expressive-like

- **स्टाइलशीट**: `@tanrei/web/systems/m3-expressive-like.css`
- **एट्रिब्यूट**: `data-tanrei-system="m3-expressive-like"`
- **कंपोनेंट**: 96, `@tanrei/web/m3-expressive-like` से रजिस्टर होते हैं
- **टेक्स्ट**: `Roboto, system-ui, sans-serif` — Roboto (`@fontsource-variable/roboto`) लोड करें
- **कोड**: `Roboto Mono, ui-monospace, monospace` — Roboto Mono (`@fontsource-variable/roboto-mono`) लोड करें
- **आइकन**: `Material Symbols Outlined` — Material Symbols Outlined (`@fontsource-variable/material-symbols-outlined`) लोड करें
- **डिफ़ॉल्ट सिस्टम के अलावा**: [FAB menu](https://tanrei.chnotchy.com/hi/components/fab-menu/), [Segmented button](https://tanrei.chnotchy.com/hi/components/segmented-button/)
- **इसमें नहीं**: कोई नहीं
- **डिफ़ॉल्ट सिस्टम के अलावा वेरिएंट मान**: `filled, outlined`: [Chip field](https://tanrei.chnotchy.com/hi/components/chip-field/), [Color field](https://tanrei.chnotchy.com/hi/components/color-field/), [Color input](https://tanrei.chnotchy.com/hi/components/color-input/), [Combobox](https://tanrei.chnotchy.com/hi/components/combobox/), [Combobox field](https://tanrei.chnotchy.com/hi/components/combobox-field/), [Number field](https://tanrei.chnotchy.com/hi/components/number-field/), [Number input](https://tanrei.chnotchy.com/hi/components/number-input/), [Select](https://tanrei.chnotchy.com/hi/components/select/), [Select field](https://tanrei.chnotchy.com/hi/components/select-field/), [Text field](https://tanrei.chnotchy.com/hi/components/text-field/), [Text input](https://tanrei.chnotchy.com/hi/components/text-input/)
- **वे वेरिएंट मान जो यह छोड़ देता है**: `filled`: [Navigation bar](https://tanrei.chnotchy.com/hi/components/navigation-bar/) · `tonal`: [Tabs](https://tanrei.chnotchy.com/hi/components/tabs/)

इससे जनरेट किया गया: `tokens/systems/m3-expressive-like.system.json`, `tokens/generated/m3-expressive-like/components.json`

### cupertino

- **स्टाइलशीट**: `@tanrei/web/systems/cupertino.css`
- **एट्रिब्यूट**: `data-tanrei-system="cupertino"`
- **कंपोनेंट**: 95, `@tanrei/web/cupertino` से रजिस्टर होते हैं
- **टेक्स्ट**: `-apple-system, BlinkMacSystemFont, system-ui, Inter, sans-serif` — Inter (`@fontsource-variable/inter`) लोड करें
- **कोड**: `ui-monospace, SF Mono, Menlo, monospace` — प्लेटफ़ॉर्म के अपने फ़ॉन्ट
- **आइकन**: `Material Symbols Rounded` — Material Symbols Rounded (`@fontsource-variable/material-symbols-rounded`) लोड करें
- **डिफ़ॉल्ट सिस्टम के अलावा**: [Segmented button](https://tanrei.chnotchy.com/hi/components/segmented-button/)
- **इसमें नहीं**: [FAB menu](https://tanrei.chnotchy.com/hi/components/fab-menu/) (इसके बजाय [Main action button](https://tanrei.chnotchy.com/hi/components/main-action-button/), [Bottom sheet](https://tanrei.chnotchy.com/hi/components/bottom-sheet/) इस्तेमाल करें)
- **डिफ़ॉल्ट सिस्टम के अलावा वेरिएंट मान**: `filled, outlined`: [Chip field](https://tanrei.chnotchy.com/hi/components/chip-field/), [Color field](https://tanrei.chnotchy.com/hi/components/color-field/), [Color input](https://tanrei.chnotchy.com/hi/components/color-input/), [Combobox](https://tanrei.chnotchy.com/hi/components/combobox/), [Combobox field](https://tanrei.chnotchy.com/hi/components/combobox-field/), [Number field](https://tanrei.chnotchy.com/hi/components/number-field/), [Number input](https://tanrei.chnotchy.com/hi/components/number-input/), [Select](https://tanrei.chnotchy.com/hi/components/select/), [Select field](https://tanrei.chnotchy.com/hi/components/select-field/), [Text field](https://tanrei.chnotchy.com/hi/components/text-field/), [Text input](https://tanrei.chnotchy.com/hi/components/text-input/)
- **वे वेरिएंट मान जो यह छोड़ देता है**: `filled`: [Navigation bar](https://tanrei.chnotchy.com/hi/components/navigation-bar/)

इससे जनरेट किया गया: `tokens/systems/cupertino.system.json`, `tokens/generated/cupertino/components.json`

## किसी प्रीसेट का एक कंपोनेंट अपने सिस्टम में लें

जो कंपोनेंट किसी प्रीसेट में है पर डिफ़ॉल्ट सिस्टम में नहीं — `m3-like` का FAB मेन्यू, या सेगमेंटेड बटन — वह डिफ़ॉल्ट सिस्टम पर बने प्रोडक्ट की पहुँच से बाहर नहीं है। `tanrei` को आगे बढ़ाने वाली एक लेयर लिखें, उसमें कंपोनेंट शामिल करें, और उसका अपना मॉड्यूल इम्पोर्ट करें। तब कंपोनेंट आपके सिस्टम के टोकन से बनता है: उसके टोकन आपके सिस्टम के टोकन की ओर इशारा करते हैं, इसलिए इस तरह लिया गया FAB मेन्यू आपके प्रोडक्ट के बाकी हिस्से जैसा दिखता है, और प्रीसेट का कोई मान साथ नहीं आता।

1. कंपोनेंट को अपनी लेयर (`design/acme.system.json`; [आपका अपना डिज़ाइन सिस्टम](https://tanrei.chnotchy.com/hi/getting-started/your-design-system/) देखें) में शामिल करें। जो कंपोनेंट किसी प्रीसेट की लेयर में रहता है, वह उस लेयर का नाम देता है (`from`); जिसे डिफ़ॉल्ट सिस्टम छोड़ देता है, उसका सिर्फ़ नाम लिखा जाता है।

   ```json
   {
     "id": "acme",
     "extends": "tanrei",
     "components": {
       "include": [{ "name": "fab-menu", "from": "m3-like" }, "segmented-button"]
     }
   }
   ```

2. बिल्ड करें। `npx tanrei build` आपके सिस्टम की स्टाइलशीट लिखता है, जिसमें शामिल किए गए कंपोनेंट के टोकन आपके मानों से तय होते हैं, और आपका कंपोनेंट मैनिफ़ेस्ट, जिसमें वे सूचीबद्ध होते हैं।

3. अपनी स्टाइलशीट लोड करें, अपना एट्रिब्यूट लगाएँ, और डिफ़ॉल्ट सिस्टम के कंपोनेंट और जो आपने लिए वे रजिस्टर करें।

   ```js
   import '@tanrei/web/tokens.css';
   import './styles/acme.css';
   import '@tanrei/web';
   import '@tanrei/web/components/fab-menu';
   import '@tanrei/web/components/segmented-button';
   ```

   ```html
   <html data-tanrei-system="acme">
   ```

जिस सिस्टम में कोई कंपोनेंट नहीं है, उसके तहत इस्तेमाल करने पर भी वह बनता है, और डेवलपमेंट बिल्ड के कंसोल में यह बताता है। हर कंपोनेंट का पेज बताता है कि कौन-से सिस्टम में वह है, और बाकी उसकी जगह क्या इस्तेमाल करते हैं।