Components

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

js 
import { SocialLink } from '@svelteness/kit-docs';
svelte 
<SocialLink type="discord" href="#" />
<SocialLink type="twitter" href="#" />
<SocialLink type="gitHub" href="#" />
Discord
Twitter
GitHub
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>
svelte 
<Button href="#">Action</Button>
Action

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 />
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 ->