Skip to content

Commit 930cfd1

Browse files
itsarghyadasitsarghyadas
authored
fix: mdx with usage example (#636)
1 parent c522399 commit 930cfd1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+674
-3
lines changed

‎content/docs/components/android.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,16 @@ npx shadcn@latest add "https://v3.magicui.design/r/android"
4848

4949
<ComponentPreview name="android-demo-3" />
5050

51+
## Usage
52+
53+
```tsx
54+
import { Android } from "@/components/magicui/android";
55+
```
56+
57+
```tsx
58+
<Android />
59+
```
60+
5161
## Props
5262

5363
| Prop | Type | Default | Description |

‎content/docs/components/animated-beam.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,16 @@ npx shadcn@latest add "https://v3.magicui.design/r/animated-beam"
5959

6060
<ComponentPreview name="animated-beam-multiple-outputs" />
6161

62+
## Usage
63+
64+
```tsx
65+
import { AnimatedBeam } from "@/components/magicui/animated-beam.tsx";
66+
```
67+
68+
```tsx
69+
<AnimatedBeam containerRef={containerRef} fromRef={fromRef} toRef={toRef} />
70+
```
71+
6272
## Props
6373

6474
### Animated Beam

‎content/docs/components/animated-circular-progress-bar.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,16 @@ npx shadcn@latest add "https://v3.magicui.design/r/animated-circular-progress-ba
4040

4141
</Tabs>
4242

43+
## Usage
44+
45+
```tsx
46+
import { AnimatedCircularProgressBar } from "@/components/magicui/animated-circular-progress-bar";
47+
```
48+
49+
```tsx
50+
<AnimatedCircularProgressBar />
51+
```
52+
4353
## Props
4454

4555
| Prop | Type | Default | Description |

‎content/docs/components/animated-gradient-text.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,16 @@ module.exports = {
7171

7272
<ComponentPreview name="animated-gradient-text-demo-2" />
7373

74+
### Usage
75+
76+
```tsx
77+
import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
78+
```
79+
80+
```tsx
81+
<AnimatedGradientText>Animated Gradient Text</AnimatedGradientText>
82+
```
83+
7484
## Props
7585

7686
| Prop | Type | Default | Description |

‎content/docs/components/animated-grid-pattern.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,16 @@ npx shadcn@latest add "https://v3.magicui.design/r/animated-grid-pattern"
4040

4141
</Tabs>
4242

43+
## Usage
44+
45+
```tsx
46+
import { AnimatedGridPattern } from "@/components/magicui/animated-grid-pattern";
47+
```
48+
49+
```tsx
50+
<AnimatedGridPattern />
51+
```
52+
4353
## Props
4454

4555
### GridPattern

‎content/docs/components/animated-list.mdx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,20 @@ npx shadcn@latest add "https://v3.magicui.design/r/animated-list"
4040

4141
</Tabs>
4242

43+
## Usage
44+
45+
```tsx
46+
import { AnimatedList } from "@/components/magicui/animated-list";
47+
```
48+
49+
```tsx
50+
<AnimatedList>
51+
<p>Item 1</p>
52+
<p>Item 2</p>
53+
<p>Item 3</p>
54+
</AnimatedList>
55+
```
56+
4357
## Props
4458

4559
### Animated List

‎content/docs/components/animated-shiny-text.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,16 @@ module.exports = {
6868

6969
</Tabs>
7070

71+
## Usage
72+
73+
```tsx
74+
import { AnimatedShinyText } from "@/components/magicui/animated-shiny-text";
75+
```
76+
77+
```tsx
78+
<AnimatedShinyText>Animated Shiny Text</AnimatedShinyText>
79+
```
80+
7181
## Props
7282

7383
| Prop | Type | Default | Description |

‎content/docs/components/animated-subscribe-button.mdx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,19 @@ npx shadcn@latest add "https://v3.magicui.design/r/animated-subscribe-button"
4040

4141
</Tabs>
4242

43+
## Usage
44+
45+
```tsx
46+
import { AnimatedSubscribeButton } from "@/components/magicui/animated-subscribe-button";
47+
```
48+
49+
```tsx
50+
<AnimatedSubscribeButton>
51+
<span>Follow</span>
52+
<span>Subscribed</span>
53+
</AnimatedSubscribeButton>
54+
```
55+
4356
## Props
4457

4558
| Prop | Type | Default | Description |

‎content/docs/components/aurora-text.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,16 @@ module.exports = {
8181

8282
</Tabs>
8383

84+
## Usage
85+
86+
```tsx
87+
import { AuroraText } from "@/components/magicui/aurora-text";
88+
```
89+
90+
```tsx
91+
<AuroraText>Aurora Text</AuroraText>
92+
```
93+
8494
## Props
8595

8696
| Prop | Type | Default | Description |

‎content/docs/components/avatar-circles.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,16 @@ npx shadcn@latest add "https://v3.magicui.design/r/avatar-circles"
4040

4141
</Tabs>
4242

43+
## Usage
44+
45+
```tsx
46+
import { AvatarCircles } from "@/components/magicui/avatar-circles";
47+
```
48+
49+
```tsx
50+
<AvatarCircles numPeople={99} avatarUrls={avatars} />
51+
```
52+
4353
## Props
4454

4555
| Prop | Type | Default | Description |

‎content/docs/components/bento-grid.mdx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,15 @@ npx shadcn@latest add "https://v3.magicui.design/r/bento-grid"
4343
## Examples
4444

4545
<ComponentPreview name="bento-demo-vertical" />
46+
47+
## Usage
48+
49+
```tsx
50+
import { BentoCard, BentoGrid } from "@/components/magicui/bento-grid";
51+
```
52+
53+
```tsx
54+
<BentoGrid>
55+
<BentoCard />
56+
</BentoGrid>
57+
```

‎content/docs/components/blur-fade.mdx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,20 @@ npx shadcn@latest add "https://v3.magicui.design/r/blur-fade"
4444

4545
<ComponentPreview name="blur-fade-text-demo" />
4646

47+
## Usage
48+
49+
```tsx
50+
import { BlurFade } from "@/components/magicui/blur-fade";
51+
```
52+
53+
```tsx
54+
<BlurFade>
55+
<img src="https://picsum.photos/300/200?random=1" alt="Sample 1" />
56+
<img src="https://picsum.photos/300/200?random=2" alt="Sample 2" />
57+
<img src="https://picsum.photos/300/200?random=3" alt="Sample 3" />
58+
</BlurFade>
59+
```
60+
4761
## Props
4862

4963
| Prop | Type | Default | Description |

‎content/docs/components/border-beam.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,14 @@ npx shadcn@latest add "https://v3.magicui.design/r/border-beam"
5555

5656
## Usage
5757

58+
## Usage
59+
5860
```tsx
5961
import { BorderBeam } from "@/components/magicui/border-beam.tsx";
6062
```
6163

6264
```tsx
63-
<div className="relative overflow-hidden">
65+
<div className="relative h-[500px] w-full overflow-hidden">
6466
<BorderBeam />
6567
</div>
6668
```

‎content/docs/components/box-reveal.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,16 @@ npx shadcn@latest add "https://v3.magicui.design/r/box-reveal"
4040

4141
</Tabs>
4242

43+
## Usage
44+
45+
```tsx
46+
import { BoxReveal } from "@/components/magicui/box-reveal";
47+
```
48+
49+
```tsx
50+
<BoxReveal>Box Reveal</BoxReveal>
51+
```
52+
4353
## Props
4454

4555
| Prop | Type | Default | Description |

‎content/docs/components/code-comparison.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,16 @@ npx shadcn@latest add "https://v3.magicui.design/r/code-comparison"
3838

3939
</Tabs>
4040

41+
## Usage
42+
43+
```tsx
44+
import { CodeComparison } from "@/components/magicui/code-comparison";
45+
```
46+
47+
```tsx
48+
<CodeComparison beforeCode={beforeCode} afterCode={afterCode} />
49+
```
50+
4151
## Props
4252

4353
| Prop | Type | Default | Description |

‎content/docs/components/confetti.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,16 @@ npm install canvas-confetti
7676

7777
<ComponentPreview name="confetti-emoji" />
7878

79+
### Usage
80+
81+
```tsx
82+
import { Confetti } from "@/components/magicui/confetti";
83+
```
84+
85+
```tsx
86+
<Confetti />
87+
```
88+
7989
## Props
8090

8191
### Confetti

‎content/docs/components/cool-mode.mdx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,18 @@ npx shadcn@latest add "https://v3.magicui.design/r/cool-mode"
4646

4747
<ComponentPreview name="cool-mode-custom" />
4848

49+
### Usage
50+
51+
```tsx
52+
import { CoolMode } from "@/components/magicui/cool-mode";
53+
```
54+
55+
```tsx
56+
<CoolMode>
57+
<button>Click me</button>
58+
</CoolMode>
59+
```
60+
4961
## Props
5062

5163
| Prop | Type | Default | Description |

‎content/docs/components/dock.mdx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,23 @@ npx shadcn@latest add "https://v3.magicui.design/r/dock"
5151

5252
<ComponentPreview name="dock-demo-3" />
5353

54+
## Usage
55+
56+
```tsx
57+
import { Dock, DockIcon } from "@/components/magicui/dock";
58+
import { Home, Settings, Search } from "lucide-react";
59+
```
60+
61+
```tsx
62+
<Dock>
63+
<DockIcon>
64+
<Home />
65+
<Settings />
66+
<Search />
67+
</DockIcon>
68+
</Dock>
69+
```
70+
5471
## Props
5572

5673
### Dock

‎content/docs/components/dot-pattern.mdx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,18 @@ npx shadcn@latest add "https://v3.magicui.design/r/dot-pattern"
5151

5252
<ComponentPreview name="dot-pattern-with-glow-effect" />
5353

54+
### Usage
55+
56+
```tsx
57+
import { DotPattern } from "@/components/magicui/dot-pattern";
58+
```
59+
60+
```tsx
61+
<div className="relative h-[500px] w-full overflow-hidden">
62+
<DotPattern />
63+
</div>
64+
```
65+
5466
## Props
5567

5668
### Dot Pattern

‎content/docs/components/file-tree.mdx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,23 @@ npx shadcn@latest add "https://v3.magicui.design/r/file-tree"
4040

4141
</Tabs>
4242

43+
## Usage
44+
45+
```tsx
46+
import { File, Folder, Tree } from "@/components/magicui/file-tree";
47+
```
48+
49+
```tsx
50+
<Tree>
51+
<Folder>
52+
<Folder>
53+
<File>layout.tsx</File>
54+
<File>page.tsx</File>
55+
</Folder>
56+
</Folder>
57+
</Tree>
58+
```
59+
4360
## Props
4461

4562
### Tree

‎content/docs/components/flickering-grid.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,16 @@ npx shadcn@latest add "https://v3.magicui.design/r/flickering-grid"
4646

4747
<ComponentPreview name="flickering-grid-rounded-demo" />
4848

49+
### Usage
50+
51+
```tsx
52+
import { FlickeringGrid } from "@/components/magicui/flickering-grid";
53+
```
54+
55+
```tsx
56+
<FlickeringGrid />
57+
```
58+
4959
## Props
5060

5161
| Prop | Type | Default | Description |

0 commit comments

Comments
 (0)