@juspay/svelte-ui-components NPM

Svelte UI Components

This library provides a collection of reusable UI components built with Svelte.

Installation

This library is publish on npm & can be installed via any npm client. Use the following command to install the library.

npm install @juspay/svelte-ui-components

Usage

The library contains a collection of components that can be imported & used in your svelte project.

Available components

Accordion
Badge
Banner
Brand Loader (aka Splash Screen )
Button
Carousel
Checkbox / Checklist Item
Icon
Input
Input with attached Button
List Item
Loader
Modal
Select
Status Screen
Table
Toggle
Toolbar

All of the components can be easily imported from the 'svelte-ui-components' package.

Example: Importing component from the package

<script lang="ts">
  import { Button, defaultButtonProperties } from '@juspay/svelte-ui-components';
</script>

<Button properties={{ ...defaultButtonProperties, text: 'Click' }} />

Customizing the components

Each component comes with a set of configuration options that can be used to customize the component. There are two ways to customize the component.

Using css variables:
- All the components have exposed css variables for all the properties available.
- The css variables can be used to customize the component.
Using props:
- All the components have exposed props for dynamic values/variables.
- The props can be used to customize the component.

Example: Customizing the component

<script lang="ts">
  import {
    Button,
    type ButtonProperties,
    defaultButtonProperties
  } from '@juspay/svelte-ui-components';

  const buttonProperties: ButtonProperties = {
    ...defaultButtonProperties,
    text: 'Submit'
  };

  function handleSubmitClick() {
    // handle click
  }
</script>

<div class="form">
  <Button properties={buttonProperties} on:click={handleSubmitClick} />
</div>

<style>
  .form {
    --button-color: black;
    --button-text-color: white;
    /* Other styling values */
  }
</style>