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 primary type="raised">Action</Button>
<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 Toggle

js
        import { ColorSchemeToggle } from '@svelteness/kit-docs';

      
svelte
        <ColorSchemeToggle />

      
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>