SM Components

Total components

Overview

These components are based on HTML5 custom elements API. This is an attempt to unify UI development patterns and elements that are used multiple times throughout any general web app.It uses 'sm' namespace for all components. So every component tag starts with 'sm-'

They can replace some older UI elements like <select> <input> <checkbox> <button> But also more modern additions like popups(modals), tabs and many more.

Some of the components have some cool tricks under their sleeves like custom events and variantions. They allow developers to access more information about component or simply react to whatever state change happen to them. We will go more in-depth about all the variantions and customs events related to each event as we go further.

Quick Start

To start using SM Components, Select components you want to download.

Get minified Select all Clear all
Copy source code Download JS file

Buttons

Buttons are used in various basic UI interactions to perform an action.

default primary outlined no-outline disabled 
                    
                        <sm-button>default</sm-button>
                        <sm-button variant="primary">primary</sm-button>
                        <sm-button variant="outlined">outlined</sm-button>
                        <sm-button variant="no-outline">no-outline</sm-button>
                        <sm-button variant="primary" disabled>disabled</sm-button>

Carousel

To start using SM Components

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.

Checkbox

To start using SM Components

Copy

To start using SM Components

File input

To start using SM Components

Form

To start using SM Components

Submit

Input

To start using SM Components

Menu

To start using SM Components

first option second option third option

Notifications

To start using SM Components

Example

push success notification push error notification push pinned notification

Popup / dialog

Popups are used to show addition UI elements that you may want to hide at first and reveal them when needed.

idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
 show popup

Radio

Popups are used to show addition UI elements that you may want to hide at first and reveal them when needed.

Switch

To start using SM Components

Select

<sm-select> is very similar to starndatd HTML5 select and it's markup stucture is also identical.

option1 option2 something option3

Strip select

To start using SM Components

Movie TV series Video Music

Tabs

To start using SM Components

inbox sent draft spam gjdhnsrfijbgn
bdfjnbj jadifjoaijdiajdo dosfighjoi
flkmgklfmzkl
hbdsfhb Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere neque incidunt aut laudantium, quam id, molestiae vero blanditiis nisi alias in magnam autem quasi cumque eveniet qui cupiditate nam corrupti? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis fuga ipsam, explicabo, eius accusamus consectetur ex sunt soluta voluptatem iure totam nulla expedita suscipit minus molestiae similique odio optio quibusdam.

Tags input

To start using SM Components

Textarea

To start using SM Components