JazzSvelte

JazzSvelte is an "under contruction" project. The goal is to create a Svelte version of the excellent PrimeReact library (a rich set of open source UI Components). The dom structure generated by JazzSvlete is the same than PrimeReact so JazzSvlete is compliant with PrimeReact themes.

I started this project because I was looking for a motivating project to develop with Svelte. It also happens that I love the prime REACT framework and its wealth of components (Thanks to the entire prime REACT team for the enormous work done on their framework).

Current state

The PrimeReact documentation website is migrated to JazzSvelte using SvelteKit. This website is used to evaluate migrated component (It's also usefull for development). The list of migrated component is :

• Form
  • InputText PrimeReact version
• Button
  • Button PrimeReact version
  • SpeedDial PrimeReact version
  • SplitButton PrimeReact version
• Panel
  • Panel PrimeReact version
• Overlay
  • Tooltip PrimeReact version
• Menu
  • TieredMenu PrimeReact version
• Messages
  • Toast PrimeReact version
• Misc
  • Avatar PrimeReact version
  • Icons
  • Ripple PrimeReact version

A migrated component is a set of content:

• The ts/svelte code of the component
• The documentation migrated
• The test files (Using Vitest) partially done

Download

Jazzsvelte is not yet available from javascript registry. To see the current state, or contribute, you can read the "installation" section

Instalation / Contribute

JazzSvelte code is organised using pnpm workspace (monorepo). So pnpm is required to contribute (see the installation page)

To clone and install project sources and dependencies

git clone https://github.com/jcarbou/jazzsvelte.git
cd jazzsvelte
pnpm i

To run doc / example website :

cd apps/jazzsvelte_doc
pnpm run dev

To run tailwind doc website (Draft) :

cd apps/jazzsvelte_tailwind
pnpm  run dev

Import

Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.

<script>      
      import { Button } from '@jazzsvelte/button';
</script>

<Button label="JazzSvelte" />

Theming

JazzSvelte has two theming has modes; styled or unstyled.

Styled Mode

Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the Themes section for the complete list of available themes to choose from.

Unstyled Mode

Unstyled mode is disabled by default for all components. Using the jazzsvelte context, set unstyled as true to enable it globally. Visit the Unstyled mode documentation for more information and examples.

Contributors