Components
In this section, we'll look at the components that you can import and use when working with the default layout.
Social Link
js
import { SocialLink } from '@svelteness/kit-docs';
svelte
<SocialLink type="discord" href="#" />
<SocialLink type="twitter" href="#" />
<SocialLink type="gitHub" href="#" />
Tabbed Links
js
import { TabbedLinks } from '@svelteness/kit-docs';
svelte
<TabbedLinks
links={[
{ title: 'First Tab', href: '/first-tab-link' },
{ title: 'Second Tab', href: '/second-tab-link' },
]}
/>
Button
js
import { Button } from '@svelteness/kit-docs';
Default
svelte
<Button>Action</Button>
Link
svelte
<Button href="#">Action</Button>
Raised
svelte
<Button type="raised">Action</Button>
Arrow
svelte
<Button arrow="left">Previous</Button>
<Button arrow="right">Next</Button>
Select
svelte
<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 />
Chip
js
import { Chip } from '@svelteness/kit-docs';
svelte
<Chip>Title</Chip>
Title
Color Scheme Menu
js
import { ColorSchemeMenu } from '@svelteness/kit-docs';
svelte
<ColorSchemeMenu />
Menu
svelte
<script>
import { Menu, MenuItem } from '@svelteness/kit-docs';
let menuItems = ['Item 1', 'Item 2', 'Item 3'];
let currentMenuItem = menuItems[0];
</script>
<Menu>
<span slot="button">Menu</span>
{#each menuItems as menuItem (menuItem)}
<MenuItem
selected={currentMenuItem === menuItem}
on:select={() => (currentMenuItem = menuItem)}
>
{menuItem}
</MenuItem>
{/each}
</Menu>
Popover
svelte
<script>
import { Popover } from '@svelteness/kit-docs';
</script>
<Popover overlay>
<span slot="button">Popover</span>
Content here.
</Popover>
Next
Introduction
->