@tobeofuse/mdx-ui 0.5.1 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -2
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -1,3 +1,39 @@
|
|
|
1
|
-
#
|
|
1
|
+
# MDX UI
|
|
2
2
|
|
|
3
|
-
This is a
|
|
3
|
+
This is a component library intended to be used in [MDX](https://mdxjs.com/) files. It takes the elements that MDX produces and slots them into place in Shadcn components. It makes it very easy to have basic UI in MDX files. Given input like this:
|
|
4
|
+
|
|
5
|
+
```mdx
|
|
6
|
+
<MdxTabs>
|
|
7
|
+
|
|
8
|
+
# Tab A
|
|
9
|
+
|
|
10
|
+
This tab has content.
|
|
11
|
+
|
|
12
|
+
# Tab B
|
|
13
|
+
|
|
14
|
+
This tab has different content.
|
|
15
|
+
|
|
16
|
+
</MdxTabs>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
You'll get a component like this:
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
[Here](https://tobeofuse.github.io/mdx-ui) is a demo.
|
|
24
|
+
|
|
25
|
+
## How It Works
|
|
26
|
+
|
|
27
|
+
When MDX parses the file, it turns Markdown into React elements that correspond to standard DOM elements like `<p>`, `<h1>` and so on. These elements are passed to any actual components you use in your MDX as children. This library uses `React.Children` to inspect the children that are passed in and slot them into Shadcn components. [Radix UI](https://github.com/radix-ui/primitives/blob/22473d16404bfd446305db5b6c9308aece99fdec/packages/react/slot/src/slot.tsx#L50) uses a similar approach to slots internally, and [here](https://sandroroth.com/blog/react-slots/) is a blog post I found that explains the technique in detail. The only thing that this library does differently than those examples is that it looks for normal elements like `<p>` instead of special slot elements like `<CardHeader>`.
|
|
28
|
+
|
|
29
|
+
## Styles
|
|
30
|
+
|
|
31
|
+
This library does ship with a stylesheet generated by TailwindCSS, meaning that it will add some CSS variables and utility classes to the global CSS namespace. However, it deliberately excludes Tailwind's "Preflight" CSS reset, so it should inherit any global styles that you're using instead of conflicting with them.
|
|
32
|
+
|
|
33
|
+
### Dark Mode
|
|
34
|
+
|
|
35
|
+
These components will switch into dark mode if they have a container element as an ancestor that has a class called `dark`.
|
|
36
|
+
|
|
37
|
+
## Development
|
|
38
|
+
|
|
39
|
+
The main repository is a simple monorepo managed with npm workspaces. It has two packages: the main library package (`packages/mdx-ui`), and the static demo site (`packages/demo`). Run `npm run dev` to build the library in watch mode and run a dev server for the demo site.
|