SkillAgentSearch skills...

Core

SVAR Core library is a collection of essential UI components written with Svelte.

Install / Use

/learn @svar-widgets/Core

README

<div align="center">

SVAR Svelte Core | UI Library

</div> <div align="center">

:globe_with_meridians: Website • :bulb: Getting Started • :eyes: Demos

</div> <div align="center">

npm License npm downloads

</div>

SVAR Svelte Core library offers 30+ lightweight, fast-performing Svelte UI components with TypeScript support. Beautifully designed light and dark themes are included and fully customizable via CSS variables. A straightforward API and comprehensive documentation make it easy to start building feature-rich Svelte interfaces quickly.

<div align="center"> <img src="https://svar.dev/images/github/github-core.png" alt="SVAR Core - Svelte UI Library" style="width: 752px;"> </div> </br> 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 - helps you create basic menu bar, actions or context menu;
  • Toolbar - allows you to create button and icon panels with configurable layouts;
  • Tasklist - task list component to add, edit, check or delete tasks;
  • Comments - nice-looking comments section;
  • File uploader - simple file uploader component.

:hammer_and_wrench: How to Use

To start using components from the Core package, 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?

Post an Issue or use our community forum.

View on GitHub
GitHub Stars253
CategoryDevelopment
Updated5d ago
Forks7

Languages

Svelte

Security Score

100/100

Audited on Mar 30, 2026

No findings