Usage

Once you installed svelteway, you can:

1.

npm run dev -- --open

You can now use the visual editor to add & customise components into your pages.

2.

This button

Opens the component selector

Alert

Alert informs Users About Important Events.

Artboard

Artboard provides fixed size container to display a demo content on mobile size.

Avatar

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Badge

Badges are used to inform the user of the status of specific data.

Bottom Navigation

Bottom navigation bar allows navigation between primary screens.

Breadcrumbs

Breadcrumbs helps users to navigate through the website.

Button Group

Button group shows buttons next to each other.

Button

Buttons allow the user to take actions or make choices.

Card

Cards are used to group and display content in a way that is easily readable.

Carousel

Carousel show images or content in a scrollable area.

Chat

Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc.

Checkbox

Checkboxes are used to select or deselect a value.

Collapse

Collapse is used for showing and hiding content.

Countdown

Countdown gives you a transition effect of changing numbers.

Divider

Divider will be used to separate content vertically or horizontally.

Drawer

Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.

Dropdown

Dropdown can open a menu or any other element when the button is clicked.

File Input

File Input is a an input field for uploading files.

Footer

Footer can contain logo, copyright notice, and links to other pages.

Hero

Hero is a component for displaying a large box or image with a title and description.

Indicator

Indicators are used to place an element on the corner of another element.

Input Group

Input group puts an input next to a text or a button.

Text Input

Text Input is a simple input field.

Kbd

Kbd is used to display keyboard shortcuts.

Link

Link adds the missing underline style to links.

Mask

Mask crops the content of the element to common shapes.

Menu

Menu is used to display a list of links vertically or horizontally.

Code Mockup

Code mockup is used to show a block of code in a box that looks like a code editor.

Phone Mockup

Phone mockup shows a mockup of an iPhone.

Window Mockup

Window mockup shows a box that looks like an operating system window.

Modal

Modal is used to show a dialog or a box when you click a button.

Navbar

Navbar is used to show a navigation bar on the top of the page.

Pagination

Pagination is a group of buttons that allow the user to navigate between a set of related content.

Progress

Progress bar can be used to show the progress of a task or to show the passing of time.

Radial Progress

Radial progress can be used to show the progress of a task or to show the passing of time.

Radio

Radio buttons allow the user to select one option from a set.

Range Slider

Range slider is used to select a value by sliding a handle.

Rating

Rating is a set of radio buttons that allow the user to rate something.

Select

Select is used to pick a value from a list of options.

Stack

Stack visually puts elements on top of each other.

Stat

Stat is used to show numbers and data in a box.

Steps

Steps can be used to show a list of steps in a process.

Swap

Swap allows you to toggle the visibility of two elements using a checkbox or a class name.

Tab

Swap allows you to toggle the visibility of two elements using a checkbox or a class name.

Table

Table can be used to show a list of data in a table format.

Textarea

Textarea allows users to enter text in multiple lines.

Toast

Toast is a wrapper to stack elements, positioned on the corner of page.

Toggle

Toggle is a checkbox that is styled to look like a switch button.

Tooltip

Tooltip can be used to show a message when hovering over an element.

3.

4.

5.

6. Finally when you're done editing your page's UI

To save your changes.