Core Markdown Components

We use Github Flavored Markdown. You can find a guide here.

Here are some examples of what you can do with markdown:

# This is a large heading
## This is a medium heading
### This is a small heading
This is a subtitle

Core JSX Components

We also have prebuilt JSX components that we built specifically for onboarding.

<Button variant="primary | secondary | outline">This is a button</Button>
<Tip>This is a tip to the user</Tip>
<Image src="your-image-src"/>
<Tip>This is a tip to the user</Tip>
<Steps/> //steps left in the onboarding
<Grid cols="2"></Grid> // 2 column grid

Overriding styles

You can also override the default styles of the components by using className and passing in Tailwind CSS classes.

<Button className="bg-red-500 text-white">This is a button</Button>

Examples

#Hey there Kishan
This is a sample modal with some markdown content

<Tip>
Try holding shift when changing the formation duration on the timeline. 
</Tip>

<Button>Got it</Button>
# Would you like to schedule a Zoom call with our founder?
Let us know if you're interested in a one-on-one Zoom call with our founder. Your feedback is valuable to us!

<Grid cols="2">
  <Button>Yes, I'm interested</Button>
  <Button variant="secondary">No, thanks</Button>
</Grid>