svelte-uikit-components

Demo and Documentation

Demo

UIkit Component Coverage

Coverage is compared against the 81 components in the current UIkit documentation.

• ✅ Implemented and documented: 23
• ⚠️ Implemented without a showcase page: 1 (Table)
• ❌ Not implemented: 57
• Overall wrapper coverage: 24 / 81 (29.6%)

ButtonGroup is included in the Button row because UIkit documents it as a Button variation rather than a separate component. Tooltip is exposed as a Svelte action instead of a component.

| UIkit component | Svelte export | Showcase | Status | | --- | --- | --- | :---: | | Accordion | Accordion, AccordionItem | Demo | ✅ | | Alert | Alert | Demo | ✅ | | Align | — | — | ❌ | | Animation | — | — | ❌ | | Article | Article, ArticleTitle, ArticleMeta | Demo | ✅ | | Background | — | — | ❌ | | Badge | Badge | Demo | ✅ | | Base | — | — | ❌ | | Breadcrumb | Breadcrumb, BreadcrumbItem | Demo | ✅ | | Button | Button, ButtonGroup | Button, Button Group | ✅ | | Card | Card, CardMedia, CardHeader, CardContent, CardFooter | Demo | ✅ | | Close | — | — | ❌ | | Column | — | — | ❌ | | Comment | Comment, CommentAvatar, CommentBody, CommentHeader, CommentMetaList, CommentTitle | Demo | ✅ | | Container | — | — | ❌ | | Countdown | Countdown | Demo | ✅ | | Cover | — | — | ❌ | | Description List | DescriptionList, DescriptionListTitle, DescriptionListData | Demo | ✅ | | Divider | — | — | ❌ | | Dotnav | — | — | ❌ | | Drop | — | — | ❌ | | Dropbar | — | — | ❌ | | Dropdown | DropDown | Demo | ✅ | | Dropnav | — | — | ❌ | | Filter | — | — | ❌ | | Flex | — | — | ❌ | | Form | — | — | ❌ | | Grid | — | — | ❌ | | Heading | Heading | Demo | ✅ | | Height | — | — | ❌ | | Icon | — | — | ❌ | | Iconnav | — | — | ❌ | | Image | — | — | ❌ | | Inverse | — | — | ❌ | | Label | Label | Demo | ✅ | | Leader | — | — | ❌ | | Lightbox | — | — | ❌ | | Link | — | — | ❌ | | List | — | — | ❌ | | Margin | — | — | ❌ | | Marker | — | — | ❌ | | Modal | — | — | ❌ | | Nav | Nav, NavItem | Demo | ✅ | | Navbar | — | — | ❌ | | Notification | — | — | ❌ | | Off-canvas | OffCanvas | Demo | ✅ | | Overlay | — | — | ❌ | | Padding | — | — | ❌ | | Pagination | — | — | ❌ | | Parallax | — | — | ❌ | | Placeholder | — | — | ❌ | | Position | — | — | ❌ | | Print | — | — | ❌ | | Progress | Progress | Demo | ✅ | | Scroll | — | — | ❌ | | Scrollspy | — | — | ❌ | | Search | — | — | ❌ | | Section | Section | Demo | ✅ | | Slidenav | — | — | ❌ | | Slider | — | — | ❌ | | Slideshow | — | — | ❌ | | Sortable | — | — | ❌ | | Spinner | Spinner | Demo | ✅ | | Sticky | — | — | ❌ | | Subnav | — | — | ❌ | | SVG | — | — | ❌ | | Switcher | — | — | ❌ | | Tab | Tab, TabContent, Tabset | Demo | ✅ | | Table | Table | — | ⚠️ | | Text | Text | Demo | ✅ | | Thumbnav | — | — | ❌ | | Tile | — | — | ❌ | | Toggle | Toggle, ToggleAnimation, ToggleMedia, ToggleMode | Demo | ✅ | | Tooltip | tooltip action, TooltipOptions | Demo | ✅ | | Totop | Totop | Demo | ✅ | | Transition | — | — | ❌ | | Upload | — | — | ❌ | | Utility | — | — | ❌ | | Video | — | — | ❌ | | Visibility | — | — | ❌ | | Width | — | — | ❌ |

Installation

npm i svelte-uikit-components

Setup

Now you only need to import uikit.css inside your global css file

@import "../../node_modules/uikit/dist/css/uikit.min.css";

Support

| Version | Svelte Version | UiKit Version | | -------------- | -------------- | ------------- | | 0.22.0 | ^5.38.0 | ^3.25.13 | | 0.20.0 | 5.38.0 | 3.23.11 | | 0.19.0 | 4.2.14 | 3.23.0 | | 0.18.0 | 4.2.14 | 3.21.13 | | 0.17.1 | 4.2.14 | 3.19.4 | | 0.16.0 | 4.2.3 | 3.17.8 | | 0.8.0 - 0.15.0 | 4.0.1 | 3.16.15 | | 0.7.0 | 3.54.0 | 3.16.15 |

Example Usages

Button

<script>
	import { Button } from "svelte-uikit-components";
</script>

<Button label="Click Me" style="danger">