Custom Component

import Expandable from "@components/Expandable";
 
<Expandable title="properties">
	<Param name="variable_name" type="query" required>
		Param description.
	</Param>
	<Param name="variable_name_3" type="body" optional={true}>
		Param description.
	</Param>
</Expandable>

import Expandable from "@components/Expandable";
 
<Expandable title="properties" defaultOpen={true}>
	<Param name="variable_name" type="query" required>
		Param description.
	</Param>
	<Param name="variable_name_3" type="body" optional={true}>
		Param description.
	</Param>
</Expandable>

import Param from "@components/Param";
 
<Param name="title" type="string" required={true} nameClasses="text-green-500 dark:text-green-400">Title in the Accordion preview.</Param>
<Param name="description" type="boolean" required={true} optional={true} defaultValue="false" nameClasses="text-sky-500 dark:text-sky-400">Param description.</Param>

import Tooltip from "@components/Tooltip";
 
<Tooltip tip="This is tooltip!">Hover me</Tooltip> and see a tooltip in action
 
<Tooltip tip="This is tooltip!"><Badge>😂 Hover me</Badge></Tooltip> hover badge to show tooltip

import { Tree, File, Folder } from '@components/FileTree';
 
<Tree>
  <Folder name="pages" defaultOpen>
    <Folder name="frameworks" defaultOpen>
      <File name="react.mdx" />
    </Folder>
    <Folder name="fruits" defaultOpen>
      <File name="apple.mdx" />
    </Folder>
    <File name="_meta.json" />
    <File name="index.mdx" />
  </Folder>
</Tree>

import { OptionTable } from '@components/OptionTable';
 
<OptionTable options={[
  ['darkMode', 'boolean', 'Show or hide the dark mode toggle button.'],
  ['nextThemes', 'object', <>Configuration for the <a href="https://github.com/pacocoursey/next-themes#themeprovider" target="_blank">next-themes</a> package.</>],
]}/>

import { useState } from "react";
 
export function Counter({ children }) {
	const [count, setCount] = useState(0);
	return (
		<div className="flex items-center gap-2">
			<button className="flex items-center gap-2" onClick={() => setCount(count + 1)}>
				{children}
				{count}
			</button>
			<button onClick={() => setCount(0)}
				className="text-white bg-red-500 hover:bg-red-600 transition-all duration-200 font-medium px-1.5 py-0.5 rounded text-sm"	
			>
				Reset
			</button>
		</div>
	);
}
 
<div className="mt-4 p-4 rounded border dark:border-neutral-800">
	<Counter>
		<span className="text-white bg-blue-500 hover:bg-blue-600 transition-all duration-200 font-medium px-1.5 py-0.5 rounded text-sm">Click Me !</span>{" "}:
	</Counter>
</div>

import { CheckBadgeIcon } from "@heroicons/react/24/outline";
 
<CheckBadgeIcon className="h-6 w-6" />

import { Tab, Tabs } from 'nextra-theme-docs'
 
<Tabs items={["npm", "pnpm", "yarn"]}>
	<Tab>npm</Tab>
	<Tab>pnpm</Tab>
	<Tab>yarn</Tab>
</Tabs>

import { Tab, Tabs } from 'nextra-theme-docs'
 
<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
  ...
</Tabs>

import Accordion from '@components/Accordion'
 
<Accordion
	title="Accordion A"
	body="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."
/>
<Accordion
	title="Accordion B"
	body={
		<div>
			<p>
				Lorem Ipsum is simply dummy text of the printing and typesetting
				industry. Lorem Ipsum has been the industry's standard dummy text ever
				since the 1500s.
			</p>
			<p className="!mt-2">
				Contrary to popular belief, Lorem Ipsum is not simply random text. It
				has roots in a piece of classical Latin literature from 45 BC, making it
				over 2000 years old.
			</p>
		</div>
	}
/>

import Badge from '@components/Badge'
 
<Badge>😂 Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="purple">Purple</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="dark">Dark</Badge>

import BadgeOutline from '@components/BadgeOutline'
 
<BadgeOutline>😂 Default</BadgeOutline>
<BadgeOutline variant="success">Success</BadgeOutline>
<BadgeOutline variant="warning">Warning</BadgeOutline>
<BadgeOutline variant="info">Info</BadgeOutline>
<BadgeOutline variant="purple">Purple</BadgeOutline>
<BadgeOutline variant="danger">Danger</BadgeOutline>
<BadgeOutline variant="dark">Dark</BadgeOutline>

import Hint from "@components/Hint";
 
<Hint className="mb-4">
	**Info**\
	info
</Hint>
 
<Hint.success className="mb-4">
	**Success** success
</Hint.success>
 
<Hint.warning className="mb-4">
	**Warning** warning
</Hint.warning>
 
<Hint.danger className="mb-4">
	**Danger** danger
</Hint.danger>

import Alert from '@components/Alert'
 
<Alert>😂 Default</Alert>
<Alert variant="success"><span className="font-semibold">Success !</span> Success message</Alert>
<Alert variant="warning"><span className="font-bold">Warning !</span> Warning message</Alert>
<Alert variant="info">Info</Alert>
<Alert variant="purple">Purple</Alert>
<Alert variant="danger">Danger</Alert>
<Alert variant="dark">Dark</Alert>

import AlertOutline from '@components/AlertOutline'
 
<AlertOutline>😂 Default</AlertOutline>
<AlertOutline variant="success"><span className="font-semibold">Success !</span> Success message</AlertOutline>
<AlertOutline variant="warning"><span className="font-bold">Warning !</span> Warning message</AlertOutline>
<AlertOutline variant="info">Info</AlertOutline>
<AlertOutline variant="purple">Purple</AlertOutline>
<AlertOutline variant="danger">Danger</AlertOutline>
<AlertOutline variant="dark">Dark</AlertOutline>

<div className="p-4 border border-gray-200 dark:border-neutral-800 rounded mt-6">
	Stars on GitHub!
</div>

import { Callout } from 'nextra-theme-docs';
 
<Callout emoji="⚡">
	**Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
	Nishikado.
</Callout>;

import { Callout } from 'nextra-theme-docs';
 
<Callout type="info" emoji="☑️">
	**Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
	Nishikado.
</Callout>;

import { Callout } from 'nextra-theme-docs';
 
<Callout type="warning" emoji="⚠️">
	This API will be deprecated soon.
</Callout>;

import { Callout } from 'nextra-theme-docs';
 
<Callout type="error" emoji="️⛔">
	This is a dangerous feature that can cause everything to explode.
</Callout>;

import { Callout } from 'nextra-theme-docs';
 
<div className="p-4 border border-gray-200 dark:border-gray-900 rounded mt-6">
	**Markdown With React Components**
	<Callout emoji="✅">
		**MDX** (the library), at its core, transforms MDX (the syntax) to JSX. It
		receives an MDX string and outputs a _JSX string_. It does this by parsing
		the MDX document to a syntax tree and then generates a JSX document from
		that tree.
	</Callout>
</div>;

import Bleed from "@components/Bleed";
 
<Bleed>
	<div style={{ border: "1px solid #888", padding: "4rem 2.5rem", textAlign: "center"}}>
		_There is nothing to writing. All you do is sit down at a typewriter and **bleed**._ 
		
		— Ernest Hemingway
 
	</div>
</Bleed>;

import Bleed from "@components/Bleed";
 
<Bleed>Hey, I can use **Markdown** syntax here.</Bleed>
 
<Bleed>![Landscape](https://images.unsplash.com/photo-1644840379571-2a973eee0726?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80)</Bleed>