svar-svelte

Name: svar-svelte
Author: svar-widgets

github.com/svar-widgetsDesign & UI269 installsUpdated 25w ago

About svar-svelte

SVAR Svelte is a family of UI component packages for building Svelte interfaces. Its skill routes developers to package-specific component documentation and covers theming and localization.

Key features

01Packages for grids, Gantt charts, menus, and more
02Routes to standalone package documentation
03Guidance for themes and CSS variables
04Instructions for locale configuration

Use cases

01Choose a package for a Svelte interface
02Find component imports and public types
03Set up themes for a component hierarchy
04Extend locale strings and formats

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/svar-widgets/skills --skill svar-svelte

After installing, type/svar-sveltein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

comments/

index.md

core/

avatar.md

button.md

calendar.md

checkbox.md

colorboard.md

colorpicker.md

colorselect.md

combo.md

counter.md

datepicker.md

daterangepicker.md

dropdown.md

field.md

fullscreen.md

globals.md

icon.md

index.md

locale.md

modal.md

modalarea.md

month.md

multicombo.md

pager.md

popup.md

portal.md

radio.md

rangecalendar.md

richselect.md

segmented.md

Details

From the project README

SVAR Svelte ships as a family of @svar-ui/svelte-* packages. This file routes to the per-package entry; each child file is standalone and contains the imports, public types, styling hooks, and recipes for its components.

Open the matching file for the package you are using. If the component you need is not listed in the routing table below, default to core/index.md

Component Routing

File	Package	Components
`core/index.md`	`@svar-ui/svelte-core`	buttons, inputs, selectors, calendars, dropdowns, popups, modals, themes, locale (40+ widgets)
`menu/index.md`	`@svar-ui/svelte-menu`	`Menu`, `MenuBar`, `DropDownMenu`, `ContextMenu`, `ActionMenu`
`toolbar/index.md`	`@svar-ui/svelte-toolbar`	`Toolbar`
`layout/index.md`	`@svar-ui/svelte-layout`	`Layout`, `Cell`, `Panel`
`grid/index.md`	`@svar-ui/svelte-grid`	`Grid`, `HeaderMenu`, `Tooltip`, `ContextMenu`, `Toolbar`
`editor/index.md`	`@svar-ui/svelte-editor`	`Editor`
`filter/index.md`	`@svar-ui/svelte-filter`	`FilterBuilder`, `FilterEditor`, `FilterBar`, `FilterQuery`
`gantt/index.md`	`@svar-ui/svelte-gantt`	`Gantt`, `Toolbar`, `ContextMenu`, `Editor`, `Tooltip`, `HeaderMenu`
`tasklist/index.md`	`@svar-ui/svelte-tasklist`	`Tasklist`
`comments/index.md`	`@svar-ui/svelte-comments`	`Comments`
`filemanager/index.md`	`@svar-ui/svelte-filemanager`	`Filemanager`

Common Techniques

These apply to every @svar-ui/svelte-* package:

themes.md - theme wrappers, CSS variables, the css prop convention, class hooks
locales.md - locale context, bundled language packs, extending words and formats

The widget hierarchy need to be wrapped in a theme component to ensure proper styling Some widgets (grid,gantt,filemanager, etc) exports their own theme components that delegate to core theme and add their own variables

Comments

Markdown supported