siNpm siGithub

Component library

Patterns, inputs, surfaces, and feedback

A cleaner gallery for reviewing component variants, states, and interaction patterns without the page fighting the components.

// accordion

Layout

Accordion

Default Accordion

This is the first panel.

This is the second panel.

Feedback

Banner

Neumorphism Banner

Glass Banner

Material Banner

Actions

Button

Neumorphism

Glassmorphism

Material

Outlined

Text

Disabled

Pickers

Calendar

Neumorphism · Disabled Sunday

 
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Start: None

End: None

Glassmorphism

 
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Start: None

End: None

Material

 
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Start: None

End: None

Outlined

 
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Start: None

End: None

Surfaces

Card

Neumorphism

Neumorphism Card

Elevation 1

Content

Elevation 2

2 Elevation

Elevation 3

3 Elevation

Elevation 4

4 Elevation

Elevation 5

5 Elevation

Elevation 6

6 Elevation

Media

Carousel

Square

Third Slide

This is the content of the third slide.

First Slide

This is the content of the first slide.

Second Slide

This is the content of the second slide.

Third Slide

This is the content of the third slide.

First Slide

This is the content of the first slide.

Slide 1 of 3

16:9

Third Slide

This is the content of the third slide.

First Slide

This is the content of the first slide.

Second Slide

This is the content of the second slide.

Third Slide

This is the content of the third slide.

First Slide

This is the content of the first slide.

Slide 1 of 3

Inputs

Checkbox

Neumorphism

Outlined

Filled

Disabled

Pickers

Date Picker

Default

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
January
February
March
April
May
June
July
August
September
October
November
December
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029

Overlays

Dialog

Neumorphism Dialog

Inputs

Dropdown

Neumorphism

I am not required.

Neumorphism · Required

I am required.

This field is required.

Material

I am not required.

Material · Required

I am required.

This field is required.

Inputs

File Dropper

Neumorphism

Drag and drop your image files here or .

Material

Drag and drop your image files here or .

Icons

Material Icons

Small

apple

Medium

android

Large

save

Actions

Icon Button

Neumorphism

Glassmorphism

Material

Outlined

Text

Disabled

Inputs

Input

Standard

Outlined

Disabled

Text Area

Layout

Layout Grid

Paper 1
Description for Paper 1
Paper 2
Description for Paper 2
Paper 3
Description for Paper 3
Paper 4
Description for Paper 4
Paper 5
Description for Paper 5
Paper 6
Description for Paper 6
Paper 7
Description for Paper 7
Paper 8
Description for Paper 8
Paper 9
Description for Paper 9
Paper 10
Description for Paper 10
Paper 11
Description for Paper 11
Paper 12
Description for Paper 12

Feedback

Loader

Surfaces

Paper

Neumorphism

Neumorphism Paper
This is a neumorphism styled paper.

Glassmorphism

Glassmorphism Paper
This is a glassmorphism styled paper.

Material

Material Paper
This is a material styled paper.

Inputs

Radio

Neumorphism

Material

Inputs

Slider

Neumorphism

50.00

Material

50.00

Icons

Social Icons

Square

Circle

Small

Medium

Large

Inputs

Switch

Neumorphism

Neumorphism Switch

Material

Material Switch

Inputs

Tag

Neumorphic Tags

Design SvelteKit UI

Material Tags

JavaScript TypeScript React

Pickers

Time Picker

Default

00:0061218Start: 08:30End: 10:30

Overlays

Tooltip

Top

This is a tooltip

Bottom

This is a tooltip

Left

This is a tooltip

Right

Click the button for more info