UX content library

I have created some components you can add to you TinyUX wire-frames, by copy pasting the source code.

You can also directly import them from inside the app like this:


Account login
9x4

preview
// Login
,,,"Email"/align_right/font_handwriting,input_line/split_surface_left,input_line,input_line,input_line,input_line
,,,"Password"/align_right/font_handwriting,input_line/split_surface_left,input_line,input_line,input_line,input_line
,,,,button_circle/"Login"/font_handwriting/split_surface_left,button_circle,button_circle,,
,,,,#link/"Forgot password?"/font_size_small/font_handwriting,,,,

Account login mobile
6x4

preview
// Login mobile
input_line/#gray/"Email"/font_handwriting,input_line,input_line,input_line,input_line,input_line
input_line/#gray/"Password"/font_handwriting,input_line,input_line,input_line,input_line,input_line
button_circle/"Login"/font_handwriting,button_circle,button_circle,button_circle,button_circle,button_circle
#link/"Forgot password?"/font_size_small/font_handwriting,,,,,

Account signup
9x7

preview
// Signup
,,,"Name"/align_right/font_handwriting,input_line/split_surface_left,input_line,input_line,input_line,input_line
,,,"Email"/align_right/font_handwriting,input_line/split_surface_left,input_line,input_line,input_line,input_line
,,,"Password"/align_right/font_handwriting,input_line/split_surface_left,input_line,input_line,input_line,input_line
,,,"Confirm password"/align_right/font_size_small/font_handwriting,input_line/split_surface_left,input_line,input_line,input_line,input_line
,,,,checkbox,text,text_link,text,text
,,,,,,,,
,,,,button_circle/"Create account"/font_handwriting/split_surface_left,button_circle,button_circle,button_circle,button_circle

Account signup mobile
6x6

preview
// Signup mobile
input_line/#gray/"Name"/font_handwriting,input_line,input_line,input_line,input_line,input_line
input_line/#gray/"Email"/font_handwriting,input_line,input_line,input_line,input_line,input_line
input_line/#gray/"Password"/font_handwriting,input_line,input_line,input_line,input_line,input_line
input_line/#gray/"Re-type password"/font_handwriting,input_line,input_line,input_line,input_line,input_line
checkbox,text,text_link,text,text,
button_circle/"Create account"/font_handwriting,button_circle,button_circle,button_circle,button_circle,button_circle

Button with arrow
3x1

preview
// Button with arrow
button,button,button/arrow_right

Carousel 3 images
8x3

preview
// Carousel 3 images
,img/##light link/split_surface_left,img/##light link,img/##light link,img/##light link/split_surface_left,img/##light link,img/##light link,img/##light link/split_surface_left,img/##light link,img/##light link/split_surface_right,
icon_chevron_left,img/##light link/split_surface_left,img/##light link,img/##light link/split_surface_right,img/##light link/split_surface_left,img/##light link,img/##light link/split_surface_right,img/##light link/split_surface_left,img/##light link,img/##light link/split_surface_right,icon_chevron_right
,img/##light link/split_surface_left,img/##light link,img/##light link/split_surface_right,img/##light link/split_surface_left,img/##light link,img/##light link/split_surface_right,img/##light link/split_surface_left,img/##light link,img/##light link/split_surface_right,

Carousel 3 videos
8x3

preview
// Carousel 3 videos
,video/##light link/split_surface_left,video/##light link,video/##light link,video/##light link/split_surface_left,video/##light link,video/##light link,video/##light link/split_surface_left,video/##light link,video/##light link/split_surface_right,
icon_chevron_left,video/##light link/split_surface_left,video/##light link,video/##light link/split_surface_right,video/##light link/split_surface_left,video/##light link,video/##light link/split_surface_right,video/##light link/split_surface_left,video/##light link,video/##light link/split_surface_right,icon_chevron_right
,video/##light link/split_surface_left,video/##light link,video/##light link/split_surface_right,video/##light link/split_surface_left,video/##light link,video/##light link/split_surface_right,video/##light link/split_surface_left,video/##light link,video/##light link/split_surface_right,

Carousel cover flow large
13x7

preview
// Carousel cover flow large
,,,img,img,img,img,img,img,img,,,
,,rectangle/split_surface_top/split_surface_left/split_surface_right,img,img,img,img,img,img,img,rectangle/split_surface_top/split_surface_left/split_surface_right,,
,rectangle/split_surface_top,rectangle/split_surface_left/split_surface_right,img,img,img,img,img,img,img,rectangle/split_surface_left/split_surface_right,rectangle/split_surface_top,
icon_chevron_left,rectangle,rectangle/split_surface_left/split_surface_right,img,img,img,img,img,img,img,rectangle/split_surface_left/split_surface_right,rectangle,icon_chevron_right
,rectangle/split_surface_bottom,rectangle/split_surface_left/split_surface_right,img,img,img,img,img,img,img,rectangle/split_surface_left/split_surface_right,rectangle,
,,rectangle/split_surface_bottom/split_surface_left/split_surface_right,img,img,img,img,img,img,img,rectangle/split_surface_bottom/split_surface_left/split_surface_right,,
,,,img,img,img,img,img,img,img,,,

Carousel image mobile
5x3

preview
// Carousel image mobile
,img/##light link,img/##light link,img/##light link,img/##light link,
icon_chevron_left,img/##light link,img/##light link,img/##light link,img/##light link,icon_chevron_right
,img/##light link,img/##light link,img/##light link,img/##light link,

Carousel video mobile
5x3

preview
// Carousel video mobile
,video/##light link,video/##light link,video/##light link,video/##light link,
icon_chevron_left,video/##light link,video/##light link,video/##light link,video/##light link,icon_chevron_right
,video/##light link,video/##light link,video/##light link,video/##light link,

Mobile screen
8x12

preview
// Mobile screen
##dark gray,##dark gray,##dark gray,##dark gray,##dark gray,##dark gray,##dark gray,##dark gray
##dark gray,icon_hamburger/##light gray,##light gray,##light gray,##light gray,##light gray,icon_search/##light gray,##dark gray
##dark gray,,,,,,,##dark gray
##dark gray,,,,,,,##dark gray
##dark gray,,,,,,,##dark gray
##dark gray,,,,,,,##dark gray
##dark gray,,,,,,,##dark gray
##dark gray,,,,,,,##dark gray
##dark gray,,,,,,,##dark gray
##dark gray,,,,,,,##dark gray
##dark gray,,,,,,,##dark gray
##dark gray,##dark gray,##dark gray,##dark gray,##dark gray,##dark gray,##dark gray,##dark gray

Modal
7x6

preview
// Modal
img/##light gray card,text/##light gray card,text/##light gray card,##light gray card,##light gray card,##light gray card,icon_cross/##light gray card
##bright card,##bright card,##bright card,##bright card,##bright card,##bright card,##bright card
##bright card,text_lines/##bright card,text_lines/##bright card,text_lines/##bright card,text_lines/##bright card,##bright card,##bright card
##bright card,text_lines/##bright card,text_lines/##bright card,text_lines/##bright card,text_lines/##bright card,text_lines/##bright card,##bright card
##bright card,text/button_circle/##bright card,text/button_circle/##bright card,icon_check/button_circle/#success/##bright card/split_surface_left,text/button_circle/#success/##bright card,##bright card,##bright card
##bright card,##bright card,##bright card,##bright card,##bright card,##bright card,##bright card

Pagination
5x1

preview
// Pagination
icon_chevron_left/button_circle,text/button_circle/split_surface_left,text/button_circle/split_surface_left,text/button_circle/split_surface_left,icon_chevron_right/button_circle/split_surface_left

Pagination 2
7x1

preview
// Pagination 2
icon_to_start/button_circle/split_surface_right,icon_chevron_left/button_circle,text/button_circle/split_surface_left,text/button_circle/split_surface_left,text/button_circle/split_surface_left,icon_chevron_right/button_circle/split_surface_left,icon_to_end/button_circle/split_surface_left

Pagination dots
5x1

preview
// Pagination dots
icon_dot,radio,radio,radio,radio

Pagination wide
7x1

preview
// Pagination wide
icon_chevron_left/button_circle,nr_1/button_circle/split_surface_left,icon_dots_horizontal,nr_6/button_circle,nr_7/button_circle/split_surface_left/split_surface_right,nr_8/button_circle,icon_dots_horizontal,nr_50/button_circle,icon_chevron_right/button_circle/split_surface_left

Simple search field
3x1

preview
// Simple search field
input,input,input/search