Components

In this section, we'll look at the components that you can import and use when working with the default layout.

Social Link

import { SocialLink } from '@svelteness/kit-docs'

<SocialLink type="discord" href="#" />
<SocialLink type="twitter" href="#" />
<SocialLink type="gitHub" href="#" />

Tabbed Links

import { TabbedLinks } from '@svelteness/kit-docs'

<TabbedLinks
	links={[
		{ title: 'First Tab', href: '/first-tab-link' },
		{ title: 'Second Tab', href: '/second-tab-link' },
	]}
/>

Button

import { Button } from '@svelteness/kit-docs'

Default

<Button>Action</Button>

Link

<Button href="#">Action</Button>

Raised

<Button primary type="raised">Action</Button>
<Button type="raised">Action</Button>

Arrow

<Button arrow="left">Previous</Button>
<Button arrow="right">Next</Button>

<script>
	import { Select } from '@svelteness/kit-docs'

	let options = ['Option A', 'Option B', 'Option C']
	let value = options[0]
</script>

<Select title="Title" {options} bind:value />