Components

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

Card

js 
        import { Card, CardGroup } from '@svelteness/kit-docs';
import GitHubIcon from '~icons/ri/github-fill';
import RocketIcon from '~icons/ri/rocket-fill';
svelte 
        <CardGroup cols={2}>
  <Card
    title="GitHub"
    description="Check out the kit-docs GitHub repo."
    href="https://github.com/svelteness/kit-docs"
  >
    <GitHubIcon slot="icon" />
  </Card>
  <Card 
    title="Deploying" 
    description="Learn how to deploy kit-docs." 
    href="/docs/production/deploying"
  >
    <RocketIcon slot="icon" />
  </Card>
</CardGroup>

GitHub ->

Check out the kit-docs GitHub repo.

Deploying ->

Learn how to deploy kit-docs.

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>
Next Introduction ->