Skip to content

Get started

Install the library, load its styles, and render a component.

portal-bits is a Svelte 5 component library. Bits UI supplies the interaction. The components ship with their measured styles. svelte and bits-ui stay peers.

Installation

This repository is version 0.5.0. It supports svelte@^5.33.0 and bits-ui@^2.19.3.

The command installs portal-bits together with the svelte and bits-ui peers. A project that already uses Svelte should keep a svelte release inside the supported range, and add bits-ui in its supported range.

The command also installs @lucide/svelte for the icons imported by the copyable examples. Those imports need a direct dependency in your project.

Terminal

npm install portal-bits svelte bits-ui @lucide/svelte

Basic usage

Import a component in a page and render it. Load the styles from the layout.

+page.svelte

<script lang="ts">
  import { Button } from 'portal-bits';
</script>

<Button variant="primary">Save changes</Button>

Styles

Load the styles once, in the root layout. styles.css is the component styling, and it already imports tokens.css. The layout example also imports tokens.css so the token file stays visible. That second import is not a separate requirement.

tokens.css defines color, type, and space. --portal-font names Roobert, then Inter, then a system font. The package ships no font files. This gallery bundles Inter.

+layout.svelte

<script lang="ts">
  import 'portal-bits/styles.css';
  import 'portal-bits/tokens.css';
  import type { Snippet } from 'svelte';

  let { children }: { children: Snippet } = $props();
</script>

{@render children()}

TypeScript

Types ship with the package. NavItem is a navigation item. SelectOption is a select choice. Each component export types its own props.

Next steps