Core
SVAR Core library is a collection of essential UI components written with Svelte.
Install / Use
/learn @svar-widgets/CoreREADME
SVAR Svelte Core | UI Library
</div> <div align="center">:globe_with_meridians: Website • :bulb: Getting Started • :eyes: Demos
</div> <div align="center"> </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:
- Run
yarnto install dependencies. Note that this project is a monorepo usingyarnworkspaces, so npm will not work - Start the project in development mode with
yarn start
:white_check_mark: Run Tests
To run the test:
- Start the test examples with:
yarn start:tests - 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.
