I need help to copy all [tailwinduikit] elements

General Rules

  • This Forum Rules:
    1. No asking for course requests or download links.
    2. Don't share links to other websites for downloads or references.
    3. Avoid controversial topics in discussions.

    4. Use an appropriate thread title that matches your content, not just a word.

    Other Forum Rules Can Be Found Here

joony786

Premium User
Premium
TutFlixer
Nov 25, 2020
130
12,850
52
Pakistan
I may need your pro account for debugging. Looks like there is a pagination in the Pro license which doesn't exist in Free license
i was able to get the all folder structure that contain all the main elements
[
"webapp+master_layout+boxed_layout",
"webapp+master_layout+sidebar_layout",
"webapp+layout+card",
"webapp+layout+grid",
"webapp+layout+grid_card",
"webapp+navigation+horizontal_navigation",
"webapp+navigation+header",
"webapp+navigation+pagination",
"webapp+navigation+tab",
"webapp+navigation+vertical_navigation",
"webapp+heading+card_heading",
"webapp+heading+page_heading",
"webapp+table+advance_table",
"webapp+table+list",
"webapp+form+action_panel",
"webapp+form+dropdown",
"webapp+form+form_layout",
"webapp+form+input_group",
"webapp+form+sign_in",
"webapp+form+toggle_checkbox_radio",
"webapp+overlay+modal",
"webapp+overlay+notification",
"webapp+feedback+alert",
"webapp+UI_element+avatar",
"webapp+UI_element+badge",
"webapp+UI_element+button",
"webapp+UI_element+grouped_button",
"webapp+UI_element+popover",
"webapp+UI_element+progress_bar",
"webapp+UI_element+tooltip",
"webapp+calendar+calendar",
"webapp+graph+graph",
"webapp+note+note",
"webapp+master_layout+boxed_layout",
"webapp+master_layout+sidebar_layout",
"webapp+layout+card",
"webapp+layout+grid",
"webapp+layout+grid_card",
"webapp+navigation+horizontal_navigation",
"webapp+navigation+header",
"webapp+navigation+pagination",
"webapp+navigation+tab",
"webapp+navigation+vertical_navigation",
"webapp+heading+card_heading",
"webapp+heading+page_heading",
"webapp+table+advance_table",
"webapp+table+list",
"webapp+form+action_panel",
"webapp+form+dropdown",
"webapp+form+form_layout",
"webapp+form+input_group",
"webapp+form+sign_in",
"webapp+form+toggle_checkbox_radio",
"webapp+overlay+modal",
"webapp+overlay+notification",
"webapp+feedback+alert",
"webapp+UI_element+avatar",
"webapp+UI_element+badge",
"webapp+UI_element+button",
"webapp+UI_element+grouped_button",
"webapp+UI_element+popover",
"webapp+UI_element+progress_bar",
"webapp+UI_element+tooltip",
"webapp+calendar+calendar",
"webapp+graph+graph",
"webapp+note+note"
]
these are the base path and request is send in this order
Please, Log in or Register to view URLs content!
on each request i got 10 elements and some other usefull infos
here is the request of first url


{
"pageNumber": 1,
"totalComponents": 17,
"isLastPage": false,
"totalPages": 2,
"pageSize": 10,
"success": true,
"description": "Box Layouts are designed to give you a headstart with your application layout. Box layouts contain horizontal navigation, page heading and a container to add more components.",
"htmls": [
{
"name": "light_with_Grey_background",
"preview": "
Please, Log in or Register to view URLs content!
",
"preview_sd": "
Please, Log in or Register to view URLs content!
",
"preview_mb": "
Please, Log in or Register to view URLs content!
",
"preview_tb": "
Please, Log in or Register to view URLs content!
",
"preview_dark": "
Please, Log in or Register to view URLs content!
",
"preview_sd_dark": "
Please, Log in or Register to view URLs content!
",
"preview_mb_dark": "
Please, Log in or Register to view URLs content!
",
"preview_tb_dark": "
Please, Log in or Register to view URLs content!
",
"index": -9,
"badges": null,
"maintenance": false,
"darkModeEnabled": false,
"locked": false,


},
{
"name": "dark_with_border_above_page_title",
i removed extra links as it is not allwoing me to post more then 10 links
"index": 4,
"badges": null,
"maintenance": false,
"darkModeEnabled": false,
"locked": false,



},
{
"name": "light_with_white_page_title_grey_bg",

"index": 1,
"badges": null,
"maintenance": false,
"darkModeEnabled": false,
"locked": false,


},
{
"name": "light_with_white_bg",

"index": 11,
"badges": null,
"maintenance": false,
"darkModeEnabled": false,
"locked": false,


},
{
"name": "light_with_tabs_noshadow",

"index": 12,
"badges": null,
"maintenance": false,
"darkModeEnabled": false,
"locked": false,


},
{
"name": "light_with_tabs",

"index": 6,
"badges": null,
"maintenance": false,
"darkModeEnabled": false,
"locked": false,


},
{
"name": "light_with_dark_page_title_grey_bg_and_breadcrumbs",

"index": 13,
"badges": null,
"maintenance": false,
"darkModeEnabled": false,
"locked": false,


},
{
"name": "light_with_dark_page_title_grey_bg",

"index": 16,
"badges": null,
"maintenance": false,
"darkModeEnabled": false,
"locked": false,

},
{
"name": "light_with_dark_page_title_and_white_box",

"index": 5,
"badges": null,
"maintenance": false,
"darkModeEnabled": false,
"locked": false,

},
{
"name": "light_with_bg_image_in_page_title",

"index": 10,
"badges": null,
"maintenance": false,
"darkModeEnabled": false,
"locked": false,

}
]
}
it has also html object which has a very long raw file but for building tree i think this data will be enfough for us to maake all components structure
 

joony786

Premium User
Premium
TutFlixer
Nov 25, 2020
130
12,850
52
Pakistan
fetch("
Please, Log in or Register to view URLs content!
", {
"headers": {
"accept": "application/json, text/plain, */*",
"accept-language": "en-US,en;q=0.9",
"authorization": "Bearer my tokken",
"if-none-match": "W/\"6620b-9AOr0WSwpZGiRxoAspDIIY0rUXw\"",
"sec-ch-ua": "\"Chromium\";v=\"94\", \"Microsoft Edge\";v=\"94\", \";Not A Brand\";v=\"99\"",
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": "\"Windows\"",
"sec-fetch-dest": "empty",
"sec-fetch-mode": "cors",
"sec-fetch-site": "cross-site"
},
"referrer": "
Please, Log in or Register to view URLs content!
",
"referrerPolicy": "strict-origin-when-cross-origin",
"body": null,
"method": "GET",
"mode": "cors"
});
i can give you my tokken if you want to test this . i have give you all the base urls only thing we need is to get name from response object
 
  • Like
Reactions: daominhsangvn

daominhsangvn

Make anything become easier
Premium
TutFlixer
May 21, 2021
65
5,113
46
Earth #99
fetch("
Please, Log in or Register to view URLs content!
", {
"headers": {
"accept": "application/json, text/plain, */*",
"accept-language": "en-US,en;q=0.9",
"authorization": "Bearer my tokken",
"if-none-match": "W/\"6620b-9AOr0WSwpZGiRxoAspDIIY0rUXw\"",
"sec-ch-ua": "\"Chromium\";v=\"94\", \"Microsoft Edge\";v=\"94\", \";Not A Brand\";v=\"99\"",
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": "\"Windows\"",
"sec-fetch-dest": "empty",
"sec-fetch-mode": "cors",
"sec-fetch-site": "cross-site"
},
"referrer": "
Please, Log in or Register to view URLs content!
",
"referrerPolicy": "strict-origin-when-cross-origin",
"body": null,
"method": "GET",
"mode": "cors"
});
i can give you my tokken if you want to test this . i have give you all the base urls only thing we need is to get name from response object
Yes, that's may works (or not if they're checking IP address based on token). Can you DM me for the token?
 

joony786

Premium User
Premium
TutFlixer
Nov 25, 2020
130
12,850
52
Pakistan
const html = `some long html`
const cheerio = require('cheerio');
const path = require('path');
const fs = require("fs");
const got = require("got");
const $ = cheerio.load(html)
const links = $('a');
let link1 = []
$(links).each(function(i, link){
link1.push( $(link).attr('href'));
});
fs.writeFileSync('./request.txt', JSON.stringify(link1, null, 2), 'utf8');
my request.text files contains this
let request = [
"webapp+master_layout+boxed_layout",
"webapp+master_layout+sidebar_layout",
"webapp+layout+card",
"webapp+layout+grid",
"webapp+layout+grid_card",
"webapp+navigation+horizontal_navigation",
"webapp+navigation+header",
"webapp+navigation+pagination",
"webapp+navigation+tab",
"webapp+navigation+vertical_navigation",
"webapp+heading+card_heading",
"webapp+heading+page_heading",
"webapp+table+advance_table",
"webapp+table+list",
"webapp+form+action_panel",
"webapp+form+dropdown",
"webapp+form+form_layout",
"webapp+form+input_group",
"webapp+form+sign_in",
"webapp+form+toggle_checkbox_radio",
"webapp+overlay+modal",
"webapp+overlay+notification",
"webapp+feedback+alert",
"webapp+UI_element+avatar",
"webapp+UI_element+badge",
"webapp+UI_element+button",
"webapp+UI_element+grouped_button",
"webapp+UI_element+popover",
"webapp+UI_element+progress_bar",
"webapp+UI_element+tooltip",
"webapp+calendar+calendar",
"webapp+graph+graph",
"webapp+note+note",
"webapp+master_layout+boxed_layout",
"webapp+master_layout+sidebar_layout",
"webapp+layout+card",
"webapp+layout+grid",
"webapp+layout+grid_card",
"webapp+navigation+horizontal_navigation",
"webapp+navigation+header",
"webapp+navigation+pagination",
"webapp+navigation+tab",
"webapp+navigation+vertical_navigation",
"webapp+heading+card_heading",
"webapp+heading+page_heading",
"webapp+table+advance_table",
"webapp+table+list",
"webapp+form+action_panel",
"webapp+form+dropdown",
"webapp+form+form_layout",
"webapp+form+input_group",
"webapp+form+sign_in",
"webapp+form+toggle_checkbox_radio",
"webapp+overlay+modal",
"webapp+overlay+notification",
"webapp+feedback+alert",
"webapp+UI_element+avatar",
"webapp+UI_element+badge",
"webapp+UI_element+button",
"webapp+UI_element+grouped_button",
"webapp+UI_element+popover",
"webapp+UI_element+progress_bar",
"webapp+UI_element+tooltip",
"webapp+calendar+calendar",
"webapp+graph+graph",
"webapp+note+note"
]
const token = fs.readFileSync('./token.txt', 'utf8');

get all pages for the first time
async function initialRequest(name,page) {
if(!page ) page = 1
let requestInfo = {}
const {body} = await got(`
Please, Log in or Register to view URLs content!
{name}.html?pageNumber=${page}&pageSize=10`,{
headers: {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36',
'Referer': '
Please, Log in or Register to view URLs content!
',
'Cookie': `token=${token}`
},
responseType: 'json'
});
requestInfo.name = name
requestInfo.totalPages = body.totalPages
requestInfo.totalComponents = body.totalComponents
return requestInfo
}
async function run() {

// const response = request.map(async (item) => {
// let array = []
// const getInfo = await initialRequest(item)
// return array.push(getInfo)
// })
let array = []
for(let item of request) {
const getInfo = await initialRequest(item)
console.log(getInfo)
array.push(getInfo)
}
fs.writeFileSync('./array.json', JSON.stringify(array, null, 2), 'utf8');
// console.log(array)
}
array.json =
[
{
"name": "webapp+master_layout+boxed_layout",
"totalPages": 2,
"totalComponents": 17
},
{
"name": "webapp+master_layout+sidebar_layout",
"totalPages": 1,
"totalComponents": 6
},
{
"name": "webapp+layout+card",
"totalPages": 1,
"totalComponents": 8
},
{
"name": "webapp+layout+grid",
"totalPages": 2,
"totalComponents": 11
},
{
"name": "webapp+layout+grid_card",
"totalPages": 17,
"totalComponents": 169
},
{
"name": "webapp+navigation+horizontal_navigation",
"totalPages": 2,
"totalComponents": 12
},
{
"name": "webapp+navigation+header",
"totalPages": 1,
"totalComponents": 6
},
{
"name": "webapp+navigation+pagination",
"totalPages": 1,
"totalComponents": 9
},
{
"name": "webapp+navigation+tab",
"totalPages": 1,
"totalComponents": 8
},
{
"name": "webapp+navigation+vertical_navigation",
"totalPages": 3,
"totalComponents": 21
},
{
"name": "webapp+heading+card_heading",
"totalPages": 1,
"totalComponents": 9
},
{
"name": "webapp+heading+page_heading",
"totalPages": 1,
"totalComponents": 10
},
{
"name": "webapp+table+advance_table",
"totalPages": 1,
"totalComponents": 9
},
{
"name": "webapp+table+list",
"totalPages": 2,
"totalComponents": 19
},
{
"name": "webapp+form+action_panel",
"totalPages": 2,
"totalComponents": 12
},
{
"name": "webapp+form+dropdown",
"totalPages": 1,
"totalComponents": 10
},
{
"name": "webapp+form+form_layout",
"totalPages": 1,
"totalComponents": 9
},
{
"name": "webapp+form+input_group",
"totalPages": 1,
"totalComponents": 9
},
{
"name": "webapp+form+sign_in",
"totalPages": 1,
"totalComponents": 7
},
{
"name": "webapp+form+toggle_checkbox_radio",
"totalPages": 1,
"totalComponents": 8
},
{
"name": "webapp+overlay+modal",
"totalPages": 6,
"totalComponents": 60
},
{
"name": "webapp+overlay+notification",
"totalPages": 2,
"totalComponents": 20
},
{
"name": "webapp+feedback+alert",
"totalPages": 2,
"totalComponents": 16
},
{
"name": "webapp+UI_element+avatar",
"totalPages": 1,
"totalComponents": 10
},
{
"name": "webapp+UI_element+badge",
"totalPages": 2,
"totalComponents": 14
},
{
"name": "webapp+UI_element+button",
"totalPages": 1,
"totalComponents": 7
},
{
"name": "webapp+UI_element+grouped_button",
"totalPages": 1,
"totalComponents": 5
},
{
"name": "webapp+UI_element+popover",
"totalPages": 1,
"totalComponents": 8
},
{
"name": "webapp+UI_element+progress_bar",
"totalPages": 2,
"totalComponents": 15
},
{
"name": "webapp+UI_element+tooltip",
"totalPages": 1,
"totalComponents": 4
},
{
"name": "webapp+calendar+calendar",
"totalPages": 1,
"totalComponents": 4
},
{
"name": "webapp+graph+graph",
"totalPages": 1,
"totalComponents": 3
},
{
"name": "webapp+note+note",
"totalPages": 1,
"totalComponents": 4
},
{
"name": "webapp+master_layout+boxed_layout",
"totalPages": 2,
"totalComponents": 17
},
{
"name": "webapp+master_layout+sidebar_layout",
"totalPages": 1,
"totalComponents": 6
},
{
"name": "webapp+layout+card",
"totalPages": 1,
"totalComponents": 8
},
{
"name": "webapp+layout+grid",
"totalPages": 2,
"totalComponents": 11
},
{
"name": "webapp+layout+grid_card",
"totalPages": 17,
"totalComponents": 169
},
{
"name": "webapp+navigation+horizontal_navigation",
"totalPages": 2,
"totalComponents": 12
},
{
"name": "webapp+navigation+header",
"totalPages": 1,
"totalComponents": 6
},
{
"name": "webapp+navigation+pagination",
"totalPages": 1,
"totalComponents": 9
},
{
"name": "webapp+navigation+tab",
"totalPages": 1,
"totalComponents": 8
},
{
"name": "webapp+navigation+vertical_navigation",
"totalPages": 3,
"totalComponents": 21
},
{
"name": "webapp+heading+card_heading",
"totalPages": 1,
"totalComponents": 9
},
{
"name": "webapp+heading+page_heading",
"totalPages": 1,
"totalComponents": 10
},
{
"name": "webapp+table+advance_table",
"totalPages": 1,
"totalComponents": 9
},
{
"name": "webapp+table+list",
"totalPages": 2,
"totalComponents": 19
},
{
"name": "webapp+form+action_panel",
"totalPages": 2,
"totalComponents": 12
},
{
"name": "webapp+form+dropdown",
"totalPages": 1,
"totalComponents": 10
},
{
"name": "webapp+form+form_layout",
"totalPages": 1,
"totalComponents": 9
},
{
"name": "webapp+form+input_group",
"totalPages": 1,
"totalComponents": 9
},
{
"name": "webapp+form+sign_in",
"totalPages": 1,
"totalComponents": 7
},
{
"name": "webapp+form+toggle_checkbox_radio",
"totalPages": 1,
"totalComponents": 8
},
{
"name": "webapp+overlay+modal",
"totalPages": 6,
"totalComponents": 60
},
{
"name": "webapp+overlay+notification",
"totalPages": 2,
"totalComponents": 20
},
{
"name": "webapp+feedback+alert",
"totalPages": 2,
"totalComponents": 16
},
{
"name": "webapp+UI_element+avatar",
"totalPages": 1,
"totalComponents": 10
},
{
"name": "webapp+UI_element+badge",
"totalPages": 2,
"totalComponents": 14
},
{
"name": "webapp+UI_element+button",
"totalPages": 1,
"totalComponents": 7
},
{
"name": "webapp+UI_element+grouped_button",
"totalPages": 1,
"totalComponents": 5
},
{
"name": "webapp+UI_element+popover",
"totalPages": 1,
"totalComponents": 8
},
{
"name": "webapp+UI_element+progress_bar",
"totalPages": 2,
"totalComponents": 15
},
{
"name": "webapp+UI_element+tooltip",
"totalPages": 1,
"totalComponents": 4
},
{
"name": "webapp+calendar+calendar",
"totalPages": 1,
"totalComponents": 4
},
{
"name": "webapp+graph+graph",
"totalPages": 1,
"totalComponents": 3
},
{
"name": "webapp+note+note",
"totalPages": 1,
"totalComponents": 4
}
]
run()
 

joony786

Premium User
Premium
TutFlixer
Nov 25, 2020
130
12,850
52
Pakistan
Why dont you change the page size to 100 ?
i already did 1000 . now we have all the names of the components and request urls .

[
[
{
"name": "webapp+master_layout+boxed_layout",
"totalPages": 1,
"totalComponents": 17
},
[
"light_with_Grey_background",
"dark_with_border_above_page_title",
"light_with_white_page_title_grey_bg",
"light_with_white_bg",
"light_with_tabs_noshadow",
"light_with_tabs",
"light_with_dark_page_title_grey_bg_and_breadcrumbs",
"light_with_dark_page_title_grey_bg",
"light_with_dark_page_title_and_white_box",
"light_with_bg_image_in_page_title",
"dark_with_white_page_title_and_grey_bg",
"dark_with_tabs_on_grey_bg",
"dark_with_boxed_tabs_and_white_box",
"dark_with_bg_image_in_page_title",
"boxed_layout",
"bg_image_in_header",
"Dark_with_tabs"
]
],
[
{
"name": "webapp+master_layout+sidebar_layout",
"totalPages": 1,
"totalComponents": 6
},
[
"light_with_icons_at_bottom",
"light_with_header_and_indicator",
"sidebar_1",
"sidebar",
"light_with_icons_at_bottom_alternate_style",
"light_with_header_and_icons"
]
],
[
{
"name": "webapp+layout+card",
"totalPages": 1,
"totalComponents": 8
},
[
"full_width_with_right_grey",
"full_width_divided_into_three",
"simple_with_white_footer",
"full_width_with_left_grey",
"full_width_white",
"full_width_divided_by_right_and_bottom_grey",
"6_col_with_grey_top_and_grey_bottom",
"6_col_divided_in_half_left_and_right"
]
],
[
{
"name": "webapp+layout+grid",
"totalPages": 1,
"totalComponents": 11
},
[
"4_x_4_x_4_col_grid",
"3_x_3_x_3_x_3_col_grid",
"9_x_3_col_grid",
"8_x_4_col_grid",
"7_x_5_col_grid",
"6_x_6_col_grid",
"5_x_7_col_grid",
"3_x_9_col_grid",
"2_x_10_col_grid",
"12_col_grid",
"10_x_2_col_grid"
]
],
[
{
"name": "webapp+layout+grid_card",
"totalPages": 1,
"totalComponents": 169
},
[
"stats",
"profile_summary",
"full_width_3_section_card",
"card_116",
"card_115",
"card_1",
"full_width_user_profile_card",
"full_width_event_card",
"full_width_3_section_project_card",
"card_91",
"card_9",
"card_8",
"card_79",
"card_7",
"card_54",
"card_4",
"card_30",
"card_3",
"card_29",
"card_27",
"card_24",
"card_110",
"4_col_stat_cards",
"ticket_with_barcode",
"task_card_with_right_aligned_button",
"stats_card_1",
"stats_average",
"stats_2",
"stats_1",
"single_card_with_title_and_description",
"single_card_with_stacked_avatars",
"single_card_with_date_and_time",
"simple_with_heading_and_2_buttons",
"profile_summary_2",
"medium_stat_cards_with_icon",
"medium_stat_cards_alternate_style",
"medium_stat_cards",
"host",
"grid_card_2",
"grid_card",
"graph_with_controls",
"full_width_table_with_tabs",
"full_width_project_card",
"full_width_card_with_right_aligned_icons",
"event_card_1",
"description_list",
"content_card",
"compose_task_card",
"compose_note_card",
"compact_stat_cards_alternate_style",
"compact_stat_cards",
"chart_card",
"card_99",
"card_98",
"card_97",
"card_96",
"card_95",
"card_94",
"card_93",
"card_92",
"card_90",
"card_89",
"card_88",
"card_87",
"card_86",
"card_85",
"card_84",
"card_83",
"card_82",
"card_81",
"card_80",
"card_78",
"card_77",
"card_76",
"card_75",
"card_74",
"card_73",
"card_72",
"card_71",
"card_70",
"card_69",
"card_68",
"card_67",
"card_66",
"card_65",
"card_64",
"card_63",
"card_62",
"card_61",
"card_60",
"card_6",
"card_59",
"card_58",
"card_57",
"card_56",
"card_55",
"card_53",
"card_52",
"card_51",
"card_50",
"card_5",
"card_49",
"card_48",
"card_47",
"card_46",
"card_45",
"card_44",
"card_43",
"card_42",
"card_41",
"card_40",
"card_39",
"card_38",
"card_37",
"card_36",
"card_34",
"card_33",
"card_31",
"card_28",
"card_26",
"card_25",
"card_23",
"card_22",
"card_21",
"card_20",
"card_2",
"card_19",
"card_18",
"card_17",
"card_16",
"card_15",
"card_14",
"card_13",
"card_121",
"card_120",
"card_12",
"card_119",
"card_118",
"card_117",
"card_114",
"card_113",
"card_112",
"card_111",
"card_11",
"card_109",
"card_108",
"card_107",
"card_106",
"card_105",
"card_104",
"card_103",
"card_102",
"card_101",
"card_100",
"card_10",
"8_col_user_profile_card",
"8_col_listing_with_search_and_filter",
"8_col_listing_card_with_stats_and_filters",
"8_col_listing_card_with_action_button",
"6_col_simple_listing_card",
"6_col_listing_card_with_toggles",
"6_col_listing_card",
"4_col_user_profile_card",
"4_col_listing_card_with_action_icons",
"3_col_user_profile_card",
"3_col_stats_card",
"3_col_list_card_with_action_buttons",
"3_col_list_card",
"3_col_data_card"
]
],
[
{
"name": "webapp+navigation+horizontal_navigation",
"totalPages": 1,
"totalComponents": 12
},
[
"light_with_button",
"black_left_aligned_with_icons",
"left_aligned_with_icons",
"light_with_nav_flushed_left",
"light_centre_aligned_with_search icon_and_avatar",
"left_aligned_with_search_bar_and_icon",
"horizontal_navigation_1",
"horizontal_navigation",
"dark_with_nav_flushed_left",
"dark_centre_aligned_with_search icon_and_avatar",
"black_simple_with_icons",
"black_left_aligned_with_search_bar_and_icon"
]
],
[
{
"name": "webapp+navigation+header",
"totalPages": 1,
"totalComponents": 6
},
[
"simple_with_category_dropdown",
"page_heading",
"header_4",
"header_3",
"header_2",
"header_1"
]
],
[
{
"name": "webapp+navigation+pagination",
"totalPages": 1,
"totalComponents": 9
},
[
"dots_arrows",
"stepper",
"standard_arrows",
"pagination_3",
"pagination_2",
"pagination",
"numbers_arrows_block",
"jump_to",
"first_last"
]
],
[
{
"name": "webapp+navigation+tab",
"totalPages": 1,
"totalComponents": 8
},
[
"tab",
"white_bg_active_gray",
"tab_with_icons",
"tab_2",
"indigo_block_gray_bg",
"gray_bg_active_white",
"active_indigo",
"4_tabs_with_counter"
]
],
[
{
"name": "webapp+navigation+vertical_navigation",
"totalPages": 1,
"totalComponents": 21
},
[
"dark_theme_with_light_icons",
"with_search_bar_and_bottom_controls_and_avatar",
"with_search_bar_and_bottom_controls",
"vertical_navigation_3",
"vertical_navigation_2",
"vertical_navigation_1",
"vertical_navigation",
"simple_with_notifications",
"sidebar_9",
"sidebar_8",
"sidebar_7",
"sidebar_6",
"sidebar_5",
"sidebar_4",
"sidebar_3",
"sidebar_2",
"sidebar_1",
"sidebar",
"home_navbar",
"chat",
"2_column_with_icon_active"
]
],
[
{
"name": "webapp+heading+card_heading",
"totalPages": 1,
"totalComponents": 9
},
[
"with_avatar_and_buttons",
"sub_text_with_button",
"tabs_on_bottom",
"simple_with_sub_text",
"simple_with_button",
"simple",
"right_aligned_toggle",
"indigo_tabs_on_right",
"grey_tabs_on_right"
]
],
[
{
"name": "webapp+heading+page_heading",
"totalPages": 1,
"totalComponents": 10
},
[
"simple_with_sub_text_and_border",
"simple_with_breadcrumbs",
"simple_with_buttons",
"grey_with_breadcrumbs",
"black_with_sub_text",
"black_with_profile_and_breadcrumbs",
"black_with_breadcrumbs",
"black_simple_with_buttons",
"background_with_sub_text",
"background_with_breadcrumbs"
]
],
[
{
"name": "webapp+table+advance_table",
"totalPages": 1,
"totalComponents": 9
},
[
"table_3",
"compact_table_with_actions_and_select",
"tasks",
"table_5",
"table_4",
"table_2",
"table",
"advance_table_with_filters_search_and_two_level_action_buttons",
"advance_table_with_filters,_actions,_search,_sort_and_expanded_row"
]
],
[
{
"name": "webapp+table+list",
"totalPages": 1,
"totalComponents": 19
},
[
"list_4",
"list_1",
"list_with_stacked_avatars",
"2_col_with_badge",
"simple_list_with_cta",
"simple_list_with_checkbox",
"simple_list",
"list_with_links",
"list_6",
"list_5",
"list_3",
"list_2",
"list",
"folders_list",
"files_list_with_icons",
"expanded_list_with_colored_reminder",
"5_col_with_checkbox",
"4_column_minimal_list_with_alternate_rows",
"4_column_list_with_avatar"
]
],
[
{
"name": "webapp+form+action_panel",
"totalPages": 1,
"totalComponents": 12
},
[
"simple_with_CTA",
"payment_method",
"text_field_and_button",
"simple_with_toggle_on_top",
"simple_with_toggle",
"simple_with_right_aligned_button",
"simple_with_link",
"simple_with_left_aligned_button",
"simple_with_icon_and_outline_button",
"simple_with_icon_and_fill_button",
"simple_action_panel_with_button",
"account_information"
]
],
[
{
"name": "webapp+form+dropdown",
"totalPages": 1,
"totalComponents": 10
},
[
"simple_with_gray_hover",
"simple_with_dots",
"simple_with_seperator",
"simple_with_categories",
"simple_with_account_indigo",
"simple_dropdown_with_icons",
"indigo_with_seperate_chevron",
"indigo_with_indigo_hover",
"dropdown_2",
"dropdown_1"
]
],
[
{
"name": "webapp+form+form_layout",
"totalPages": 1,
"totalComponents": 9
},
[
"simple_form",
"form_card_with_toggles",
"form_card_user_profile",
"form_with_steps",
"form_layout_wizard2",
"form_layout_wizard1",
"form_layout_wizard",
"form_layout",
"form_card_with_inputs"
]
],
[
{
"name": "webapp+form+input_group",
"totalPages": 1,
"totalComponents": 9
},
[
"input_with_label",
"input_with_icon_at_start",
"input_with_select_at_end",
"input_with_select",
"input_with_label_help_text",
"input_with_icon_at_end",
"input_with_help_text",
"input_with_filter",
"input_with_error_success"
]
],
[
{
"name": "webapp+form+sign_in",
"totalPages": 1,
"totalComponents": 7
},
[
"half_page_with_company",
"indigo_full_page",
"half_page_with_image",
"white_full_page",
"sign_in_2",
"sign_in",
"half_page_with_illustration"
]
],
[
{
"name": "webapp+form+toggle_checkbox_radio",
"totalPages": 1,
"totalComponents": 8
},
[
"radio_small",
"checkbox_small",
"toggle_with_border",
"toggle_thin",
"toggle_rounded",
"toggle_rectangle",
"radio_large",
"checkbox_large"
]
],
[
{
"name": "webapp+overlay+modal",
"totalPages": 1,
"totalComponents": 60
},
[
"modal_7",
"modal_6",
"modal_4",
"modal_3",
"modal_2",
"left_aligned_short",
"centre_aligned_file_upload",
"with_text_input",
"modal_9",
"modal_8",
"modal_5",
"modal_13",
"modal_12",
"modal_11",
"modal_10",
"modal_1",
"left_aligned_long",
"left_aligned_form",
"left_aligned_file_upload",
"invoices",
"date_picker",
"centre_aligned_short",
"centre_aligned_long",
"add_user",
"Modal_49",
"Modal_48",
"Modal_47",
"Modal_46",
"Modal_45",
"Modal_44",
"Modal_43",
"Modal_42",
"Modal_41",
"Modal_40",
"Modal_39",
"Modal_38",
"Modal_37",
"Modal_36",
"Modal_35",
"Modal_34",
"Modal_33",
"Modal_32",
"Modal_31",
"Modal_30",
"Modal_29",
"Modal_28",
"Modal_27",
"Modal_26",
"Modal_25",
"Modal_24",
"Modal_23",
"Modal_22",
"Modal_21",
"Modal_20",
"Modal_19",
"Modal_18",
"Modal_17",
"Modal_16",
"Modal_15",
"Modal_14"
]
],
[
{
"name": "webapp+overlay+notification",
"totalPages": 1,
"totalComponents": 20
},
[
"simple_multiple_with_seperator",
"multiple_action_with_avatar_seperator",
"multiple_action",
"avatar_with_multiple_buttons",
"single_action_with_sub_text",
"single_action_with_avatar",
"single_action",
"simple_multiple_action_success",
"simple_multiple_action_info",
"notifications",
"notification_panel",
"notification_2",
"notification_1",
"no_action",
"multiple_action_with_seperator",
"coloured_no_action",
"coloured_multiple_with_separator",
"coloured_multiple_action_with_seperator",
"coloured_multiple_action_2",
"coloured_multiple_action"
]
],
[
{
"name": "webapp+feedback+alert",
"totalPages": 1,
"totalComponents": 16
},
[
"simple_with_action_links_error",
"color_coded_with_icon_info",
"simple_with_action_links_warning",
"simple_with_action_links_success",
"simple_with_action_links_info",
"simple_with_action_button_warning",
"simple_with_action_button_success",
"simple_with_action_button_info",
"simple_with_action_button_error",
"fixed_on_top_warning",
"fixed_on_top_success",
"fixed_on_top_info",
"fixed_on_top_error",
"color_coded_with_icon_warning",
"color_coded_with_icon_success",
"color_coded_with_icon_error"
]
],
[
{
"name": "webapp+UI_element+avatar",
"totalPages": 1,
"totalComponents": 10
},
[
"avatars_circle_stacked",
"avatar_rounded_with_dropdown",
"avatars_rounded_text",
"avatars_rounded_stacked",
"avatars_rounded_image",
"avatars_rounded_active",
"avatars_circle_with_dropdown",
"avatars_circle_text",
"avatars_circle_image",
"avatars_circle_active"
]
],
[
{
"name": "webapp+UI_element+badge",
"totalPages": 1,
"totalComponents": 14
},
[
"small_rounded_fill",
"small_rounded_bullet",
"small_rounded",
"small_rectangle_fill",
"small_rectangle_bullet",
"small_rectangle",
"small_large_rounded_with_cancel",
"small_large_rectangle_with_cancel",
"large_rounded_fill",
"large_rounded_bullet",
"large_rounded",
"large_rectangle_fill",
"large_rectangle_bullet",
"large_rectangle"
]
],
[
{
"name": "webapp+UI_element+button",
"totalPages": 1,
"totalComponents": 7
},
[
"button_medium",
"button_small",
"button_regular",
"button_medium_large",
"button_large",
"button_extra_small",
"button_extra_large"
]
],
[
{
"name": "webapp+UI_element+grouped_button",
"totalPages": 1,
"totalComponents": 5
},
[
"filter-1",
"with_filter",
"with_dropdown",
"with_chevrons",
"filter-2"
]
],
[
{
"name": "webapp+UI_element+popover",
"totalPages": 1,
"totalComponents": 8
},
[
"simple_popover",
"popover_with_data",
"text_only_definition",
"popover_with_scrolling_avatar_and_list",
"popover_with_list_and_actions",
"popover_with_data_and_buttons",
"popover2",
"popover1"
]
],
[
{
"name": "webapp+UI_element+progress_bar",
"totalPages": 1,
"totalComponents": 15
},
[
"thin_with_steps",
"thin_with_sub_text",
"thin_with_progress_and_eta",
"thin_with_divided_steps",
"thin_vertical_grouped",
"thin_simple",
"small_circle",
"progress_bar",
"large_with_steps",
"large_circle_with_sub_text",
"broad_with_sub_text",
"broad_with_progress_and_eta",
"broad_with_divided_steps",
"broad_vertical_grouped",
"broad_simple"
]
],
[
{
"name": "webapp+UI_element+tooltip",
"totalPages": 1,
"totalComponents": 4
},
[
"with_steps_alternate",
"with_multiple_cta_alternate",
"with_cta",
"text_only"
]
],
[
{
"name": "webapp+calendar+calendar",
"totalPages": 1,
"totalComponents": 4
},
[
"calendar_with_stretched_task",
"calendar_1",
"date_picker",
"calendar_2"
]
],
[
{
"name": "webapp+graph+graph",
"totalPages": 1,
"totalComponents": 3
},
[
"pie_chart",
"line_graph",
"bar_charts"
]
],
[
{
"name": "webapp+note+note",
"totalPages": 1,
"totalComponents": 4
},
[
"4_by_3_multiple_styled_cards",
"note_1",
"note",
"3_by_3_kanban_board"
]
],
[
{
"name": "webapp+master_layout+boxed_layout",
"totalPages": 1,
"totalComponents": 17
},
[
"light_with_Grey_background",
"dark_with_border_above_page_title",
"light_with_white_page_title_grey_bg",
"light_with_white_bg",
"light_with_tabs_noshadow",
"light_with_tabs",
"light_with_dark_page_title_grey_bg_and_breadcrumbs",
"light_with_dark_page_title_grey_bg",
"light_with_dark_page_title_and_white_box",
"light_with_bg_image_in_page_title",
"dark_with_white_page_title_and_grey_bg",
"dark_with_tabs_on_grey_bg",
"dark_with_boxed_tabs_and_white_box",
"dark_with_bg_image_in_page_title",
"boxed_layout",
"bg_image_in_header",
"Dark_with_tabs"
]
],
[
{
"name": "webapp+master_layout+sidebar_layout",
"totalPages": 1,
"totalComponents": 6
},
[
"light_with_icons_at_bottom",
"light_with_header_and_indicator",
"sidebar_1",
"sidebar",
"light_with_icons_at_bottom_alternate_style",
"light_with_header_and_icons"
]
],
[
{
"name": "webapp+layout+card",
"totalPages": 1,
"totalComponents": 8
},
[
"full_width_with_right_grey",
"full_width_divided_into_three",
"simple_with_white_footer",
"full_width_with_left_grey",
"full_width_white",
"full_width_divided_by_right_and_bottom_grey",
"6_col_with_grey_top_and_grey_bottom",
"6_col_divided_in_half_left_and_right"
]
],
[
{
"name": "webapp+layout+grid",
"totalPages": 1,
"totalComponents": 11
},
[
"4_x_4_x_4_col_grid",
"3_x_3_x_3_x_3_col_grid",
"9_x_3_col_grid",
"8_x_4_col_grid",
"7_x_5_col_grid",
"6_x_6_col_grid",
"5_x_7_col_grid",
"3_x_9_col_grid",
"2_x_10_col_grid",
"12_col_grid",
"10_x_2_col_grid"
]
],
[
{
"name": "webapp+layout+grid_card",
"totalPages": 1,
"totalComponents": 169
},
[
"stats",
"profile_summary",
"full_width_3_section_card",
"card_116",
"card_115",
"card_1",
"full_width_user_profile_card",
"full_width_event_card",
"full_width_3_section_project_card",
"card_91",
"card_9",
"card_8",
"card_79",
"card_7",
"card_54",
"card_4",
"card_30",
"card_3",
"card_29",
"card_27",
"card_24",
"card_110",
"4_col_stat_cards",
"ticket_with_barcode",
"task_card_with_right_aligned_button",
"stats_card_1",
"stats_average",
"stats_2",
"stats_1",
"single_card_with_title_and_description",
"single_card_with_stacked_avatars",
"single_card_with_date_and_time",
"simple_with_heading_and_2_buttons",
"profile_summary_2",
"medium_stat_cards_with_icon",
"medium_stat_cards_alternate_style",
"medium_stat_cards",
"host",
"grid_card_2",
"grid_card",
"graph_with_controls",
"full_width_table_with_tabs",
"full_width_project_card",
"full_width_card_with_right_aligned_icons",
"event_card_1",
"description_list",
"content_card",
"compose_task_card",
"compose_note_card",
"compact_stat_cards_alternate_style",
"compact_stat_cards",
"chart_card",
"card_99",
"card_98",
"card_97",
"card_96",
"card_95",
"card_94",
"card_93",
"card_92",
"card_90",
"card_89",
"card_88",
"card_87",
"card_86",
"card_85",
"card_84",
"card_83",
"card_82",
"card_81",
"card_80",
"card_78",
"card_77",
"card_76",
"card_75",
"card_74",
"card_73",
"card_72",
"card_71",
"card_70",
"card_69",
"card_68",
"card_67",
"card_66",
"card_65",
"card_64",
"card_63",
"card_62",
"card_61",
"card_60",
"card_6",
"card_59",
"card_58",
"card_57",
"card_56",
"card_55",
"card_53",
"card_52",
"card_51",
"card_50",
"card_5",
"card_49",
"card_48",
"card_47",
"card_46",
"card_45",
"card_44",
"card_43",
"card_42",
"card_41",
"card_40",
"card_39",
"card_38",
"card_37",
"card_36",
"card_34",
"card_33",
"card_31",
"card_28",
"card_26",
"card_25",
"card_23",
"card_22",
"card_21",
"card_20",
"card_2",
"card_19",
"card_18",
"card_17",
"card_16",
"card_15",
"card_14",
"card_13",
"card_121",
"card_120",
"card_12",
"card_119",
"card_118",
"card_117",
"card_114",
"card_113",
"card_112",
"card_111",
"card_11",
"card_109",
"card_108",
"card_107",
"card_106",
"card_105",
"card_104",
"card_103",
"card_102",
"card_101",
"card_100",
"card_10",
"8_col_user_profile_card",
"8_col_listing_with_search_and_filter",
"8_col_listing_card_with_stats_and_filters",
"8_col_listing_card_with_action_button",
"6_col_simple_listing_card",
"6_col_listing_card_with_toggles",
"6_col_listing_card",
"4_col_user_profile_card",
"4_col_listing_card_with_action_icons",
"3_col_user_profile_card",
"3_col_stats_card",
"3_col_list_card_with_action_buttons",
"3_col_list_card",
"3_col_data_card"
]
],
[
{
"name": "webapp+navigation+horizontal_navigation",
"totalPages": 1,
"totalComponents": 12
},
[
"light_with_button",
"black_left_aligned_with_icons",
"left_aligned_with_icons",
"light_with_nav_flushed_left",
"light_centre_aligned_with_search icon_and_avatar",
"left_aligned_with_search_bar_and_icon",
"horizontal_navigation_1",
"horizontal_navigation",
"dark_with_nav_flushed_left",
"dark_centre_aligned_with_search icon_and_avatar",
"black_simple_with_icons",
"black_left_aligned_with_search_bar_and_icon"
]
],
[
{
"name": "webapp+navigation+header",
"totalPages": 1,
"totalComponents": 6
},
[
"simple_with_category_dropdown",
"page_heading",
"header_4",
"header_3",
"header_2",
"header_1"
]
],
[
{
"name": "webapp+navigation+pagination",
"totalPages": 1,
"totalComponents": 9
},
[
"dots_arrows",
"stepper",
"standard_arrows",
"pagination_3",
"pagination_2",
"pagination",
"numbers_arrows_block",
"jump_to",
"first_last"
]
],
[
{
"name": "webapp+navigation+tab",
"totalPages": 1,
"totalComponents": 8
},
[
"tab",
"white_bg_active_gray",
"tab_with_icons",
"tab_2",
"indigo_block_gray_bg",
"gray_bg_active_white",
"active_indigo",
"4_tabs_with_counter"
]
],
[
{
"name": "webapp+navigation+vertical_navigation",
"totalPages": 1,
"totalComponents": 21
},
[
"dark_theme_with_light_icons",
"with_search_bar_and_bottom_controls_and_avatar",
"with_search_bar_and_bottom_controls",
"vertical_navigation_3",
"vertical_navigation_2",
"vertical_navigation_1",
"vertical_navigation",
"simple_with_notifications",
"sidebar_9",
"sidebar_8",
"sidebar_7",
"sidebar_6",
"sidebar_5",
"sidebar_4",
"sidebar_3",
"sidebar_2",
"sidebar_1",
"sidebar",
"home_navbar",
"chat",
"2_column_with_icon_active"
]
],
[
{
"name": "webapp+heading+card_heading",
"totalPages": 1,
"totalComponents": 9
},
[
"with_avatar_and_buttons",
"sub_text_with_button",
"tabs_on_bottom",
"simple_with_sub_text",
"simple_with_button",
"simple",
"right_aligned_toggle",
"indigo_tabs_on_right",
"grey_tabs_on_right"
]
],
[
{
"name": "webapp+heading+page_heading",
"totalPages": 1,
"totalComponents": 10
},
[
"simple_with_sub_text_and_border",
"simple_with_breadcrumbs",
"simple_with_buttons",
"grey_with_breadcrumbs",
"black_with_sub_text",
"black_with_profile_and_breadcrumbs",
"black_with_breadcrumbs",
"black_simple_with_buttons",
"background_with_sub_text",
"background_with_breadcrumbs"
]
],
[
{
"name": "webapp+table+advance_table",
"totalPages": 1,
"totalComponents": 9
},
[
"table_3",
"compact_table_with_actions_and_select",
"tasks",
"table_5",
"table_4",
"table_2",
"table",
"advance_table_with_filters_search_and_two_level_action_buttons",
"advance_table_with_filters,_actions,_search,_sort_and_expanded_row"
]
],
[
{
"name": "webapp+table+list",
"totalPages": 1,
"totalComponents": 19
},
[
"list_4",
"list_1",
"list_with_stacked_avatars",
"2_col_with_badge",
"simple_list_with_cta",
"simple_list_with_checkbox",
"simple_list",
"list_with_links",
"list_6",
"list_5",
"list_3",
"list_2",
"list",
"folders_list",
"files_list_with_icons",
"expanded_list_with_colored_reminder",
"5_col_with_checkbox",
"4_column_minimal_list_with_alternate_rows",
"4_column_list_with_avatar"
]
],
[
{
"name": "webapp+form+action_panel",
"totalPages": 1,
"totalComponents": 12
},
[
"simple_with_CTA",
"payment_method",
"text_field_and_button",
"simple_with_toggle_on_top",
"simple_with_toggle",
"simple_with_right_aligned_button",
"simple_with_link",
"simple_with_left_aligned_button",
"simple_with_icon_and_outline_button",
"simple_with_icon_and_fill_button",
"simple_action_panel_with_button",
"account_information"
]
],
[
{
"name": "webapp+form+dropdown",
"totalPages": 1,
"totalComponents": 10
},
[
"simple_with_gray_hover",
"simple_with_dots",
"simple_with_seperator",
"simple_with_categories",
"simple_with_account_indigo",
"simple_dropdown_with_icons",
"indigo_with_seperate_chevron",
"indigo_with_indigo_hover",
"dropdown_2",
"dropdown_1"
]
],
[
{
"name": "webapp+form+form_layout",
"totalPages": 1,
"totalComponents": 9
},
[
"simple_form",
"form_card_with_toggles",
"form_card_user_profile",
"form_with_steps",
"form_layout_wizard2",
"form_layout_wizard1",
"form_layout_wizard",
"form_layout",
"form_card_with_inputs"
]
],
[
{
"name": "webapp+form+input_group",
"totalPages": 1,
"totalComponents": 9
},
[
"input_with_label",
"input_with_icon_at_start",
"input_with_select_at_end",
"input_with_select",
"input_with_label_help_text",
"input_with_icon_at_end",
"input_with_help_text",
"input_with_filter",
"input_with_error_success"
]
],
[
{
"name": "webapp+form+sign_in",
"totalPages": 1,
"totalComponents": 7
},
[
"half_page_with_company",
"indigo_full_page",
"half_page_with_image",
"white_full_page",
"sign_in_2",
"sign_in",
"half_page_with_illustration"
]
],
[
{
"name": "webapp+form+toggle_checkbox_radio",
"totalPages": 1,
"totalComponents": 8
},
[
"radio_small",
"checkbox_small",
"toggle_with_border",
"toggle_thin",
"toggle_rounded",
"toggle_rectangle",
"radio_large",
"checkbox_large"
]
],
[
{
"name": "webapp+overlay+modal",
"totalPages": 1,
"totalComponents": 60
},
[
"modal_7",
"modal_6",
"modal_4",
"modal_3",
"modal_2",
"left_aligned_short",
"centre_aligned_file_upload",
"with_text_input",
"modal_9",
"modal_8",
"modal_5",
"modal_13",
"modal_12",
"modal_11",
"modal_10",
"modal_1",
"left_aligned_long",
"left_aligned_form",
"left_aligned_file_upload",
"invoices",
"date_picker",
"centre_aligned_short",
"centre_aligned_long",
"add_user",
"Modal_49",
"Modal_48",
"Modal_47",
"Modal_46",
"Modal_45",
"Modal_44",
"Modal_43",
"Modal_42",
"Modal_41",
"Modal_40",
"Modal_39",
"Modal_38",
"Modal_37",
"Modal_36",
"Modal_35",
"Modal_34",
"Modal_33",
"Modal_32",
"Modal_31",
"Modal_30",
"Modal_29",
"Modal_28",
"Modal_27",
"Modal_26",
"Modal_25",
"Modal_24",
"Modal_23",
"Modal_22",
"Modal_21",
"Modal_20",
"Modal_19",
"Modal_18",
"Modal_17",
"Modal_16",
"Modal_15",
"Modal_14"
]
],
[
{
"name": "webapp+overlay+notification",
"totalPages": 1,
"totalComponents": 20
},
[
"simple_multiple_with_seperator",
"multiple_action_with_avatar_seperator",
"multiple_action",
"avatar_with_multiple_buttons",
"single_action_with_sub_text",
"single_action_with_avatar",
"single_action",
"simple_multiple_action_success",
"simple_multiple_action_info",
"notifications",
"notification_panel",
"notification_2",
"notification_1",
"no_action",
"multiple_action_with_seperator",
"coloured_no_action",
"coloured_multiple_with_separator",
"coloured_multiple_action_with_seperator",
"coloured_multiple_action_2",
"coloured_multiple_action"
]
],
[
{
"name": "webapp+feedback+alert",
"totalPages": 1,
"totalComponents": 16
},
[
"simple_with_action_links_error",
"color_coded_with_icon_info",
"simple_with_action_links_warning",
"simple_with_action_links_success",
"simple_with_action_links_info",
"simple_with_action_button_warning",
"simple_with_action_button_success",
"simple_with_action_button_info",
"simple_with_action_button_error",
"fixed_on_top_warning",
"fixed_on_top_success",
"fixed_on_top_info",
"fixed_on_top_error",
"color_coded_with_icon_warning",
"color_coded_with_icon_success",
"color_coded_with_icon_error"
]
],
[
{
"name": "webapp+UI_element+avatar",
"totalPages": 1,
"totalComponents": 10
},
[
"avatars_circle_stacked",
"avatar_rounded_with_dropdown",
"avatars_rounded_text",
"avatars_rounded_stacked",
"avatars_rounded_image",
"avatars_rounded_active",
"avatars_circle_with_dropdown",
"avatars_circle_text",
"avatars_circle_image",
"avatars_circle_active"
]
],
[
{
"name": "webapp+UI_element+badge",
"totalPages": 1,
"totalComponents": 14
},
[
"small_rounded_fill",
"small_rounded_bullet",
"small_rounded",
"small_rectangle_fill",
"small_rectangle_bullet",
"small_rectangle",
"small_large_rounded_with_cancel",
"small_large_rectangle_with_cancel",
"large_rounded_fill",
"large_rounded_bullet",
"large_rounded",
"large_rectangle_fill",
"large_rectangle_bullet",
"large_rectangle"
]
],
[
{
"name": "webapp+UI_element+button",
"totalPages": 1,
"totalComponents": 7
},
[
"button_medium",
"button_small",
"button_regular",
"button_medium_large",
"button_large",
"button_extra_small",
"button_extra_large"
]
],
[
{
"name": "webapp+UI_element+grouped_button",
"totalPages": 1,
"totalComponents": 5
},
[
"filter-1",
"with_filter",
"with_dropdown",
"with_chevrons",
"filter-2"
]
],
[
{
"name": "webapp+UI_element+popover",
"totalPages": 1,
"totalComponents": 8
},
[
"simple_popover",
"popover_with_data",
"text_only_definition",
"popover_with_scrolling_avatar_and_list",
"popover_with_list_and_actions",
"popover_with_data_and_buttons",
"popover2",
"popover1"
]
],
[
{
"name": "webapp+UI_element+progress_bar",
"totalPages": 1,
"totalComponents": 15
},
[
"thin_with_steps",
"thin_with_sub_text",
"thin_with_progress_and_eta",
"thin_with_divided_steps",
"thin_vertical_grouped",
"thin_simple",
"small_circle",
"progress_bar",
"large_with_steps",
"large_circle_with_sub_text",
"broad_with_sub_text",
"broad_with_progress_and_eta",
"broad_with_divided_steps",
"broad_vertical_grouped",
"broad_simple"
]
],
[
{
"name": "webapp+UI_element+tooltip",
"totalPages": 1,
"totalComponents": 4
},
[
"with_steps_alternate",
"with_multiple_cta_alternate",
"with_cta",
"text_only"
]
],
[
{
"name": "webapp+calendar+calendar",
"totalPages": 1,
"totalComponents": 4
},
[
"calendar_with_stretched_task",
"calendar_1",
"date_picker",
"calendar_2"
]
],
[
{
"name": "webapp+graph+graph",
"totalPages": 1,
"totalComponents": 3
},
[
"pie_chart",
"line_graph",
"bar_charts"
]
],
[
{
"name": "webapp+note+note",
"totalPages": 1,
"totalComponents": 4
},
[
"4_by_3_multiple_styled_cards",
"note_1",
"note",
"3_by_3_kanban_board"
]
]
]
this is our final object based on that we will build tree and i hope this will work out
 

daominhsangvn

Make anything become easier
Premium
TutFlixer
May 21, 2021
65
5,113
46
Earth #99
i already did 1000 . now we have all the names of the components and request urls .

[
[
{
"name": "webapp+master_layout+boxed_layout",
"totalPages": 1,
"totalComponents": 17
},
[
"light_with_Grey_background",
"dark_with_border_above_page_title",
"light_with_white_page_title_grey_bg",
"light_with_white_bg",
"light_with_tabs_noshadow",
"light_with_tabs",
"light_with_dark_page_title_grey_bg_and_breadcrumbs",
"light_with_dark_page_title_grey_bg",
"light_with_dark_page_title_and_white_box",
"light_with_bg_image_in_page_title",
"dark_with_white_page_title_and_grey_bg",
"dark_with_tabs_on_grey_bg",
"dark_with_boxed_tabs_and_white_box",
"dark_with_bg_image_in_page_title",
"boxed_layout",
"bg_image_in_header",
"Dark_with_tabs"
]
],
[
{
"name": "webapp+master_layout+sidebar_layout",
"totalPages": 1,
"totalComponents": 6
},
[
"light_with_icons_at_bottom",
"light_with_header_and_indicator",
"sidebar_1",
"sidebar",
"light_with_icons_at_bottom_alternate_style",
"light_with_header_and_icons"
]
],
[
{
"name": "webapp+layout+card",
"totalPages": 1,
"totalComponents": 8
},
[
"full_width_with_right_grey",
"full_width_divided_into_three",
"simple_with_white_footer",
"full_width_with_left_grey",
"full_width_white",
"full_width_divided_by_right_and_bottom_grey",
"6_col_with_grey_top_and_grey_bottom",
"6_col_divided_in_half_left_and_right"
]
],
[
{
"name": "webapp+layout+grid",
"totalPages": 1,
"totalComponents": 11
},
[
"4_x_4_x_4_col_grid",
"3_x_3_x_3_x_3_col_grid",
"9_x_3_col_grid",
"8_x_4_col_grid",
"7_x_5_col_grid",
"6_x_6_col_grid",
"5_x_7_col_grid",
"3_x_9_col_grid",
"2_x_10_col_grid",
"12_col_grid",
"10_x_2_col_grid"
]
],
[
{
"name": "webapp+layout+grid_card",
"totalPages": 1,
"totalComponents": 169
},
[
"stats",
"profile_summary",
"full_width_3_section_card",
"card_116",
"card_115",
"card_1",
"full_width_user_profile_card",
"full_width_event_card",
"full_width_3_section_project_card",
"card_91",
"card_9",
"card_8",
"card_79",
"card_7",
"card_54",
"card_4",
"card_30",
"card_3",
"card_29",
"card_27",
"card_24",
"card_110",
"4_col_stat_cards",
"ticket_with_barcode",
"task_card_with_right_aligned_button",
"stats_card_1",
"stats_average",
"stats_2",
"stats_1",
"single_card_with_title_and_description",
"single_card_with_stacked_avatars",
"single_card_with_date_and_time",
"simple_with_heading_and_2_buttons",
"profile_summary_2",
"medium_stat_cards_with_icon",
"medium_stat_cards_alternate_style",
"medium_stat_cards",
"host",
"grid_card_2",
"grid_card",
"graph_with_controls",
"full_width_table_with_tabs",
"full_width_project_card",
"full_width_card_with_right_aligned_icons",
"event_card_1",
"description_list",
"content_card",
"compose_task_card",
"compose_note_card",
"compact_stat_cards_alternate_style",
"compact_stat_cards",
"chart_card",
"card_99",
"card_98",
"card_97",
"card_96",
"card_95",
"card_94",
"card_93",
"card_92",
"card_90",
"card_89",
"card_88",
"card_87",
"card_86",
"card_85",
"card_84",
"card_83",
"card_82",
"card_81",
"card_80",
"card_78",
"card_77",
"card_76",
"card_75",
"card_74",
"card_73",
"card_72",
"card_71",
"card_70",
"card_69",
"card_68",
"card_67",
"card_66",
"card_65",
"card_64",
"card_63",
"card_62",
"card_61",
"card_60",
"card_6",
"card_59",
"card_58",
"card_57",
"card_56",
"card_55",
"card_53",
"card_52",
"card_51",
"card_50",
"card_5",
"card_49",
"card_48",
"card_47",
"card_46",
"card_45",
"card_44",
"card_43",
"card_42",
"card_41",
"card_40",
"card_39",
"card_38",
"card_37",
"card_36",
"card_34",
"card_33",
"card_31",
"card_28",
"card_26",
"card_25",
"card_23",
"card_22",
"card_21",
"card_20",
"card_2",
"card_19",
"card_18",
"card_17",
"card_16",
"card_15",
"card_14",
"card_13",
"card_121",
"card_120",
"card_12",
"card_119",
"card_118",
"card_117",
"card_114",
"card_113",
"card_112",
"card_111",
"card_11",
"card_109",
"card_108",
"card_107",
"card_106",
"card_105",
"card_104",
"card_103",
"card_102",
"card_101",
"card_100",
"card_10",
"8_col_user_profile_card",
"8_col_listing_with_search_and_filter",
"8_col_listing_card_with_stats_and_filters",
"8_col_listing_card_with_action_button",
"6_col_simple_listing_card",
"6_col_listing_card_with_toggles",
"6_col_listing_card",
"4_col_user_profile_card",
"4_col_listing_card_with_action_icons",
"3_col_user_profile_card",
"3_col_stats_card",
"3_col_list_card_with_action_buttons",
"3_col_list_card",
"3_col_data_card"
]
],
[
{
"name": "webapp+navigation+horizontal_navigation",
"totalPages": 1,
"totalComponents": 12
},
[
"light_with_button",
"black_left_aligned_with_icons",
"left_aligned_with_icons",
"light_with_nav_flushed_left",
"light_centre_aligned_with_search icon_and_avatar",
"left_aligned_with_search_bar_and_icon",
"horizontal_navigation_1",
"horizontal_navigation",
"dark_with_nav_flushed_left",
"dark_centre_aligned_with_search icon_and_avatar",
"black_simple_with_icons",
"black_left_aligned_with_search_bar_and_icon"
]
],
[
{
"name": "webapp+navigation+header",
"totalPages": 1,
"totalComponents": 6
},
[
"simple_with_category_dropdown",
"page_heading",
"header_4",
"header_3",
"header_2",
"header_1"
]
],
[
{
"name": "webapp+navigation+pagination",
"totalPages": 1,
"totalComponents": 9
},
[
"dots_arrows",
"stepper",
"standard_arrows",
"pagination_3",
"pagination_2",
"pagination",
"numbers_arrows_block",
"jump_to",
"first_last"
]
],
[
{
"name": "webapp+navigation+tab",
"totalPages": 1,
"totalComponents": 8
},
[
"tab",
"white_bg_active_gray",
"tab_with_icons",
"tab_2",
"indigo_block_gray_bg",
"gray_bg_active_white",
"active_indigo",
"4_tabs_with_counter"
]
],
[
{
"name": "webapp+navigation+vertical_navigation",
"totalPages": 1,
"totalComponents": 21
},
[
"dark_theme_with_light_icons",
"with_search_bar_and_bottom_controls_and_avatar",
"with_search_bar_and_bottom_controls",
"vertical_navigation_3",
"vertical_navigation_2",
"vertical_navigation_1",
"vertical_navigation",
"simple_with_notifications",
"sidebar_9",
"sidebar_8",
"sidebar_7",
"sidebar_6",
"sidebar_5",
"sidebar_4",
"sidebar_3",
"sidebar_2",
"sidebar_1",
"sidebar",
"home_navbar",
"chat",
"2_column_with_icon_active"
]
],
[
{
"name": "webapp+heading+card_heading",
"totalPages": 1,
"totalComponents": 9
},
[
"with_avatar_and_buttons",
"sub_text_with_button",
"tabs_on_bottom",
"simple_with_sub_text",
"simple_with_button",
"simple",
"right_aligned_toggle",
"indigo_tabs_on_right",
"grey_tabs_on_right"
]
],
[
{
"name": "webapp+heading+page_heading",
"totalPages": 1,
"totalComponents": 10
},
[
"simple_with_sub_text_and_border",
"simple_with_breadcrumbs",
"simple_with_buttons",
"grey_with_breadcrumbs",
"black_with_sub_text",
"black_with_profile_and_breadcrumbs",
"black_with_breadcrumbs",
"black_simple_with_buttons",
"background_with_sub_text",
"background_with_breadcrumbs"
]
],
[
{
"name": "webapp+table+advance_table",
"totalPages": 1,
"totalComponents": 9
},
[
"table_3",
"compact_table_with_actions_and_select",
"tasks",
"table_5",
"table_4",
"table_2",
"table",
"advance_table_with_filters_search_and_two_level_action_buttons",
"advance_table_with_filters,_actions,_search,_sort_and_expanded_row"
]
],
[
{
"name": "webapp+table+list",
"totalPages": 1,
"totalComponents": 19
},
[
"list_4",
"list_1",
"list_with_stacked_avatars",
"2_col_with_badge",
"simple_list_with_cta",
"simple_list_with_checkbox",
"simple_list",
"list_with_links",
"list_6",
"list_5",
"list_3",
"list_2",
"list",
"folders_list",
"files_list_with_icons",
"expanded_list_with_colored_reminder",
"5_col_with_checkbox",
"4_column_minimal_list_with_alternate_rows",
"4_column_list_with_avatar"
]
],
[
{
"name": "webapp+form+action_panel",
"totalPages": 1,
"totalComponents": 12
},
[
"simple_with_CTA",
"payment_method",
"text_field_and_button",
"simple_with_toggle_on_top",
"simple_with_toggle",
"simple_with_right_aligned_button",
"simple_with_link",
"simple_with_left_aligned_button",
"simple_with_icon_and_outline_button",
"simple_with_icon_and_fill_button",
"simple_action_panel_with_button",
"account_information"
]
],
[
{
"name": "webapp+form+dropdown",
"totalPages": 1,
"totalComponents": 10
},
[
"simple_with_gray_hover",
"simple_with_dots",
"simple_with_seperator",
"simple_with_categories",
"simple_with_account_indigo",
"simple_dropdown_with_icons",
"indigo_with_seperate_chevron",
"indigo_with_indigo_hover",
"dropdown_2",
"dropdown_1"
]
],
[
{
"name": "webapp+form+form_layout",
"totalPages": 1,
"totalComponents": 9
},
[
"simple_form",
"form_card_with_toggles",
"form_card_user_profile",
"form_with_steps",
"form_layout_wizard2",
"form_layout_wizard1",
"form_layout_wizard",
"form_layout",
"form_card_with_inputs"
]
],
[
{
"name": "webapp+form+input_group",
"totalPages": 1,
"totalComponents": 9
},
[
"input_with_label",
"input_with_icon_at_start",
"input_with_select_at_end",
"input_with_select",
"input_with_label_help_text",
"input_with_icon_at_end",
"input_with_help_text",
"input_with_filter",
"input_with_error_success"
]
],
[
{
"name": "webapp+form+sign_in",
"totalPages": 1,
"totalComponents": 7
},
[
"half_page_with_company",
"indigo_full_page",
"half_page_with_image",
"white_full_page",
"sign_in_2",
"sign_in",
"half_page_with_illustration"
]
],
[
{
"name": "webapp+form+toggle_checkbox_radio",
"totalPages": 1,
"totalComponents": 8
},
[
"radio_small",
"checkbox_small",
"toggle_with_border",
"toggle_thin",
"toggle_rounded",
"toggle_rectangle",
"radio_large",
"checkbox_large"
]
],
[
{
"name": "webapp+overlay+modal",
"totalPages": 1,
"totalComponents": 60
},
[
"modal_7",
"modal_6",
"modal_4",
"modal_3",
"modal_2",
"left_aligned_short",
"centre_aligned_file_upload",
"with_text_input",
"modal_9",
"modal_8",
"modal_5",
"modal_13",
"modal_12",
"modal_11",
"modal_10",
"modal_1",
"left_aligned_long",
"left_aligned_form",
"left_aligned_file_upload",
"invoices",
"date_picker",
"centre_aligned_short",
"centre_aligned_long",
"add_user",
"Modal_49",
"Modal_48",
"Modal_47",
"Modal_46",
"Modal_45",
"Modal_44",
"Modal_43",
"Modal_42",
"Modal_41",
"Modal_40",
"Modal_39",
"Modal_38",
"Modal_37",
"Modal_36",
"Modal_35",
"Modal_34",
"Modal_33",
"Modal_32",
"Modal_31",
"Modal_30",
"Modal_29",
"Modal_28",
"Modal_27",
"Modal_26",
"Modal_25",
"Modal_24",
"Modal_23",
"Modal_22",
"Modal_21",
"Modal_20",
"Modal_19",
"Modal_18",
"Modal_17",
"Modal_16",
"Modal_15",
"Modal_14"
]
],
[
{
"name": "webapp+overlay+notification",
"totalPages": 1,
"totalComponents": 20
},
[
"simple_multiple_with_seperator",
"multiple_action_with_avatar_seperator",
"multiple_action",
"avatar_with_multiple_buttons",
"single_action_with_sub_text",
"single_action_with_avatar",
"single_action",
"simple_multiple_action_success",
"simple_multiple_action_info",
"notifications",
"notification_panel",
"notification_2",
"notification_1",
"no_action",
"multiple_action_with_seperator",
"coloured_no_action",
"coloured_multiple_with_separator",
"coloured_multiple_action_with_seperator",
"coloured_multiple_action_2",
"coloured_multiple_action"
]
],
[
{
"name": "webapp+feedback+alert",
"totalPages": 1,
"totalComponents": 16
},
[
"simple_with_action_links_error",
"color_coded_with_icon_info",
"simple_with_action_links_warning",
"simple_with_action_links_success",
"simple_with_action_links_info",
"simple_with_action_button_warning",
"simple_with_action_button_success",
"simple_with_action_button_info",
"simple_with_action_button_error",
"fixed_on_top_warning",
"fixed_on_top_success",
"fixed_on_top_info",
"fixed_on_top_error",
"color_coded_with_icon_warning",
"color_coded_with_icon_success",
"color_coded_with_icon_error"
]
],
[
{
"name": "webapp+UI_element+avatar",
"totalPages": 1,
"totalComponents": 10
},
[
"avatars_circle_stacked",
"avatar_rounded_with_dropdown",
"avatars_rounded_text",
"avatars_rounded_stacked",
"avatars_rounded_image",
"avatars_rounded_active",
"avatars_circle_with_dropdown",
"avatars_circle_text",
"avatars_circle_image",
"avatars_circle_active"
]
],
[
{
"name": "webapp+UI_element+badge",
"totalPages": 1,
"totalComponents": 14
},
[
"small_rounded_fill",
"small_rounded_bullet",
"small_rounded",
"small_rectangle_fill",
"small_rectangle_bullet",
"small_rectangle",
"small_large_rounded_with_cancel",
"small_large_rectangle_with_cancel",
"large_rounded_fill",
"large_rounded_bullet",
"large_rounded",
"large_rectangle_fill",
"large_rectangle_bullet",
"large_rectangle"
]
],
[
{
"name": "webapp+UI_element+button",
"totalPages": 1,
"totalComponents": 7
},
[
"button_medium",
"button_small",
"button_regular",
"button_medium_large",
"button_large",
"button_extra_small",
"button_extra_large"
]
],
[
{
"name": "webapp+UI_element+grouped_button",
"totalPages": 1,
"totalComponents": 5
},
[
"filter-1",
"with_filter",
"with_dropdown",
"with_chevrons",
"filter-2"
]
],
[
{
"name": "webapp+UI_element+popover",
"totalPages": 1,
"totalComponents": 8
},
[
"simple_popover",
"popover_with_data",
"text_only_definition",
"popover_with_scrolling_avatar_and_list",
"popover_with_list_and_actions",
"popover_with_data_and_buttons",
"popover2",
"popover1"
]
],
[
{
"name": "webapp+UI_element+progress_bar",
"totalPages": 1,
"totalComponents": 15
},
[
"thin_with_steps",
"thin_with_sub_text",
"thin_with_progress_and_eta",
"thin_with_divided_steps",
"thin_vertical_grouped",
"thin_simple",
"small_circle",
"progress_bar",
"large_with_steps",
"large_circle_with_sub_text",
"broad_with_sub_text",
"broad_with_progress_and_eta",
"broad_with_divided_steps",
"broad_vertical_grouped",
"broad_simple"
]
],
[
{
"name": "webapp+UI_element+tooltip",
"totalPages": 1,
"totalComponents": 4
},
[
"with_steps_alternate",
"with_multiple_cta_alternate",
"with_cta",
"text_only"
]
],
[
{
"name": "webapp+calendar+calendar",
"totalPages": 1,
"totalComponents": 4
},
[
"calendar_with_stretched_task",
"calendar_1",
"date_picker",
"calendar_2"
]
],
[
{
"name": "webapp+graph+graph",
"totalPages": 1,
"totalComponents": 3
},
[
"pie_chart",
"line_graph",
"bar_charts"
]
],
[
{
"name": "webapp+note+note",
"totalPages": 1,
"totalComponents": 4
},
[
"4_by_3_multiple_styled_cards",
"note_1",
"note",
"3_by_3_kanban_board"
]
],
[
{
"name": "webapp+master_layout+boxed_layout",
"totalPages": 1,
"totalComponents": 17
},
[
"light_with_Grey_background",
"dark_with_border_above_page_title",
"light_with_white_page_title_grey_bg",
"light_with_white_bg",
"light_with_tabs_noshadow",
"light_with_tabs",
"light_with_dark_page_title_grey_bg_and_breadcrumbs",
"light_with_dark_page_title_grey_bg",
"light_with_dark_page_title_and_white_box",
"light_with_bg_image_in_page_title",
"dark_with_white_page_title_and_grey_bg",
"dark_with_tabs_on_grey_bg",
"dark_with_boxed_tabs_and_white_box",
"dark_with_bg_image_in_page_title",
"boxed_layout",
"bg_image_in_header",
"Dark_with_tabs"
]
],
[
{
"name": "webapp+master_layout+sidebar_layout",
"totalPages": 1,
"totalComponents": 6
},
[
"light_with_icons_at_bottom",
"light_with_header_and_indicator",
"sidebar_1",
"sidebar",
"light_with_icons_at_bottom_alternate_style",
"light_with_header_and_icons"
]
],
[
{
"name": "webapp+layout+card",
"totalPages": 1,
"totalComponents": 8
},
[
"full_width_with_right_grey",
"full_width_divided_into_three",
"simple_with_white_footer",
"full_width_with_left_grey",
"full_width_white",
"full_width_divided_by_right_and_bottom_grey",
"6_col_with_grey_top_and_grey_bottom",
"6_col_divided_in_half_left_and_right"
]
],
[
{
"name": "webapp+layout+grid",
"totalPages": 1,
"totalComponents": 11
},
[
"4_x_4_x_4_col_grid",
"3_x_3_x_3_x_3_col_grid",
"9_x_3_col_grid",
"8_x_4_col_grid",
"7_x_5_col_grid",
"6_x_6_col_grid",
"5_x_7_col_grid",
"3_x_9_col_grid",
"2_x_10_col_grid",
"12_col_grid",
"10_x_2_col_grid"
]
],
[
{
"name": "webapp+layout+grid_card",
"totalPages": 1,
"totalComponents": 169
},
[
"stats",
"profile_summary",
"full_width_3_section_card",
"card_116",
"card_115",
"card_1",
"full_width_user_profile_card",
"full_width_event_card",
"full_width_3_section_project_card",
"card_91",
"card_9",
"card_8",
"card_79",
"card_7",
"card_54",
"card_4",
"card_30",
"card_3",
"card_29",
"card_27",
"card_24",
"card_110",
"4_col_stat_cards",
"ticket_with_barcode",
"task_card_with_right_aligned_button",
"stats_card_1",
"stats_average",
"stats_2",
"stats_1",
"single_card_with_title_and_description",
"single_card_with_stacked_avatars",
"single_card_with_date_and_time",
"simple_with_heading_and_2_buttons",
"profile_summary_2",
"medium_stat_cards_with_icon",
"medium_stat_cards_alternate_style",
"medium_stat_cards",
"host",
"grid_card_2",
"grid_card",
"graph_with_controls",
"full_width_table_with_tabs",
"full_width_project_card",
"full_width_card_with_right_aligned_icons",
"event_card_1",
"description_list",
"content_card",
"compose_task_card",
"compose_note_card",
"compact_stat_cards_alternate_style",
"compact_stat_cards",
"chart_card",
"card_99",
"card_98",
"card_97",
"card_96",
"card_95",
"card_94",
"card_93",
"card_92",
"card_90",
"card_89",
"card_88",
"card_87",
"card_86",
"card_85",
"card_84",
"card_83",
"card_82",
"card_81",
"card_80",
"card_78",
"card_77",
"card_76",
"card_75",
"card_74",
"card_73",
"card_72",
"card_71",
"card_70",
"card_69",
"card_68",
"card_67",
"card_66",
"card_65",
"card_64",
"card_63",
"card_62",
"card_61",
"card_60",
"card_6",
"card_59",
"card_58",
"card_57",
"card_56",
"card_55",
"card_53",
"card_52",
"card_51",
"card_50",
"card_5",
"card_49",
"card_48",
"card_47",
"card_46",
"card_45",
"card_44",
"card_43",
"card_42",
"card_41",
"card_40",
"card_39",
"card_38",
"card_37",
"card_36",
"card_34",
"card_33",
"card_31",
"card_28",
"card_26",
"card_25",
"card_23",
"card_22",
"card_21",
"card_20",
"card_2",
"card_19",
"card_18",
"card_17",
"card_16",
"card_15",
"card_14",
"card_13",
"card_121",
"card_120",
"card_12",
"card_119",
"card_118",
"card_117",
"card_114",
"card_113",
"card_112",
"card_111",
"card_11",
"card_109",
"card_108",
"card_107",
"card_106",
"card_105",
"card_104",
"card_103",
"card_102",
"card_101",
"card_100",
"card_10",
"8_col_user_profile_card",
"8_col_listing_with_search_and_filter",
"8_col_listing_card_with_stats_and_filters",
"8_col_listing_card_with_action_button",
"6_col_simple_listing_card",
"6_col_listing_card_with_toggles",
"6_col_listing_card",
"4_col_user_profile_card",
"4_col_listing_card_with_action_icons",
"3_col_user_profile_card",
"3_col_stats_card",
"3_col_list_card_with_action_buttons",
"3_col_list_card",
"3_col_data_card"
]
],
[
{
"name": "webapp+navigation+horizontal_navigation",
"totalPages": 1,
"totalComponents": 12
},
[
"light_with_button",
"black_left_aligned_with_icons",
"left_aligned_with_icons",
"light_with_nav_flushed_left",
"light_centre_aligned_with_search icon_and_avatar",
"left_aligned_with_search_bar_and_icon",
"horizontal_navigation_1",
"horizontal_navigation",
"dark_with_nav_flushed_left",
"dark_centre_aligned_with_search icon_and_avatar",
"black_simple_with_icons",
"black_left_aligned_with_search_bar_and_icon"
]
],
[
{
"name": "webapp+navigation+header",
"totalPages": 1,
"totalComponents": 6
},
[
"simple_with_category_dropdown",
"page_heading",
"header_4",
"header_3",
"header_2",
"header_1"
]
],
[
{
"name": "webapp+navigation+pagination",
"totalPages": 1,
"totalComponents": 9
},
[
"dots_arrows",
"stepper",
"standard_arrows",
"pagination_3",
"pagination_2",
"pagination",
"numbers_arrows_block",
"jump_to",
"first_last"
]
],
[
{
"name": "webapp+navigation+tab",
"totalPages": 1,
"totalComponents": 8
},
[
"tab",
"white_bg_active_gray",
"tab_with_icons",
"tab_2",
"indigo_block_gray_bg",
"gray_bg_active_white",
"active_indigo",
"4_tabs_with_counter"
]
],
[
{
"name": "webapp+navigation+vertical_navigation",
"totalPages": 1,
"totalComponents": 21
},
[
"dark_theme_with_light_icons",
"with_search_bar_and_bottom_controls_and_avatar",
"with_search_bar_and_bottom_controls",
"vertical_navigation_3",
"vertical_navigation_2",
"vertical_navigation_1",
"vertical_navigation",
"simple_with_notifications",
"sidebar_9",
"sidebar_8",
"sidebar_7",
"sidebar_6",
"sidebar_5",
"sidebar_4",
"sidebar_3",
"sidebar_2",
"sidebar_1",
"sidebar",
"home_navbar",
"chat",
"2_column_with_icon_active"
]
],
[
{
"name": "webapp+heading+card_heading",
"totalPages": 1,
"totalComponents": 9
},
[
"with_avatar_and_buttons",
"sub_text_with_button",
"tabs_on_bottom",
"simple_with_sub_text",
"simple_with_button",
"simple",
"right_aligned_toggle",
"indigo_tabs_on_right",
"grey_tabs_on_right"
]
],
[
{
"name": "webapp+heading+page_heading",
"totalPages": 1,
"totalComponents": 10
},
[
"simple_with_sub_text_and_border",
"simple_with_breadcrumbs",
"simple_with_buttons",
"grey_with_breadcrumbs",
"black_with_sub_text",
"black_with_profile_and_breadcrumbs",
"black_with_breadcrumbs",
"black_simple_with_buttons",
"background_with_sub_text",
"background_with_breadcrumbs"
]
],
[
{
"name": "webapp+table+advance_table",
"totalPages": 1,
"totalComponents": 9
},
[
"table_3",
"compact_table_with_actions_and_select",
"tasks",
"table_5",
"table_4",
"table_2",
"table",
"advance_table_with_filters_search_and_two_level_action_buttons",
"advance_table_with_filters,_actions,_search,_sort_and_expanded_row"
]
],
[
{
"name": "webapp+table+list",
"totalPages": 1,
"totalComponents": 19
},
[
"list_4",
"list_1",
"list_with_stacked_avatars",
"2_col_with_badge",
"simple_list_with_cta",
"simple_list_with_checkbox",
"simple_list",
"list_with_links",
"list_6",
"list_5",
"list_3",
"list_2",
"list",
"folders_list",
"files_list_with_icons",
"expanded_list_with_colored_reminder",
"5_col_with_checkbox",
"4_column_minimal_list_with_alternate_rows",
"4_column_list_with_avatar"
]
],
[
{
"name": "webapp+form+action_panel",
"totalPages": 1,
"totalComponents": 12
},
[
"simple_with_CTA",
"payment_method",
"text_field_and_button",
"simple_with_toggle_on_top",
"simple_with_toggle",
"simple_with_right_aligned_button",
"simple_with_link",
"simple_with_left_aligned_button",
"simple_with_icon_and_outline_button",
"simple_with_icon_and_fill_button",
"simple_action_panel_with_button",
"account_information"
]
],
[
{
"name": "webapp+form+dropdown",
"totalPages": 1,
"totalComponents": 10
},
[
"simple_with_gray_hover",
"simple_with_dots",
"simple_with_seperator",
"simple_with_categories",
"simple_with_account_indigo",
"simple_dropdown_with_icons",
"indigo_with_seperate_chevron",
"indigo_with_indigo_hover",
"dropdown_2",
"dropdown_1"
]
],
[
{
"name": "webapp+form+form_layout",
"totalPages": 1,
"totalComponents": 9
},
[
"simple_form",
"form_card_with_toggles",
"form_card_user_profile",
"form_with_steps",
"form_layout_wizard2",
"form_layout_wizard1",
"form_layout_wizard",
"form_layout",
"form_card_with_inputs"
]
],
[
{
"name": "webapp+form+input_group",
"totalPages": 1,
"totalComponents": 9
},
[
"input_with_label",
"input_with_icon_at_start",
"input_with_select_at_end",
"input_with_select",
"input_with_label_help_text",
"input_with_icon_at_end",
"input_with_help_text",
"input_with_filter",
"input_with_error_success"
]
],
[
{
"name": "webapp+form+sign_in",
"totalPages": 1,
"totalComponents": 7
},
[
"half_page_with_company",
"indigo_full_page",
"half_page_with_image",
"white_full_page",
"sign_in_2",
"sign_in",
"half_page_with_illustration"
]
],
[
{
"name": "webapp+form+toggle_checkbox_radio",
"totalPages": 1,
"totalComponents": 8
},
[
"radio_small",
"checkbox_small",
"toggle_with_border",
"toggle_thin",
"toggle_rounded",
"toggle_rectangle",
"radio_large",
"checkbox_large"
]
],
[
{
"name": "webapp+overlay+modal",
"totalPages": 1,
"totalComponents": 60
},
[
"modal_7",
"modal_6",
"modal_4",
"modal_3",
"modal_2",
"left_aligned_short",
"centre_aligned_file_upload",
"with_text_input",
"modal_9",
"modal_8",
"modal_5",
"modal_13",
"modal_12",
"modal_11",
"modal_10",
"modal_1",
"left_aligned_long",
"left_aligned_form",
"left_aligned_file_upload",
"invoices",
"date_picker",
"centre_aligned_short",
"centre_aligned_long",
"add_user",
"Modal_49",
"Modal_48",
"Modal_47",
"Modal_46",
"Modal_45",
"Modal_44",
"Modal_43",
"Modal_42",
"Modal_41",
"Modal_40",
"Modal_39",
"Modal_38",
"Modal_37",
"Modal_36",
"Modal_35",
"Modal_34",
"Modal_33",
"Modal_32",
"Modal_31",
"Modal_30",
"Modal_29",
"Modal_28",
"Modal_27",
"Modal_26",
"Modal_25",
"Modal_24",
"Modal_23",
"Modal_22",
"Modal_21",
"Modal_20",
"Modal_19",
"Modal_18",
"Modal_17",
"Modal_16",
"Modal_15",
"Modal_14"
]
],
[
{
"name": "webapp+overlay+notification",
"totalPages": 1,
"totalComponents": 20
},
[
"simple_multiple_with_seperator",
"multiple_action_with_avatar_seperator",
"multiple_action",
"avatar_with_multiple_buttons",
"single_action_with_sub_text",
"single_action_with_avatar",
"single_action",
"simple_multiple_action_success",
"simple_multiple_action_info",
"notifications",
"notification_panel",
"notification_2",
"notification_1",
"no_action",
"multiple_action_with_seperator",
"coloured_no_action",
"coloured_multiple_with_separator",
"coloured_multiple_action_with_seperator",
"coloured_multiple_action_2",
"coloured_multiple_action"
]
],
[
{
"name": "webapp+feedback+alert",
"totalPages": 1,
"totalComponents": 16
},
[
"simple_with_action_links_error",
"color_coded_with_icon_info",
"simple_with_action_links_warning",
"simple_with_action_links_success",
"simple_with_action_links_info",
"simple_with_action_button_warning",
"simple_with_action_button_success",
"simple_with_action_button_info",
"simple_with_action_button_error",
"fixed_on_top_warning",
"fixed_on_top_success",
"fixed_on_top_info",
"fixed_on_top_error",
"color_coded_with_icon_warning",
"color_coded_with_icon_success",
"color_coded_with_icon_error"
]
],
[
{
"name": "webapp+UI_element+avatar",
"totalPages": 1,
"totalComponents": 10
},
[
"avatars_circle_stacked",
"avatar_rounded_with_dropdown",
"avatars_rounded_text",
"avatars_rounded_stacked",
"avatars_rounded_image",
"avatars_rounded_active",
"avatars_circle_with_dropdown",
"avatars_circle_text",
"avatars_circle_image",
"avatars_circle_active"
]
],
[
{
"name": "webapp+UI_element+badge",
"totalPages": 1,
"totalComponents": 14
},
[
"small_rounded_fill",
"small_rounded_bullet",
"small_rounded",
"small_rectangle_fill",
"small_rectangle_bullet",
"small_rectangle",
"small_large_rounded_with_cancel",
"small_large_rectangle_with_cancel",
"large_rounded_fill",
"large_rounded_bullet",
"large_rounded",
"large_rectangle_fill",
"large_rectangle_bullet",
"large_rectangle"
]
],
[
{
"name": "webapp+UI_element+button",
"totalPages": 1,
"totalComponents": 7
},
[
"button_medium",
"button_small",
"button_regular",
"button_medium_large",
"button_large",
"button_extra_small",
"button_extra_large"
]
],
[
{
"name": "webapp+UI_element+grouped_button",
"totalPages": 1,
"totalComponents": 5
},
[
"filter-1",
"with_filter",
"with_dropdown",
"with_chevrons",
"filter-2"
]
],
[
{
"name": "webapp+UI_element+popover",
"totalPages": 1,
"totalComponents": 8
},
[
"simple_popover",
"popover_with_data",
"text_only_definition",
"popover_with_scrolling_avatar_and_list",
"popover_with_list_and_actions",
"popover_with_data_and_buttons",
"popover2",
"popover1"
]
],
[
{
"name": "webapp+UI_element+progress_bar",
"totalPages": 1,
"totalComponents": 15
},
[
"thin_with_steps",
"thin_with_sub_text",
"thin_with_progress_and_eta",
"thin_with_divided_steps",
"thin_vertical_grouped",
"thin_simple",
"small_circle",
"progress_bar",
"large_with_steps",
"large_circle_with_sub_text",
"broad_with_sub_text",
"broad_with_progress_and_eta",
"broad_with_divided_steps",
"broad_vertical_grouped",
"broad_simple"
]
],
[
{
"name": "webapp+UI_element+tooltip",
"totalPages": 1,
"totalComponents": 4
},
[
"with_steps_alternate",
"with_multiple_cta_alternate",
"with_cta",
"text_only"
]
],
[
{
"name": "webapp+calendar+calendar",
"totalPages": 1,
"totalComponents": 4
},
[
"calendar_with_stretched_task",
"calendar_1",
"date_picker",
"calendar_2"
]
],
[
{
"name": "webapp+graph+graph",
"totalPages": 1,
"totalComponents": 3
},
[
"pie_chart",
"line_graph",
"bar_charts"
]
],
[
{
"name": "webapp+note+note",
"totalPages": 1,
"totalComponents": 4
},
[
"4_by_3_multiple_styled_cards",
"note_1",
"note",
"3_by_3_kanban_board"
]
]
]
this is our final object based on that we will build tree and i hope this will work out
That's great. Looking forward to your update on the resource
 

flamingass

Well-known member
TutFlixer
Jan 13, 2021
221
5,086
52
localghost
@daominhsangvn @Anas Hameed

I know there are lots of FrontEnd folks on the forum who leave and breathe UI design. And they might possibly lol at this comment. But as a backend guy, I can't develop neat webpages(without copying everything from colorlb). If I bang my head and try, they end up looking ugly enough to drain me off any interest in finishing the side learning projects I begin.

Just taking a moment to genuinely thank you both for your collaborated efforts!! I'm certain the resource you shared will collectively save us tons of development hours, and the associated headache of trying to center a div. Thanks a lot!!
 

joony786

Premium User
Premium
TutFlixer
Nov 25, 2020
130
12,850
52
Pakistan
@daominhsangvn @Anas Hameed

I know there are lots of FrontEnd folks on the forum who leave and breathe UI design. And they might possibly lol at this comment. But as a backend guy, I can't develop neat webpages(without copying everything from colorlb). If I bang my head and try, they end up looking ugly enough to drain me off any interest in finishing the side learning projects I begin.

Just taking a moment to genuinely thank you both for your collaborated efforts!! I'm certain the resource you shared will collectively save us tons of development hours, and the associated headache of trying to center a div. Thanks a lot!!
np mate! cheers
 

Latest resources