SVAR Svelte Core | UI Library

Website • Getting Started • Demos

SVAR Svelte Core library offers a set of 20+ ready-made Svelte UI components: form controls, popups, date and time picker, selects, notifications, and more. All components are lightweight, responsive, fast-performing, and support TypeScript. The library comes in beautifully designed light and dark themes that are easy to customize.

SVAR Svelte Core library includes the following components:

• buttons & form controls,
• calendar (datepicker),
• popups,
• notifications,
• sliding sidebar,
• tabs, and more.

Additionally, you can use these SVAR Svelte components to build unified app interfaces:

• Menu
• Toolbar
• File uploader
• Comments
• Tasklist

:gear: Svelte 4 and Svelte 5 versions

There are two versions of the library: the 1.x version - designed to work with Svelte 4, and the 2.x version - created for Svelte 5.

To use the SVAR Core for Svelte 5, install it as follows:

npm install @svar-ui/svelte-core

To use the SVAR Core for Svelte 4:

npm install [email protected]

:hammer_and_wrench: How to Use

To use any of the Core components, simply import the package and include the desired component in your Svelte file:

<script>
	import { Button } from "@svar-ui/svelte-core";
</script>

<Button>Click me</Button>

See the getting started guide to quickly set up and begin using SVAR Core components in your Svelte projects.

:computer: How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Run yarn to install dependencies. Note that this project is a monorepo using yarn workspaces, so npm will not work
2. Start the project in development mode with yarn start

:white_check_mark: Run Tests

To run the test:

1. Start the test examples with:

   yarn start:tests

2. In a separate console, run the end-to-end tests with:

   yarn test:cypress

:speech_balloon: Need Help?

Join our community forum to get help or submit feature requests.