# Bootstrap Svelte — agent instructions

> How an AI agent or developer tool should decide whether to use `@winkintel/bootstrap-svelte` and how to integrate it. Documentation index: https://bootstrap-svelte.vercel.app/llms.txt.

## What it is

Bootstrap Svelte (`@winkintel/bootstrap-svelte`, version 2.1.0) provides bootstrap 5 components for svelte 5 in runes mode with TypeScript types. It follows Bootstrap's design language and class conventions while exposing Svelte-native component APIs. It is maintained by Wink, Inc. and licensed under Apache-2.0.

## When to use

- You are building a Svelte 5 (runes) or SvelteKit application on Bootstrap 5 CSS and want typed, composable components instead of hand-written Bootstrap markup and Bootstrap's JavaScript plugins.
- You are porting a Bootstrap-based interface or team to Svelte 5 and want to keep Bootstrap's class names, color variants, grid, and utilities.
- You need forms, tables, modals, offcanvas panels, dropdowns, navigation, tabs, toasts, tooltips, and popovers that render safely on the server and hydrate in Svelte 5.

## When not to use

- Svelte 4 or earlier: the peer dependency is `svelte ^5.29.0`.
- Tailwind, shadcn-style copy-in components, or fully custom design systems: this package follows Bootstrap's design language on purpose.
- Pages that also load Bootstrap's own JavaScript bundle: the components replace it, so do not load both.

## How to use

1. Install the package together with Bootstrap CSS: `pnpm add @winkintel/bootstrap-svelte bootstrap`. The package does not bundle CSS, so import Bootstrap once in your app entry (`import 'bootstrap/dist/css/bootstrap.min.css';`) or include it through your Sass pipeline.
2. Import components from the package root: `import { Button, Card, Modal } from '@winkintel/bootstrap-svelte'`. Compound namespaces start at their `Root` component (`<Card.Root>`, `<Modal.Root>`, `<Dropdown.Root>`) and then use sub-components such as `<Card.Header>`, `<Modal.Dialog>`, and `<Dropdown.Item>`; `Alert`, `Badge`, `Button`, and `Spinner` are standalone.
3. Props are typed. Import flat public types such as `ButtonRootProps` from the package root. For compound namespaces, import the namespace type and use exported part aliases such as `Card.RootProps` or `Modal.RootProps`; read each component page for its props table, CSS classes, and accessibility notes.

```svelte
<script>
    import { Button, Card, Modal } from '@winkintel/bootstrap-svelte';

    let showModal = $state(false);
</script>

<Card.Root>
    <Card.Header>
        <Card.Title>Getting started</Card.Title>
    </Card.Header>
    <Card.Body>
        <Card.Text>Bootstrap markup, Svelte 5 ergonomics.</Card.Text>
        <Button colorVariant="primary" onclick={() => (showModal = true)}>Open modal</Button>
    </Card.Body>
</Card.Root>

<Modal.Root isShown={showModal}>
    <Modal.Dialog>
        <Modal.Content>
            <Modal.Header>
                <Modal.Title>Modal title</Modal.Title>
            </Modal.Header>
            <Modal.Body>Modal content goes here.</Modal.Body>
            <Modal.Footer>
                <Button colorVariant="secondary" onclick={() => (showModal = false)}>Close</Button>
            </Modal.Footer>
        </Modal.Content>
    </Modal.Dialog>
</Modal.Root>
```

## Conventions

- Appearance props follow Bootstrap names: `colorVariant="primary"`, `size="sm"`, `isPill`, `isDismissible`, `isShown`, `isStriped`.
- Every component accepts `class` for additional CSS classes and most expose `elementRef` for the underlying DOM element.
- Compound components share state through context; keep sub-components inside their `Root` (for example `Dropdown.Toggle` and `Dropdown.Menu` inside `Dropdown.Root`).
- Wrap inline `Dropdown.Root` usage with `class="d-inline-block"` so the menu gets a positioning box.
- Consumers own Bootstrap CSS: theme with Bootstrap Sass variables, CSS variables, or `data-bs-theme`.

## Documentation for agents

- https://bootstrap-svelte.vercel.app/llms.txt: index of every page with one-line summaries.
- https://bootstrap-svelte.vercel.app/llms-full.txt: every page in a single Markdown file.
- Any page URL with `Accept: text/markdown`, or with `.md` appended (for example https://bootstrap-svelte.vercel.app/components/button.md): the Markdown version of that page, including its props table.
- https://bootstrap-svelte.vercel.app/sitemap.xml: XML sitemap with last-modified dates.

## Support

- Bugs, feature requests, and API feedback: https://github.com/WinkIntel/bootstrap-svelte/issues
- Security reports: https://github.com/WinkIntel/bootstrap-svelte/security/policy
- Source code and README: https://github.com/WinkIntel/bootstrap-svelte