This library is a collection of React components developed using TypeScript, designed to bring back the nostalgic look of Windows 98 to your web applications. See more on GitHub.
This is a regular <Button /> component, you can pass strings and Icon components as its children.
import Button from "./components/Button/Button"; import SmileIcon from "./components/Icons/utopia_smiley.png"; <Button> {"Click me! "} <img src={SmileIcon} alt="smile windows 98 icon" /> </Button>;
The element size varies depending on its children.
import Button from "./components/Button/Button"; <Button>This is a larger button</Button> <Button>Hi!</Button>
You can pass it a `disabled` prop.
import Button from "./components/Button/Button"; <Button disabled>Don't even try</Button>;
You can pass it an id and a event handler function for click events.
import Button from "./components/Button/Button"; <Button id="idExample" clickEventHandler={ ( ) => changeContent( ) } > {buttonContent} </Button>;
You can use any Windows 98 icon and put it anywhere, like this!
You need to import the icon with the name you want to use. Then use that name as the source for the <img /> tag.
import SmileIcon from "./components/Icons/utopia_smiley.png"; import Typography from "./components/Typography/Typography"; <Typography white> You can use any Windows 98 icon and put it anywhere, like this! <img src={SmileIcon} alt="smile windows 98 icon" /> </Typography>;
Here you will find all the Windows 98 icons with each name to import them:
ac_plug-0.png
ac_plug-1.png
accesibility_window_abc.png
access_wheelchair_big.png
accessibility-0.png
accessibility-1.png
accessibility-2.png
accessibility-3.png
accessibility-4.png
accessibility-5.png
accessibility_big_keys.png
accessibility_contrast.png
accessibility_kbd_mouse.png
accessibility_key_pointer.png
accessibility_stopwatch.png
accessibility_toggle.png
accessibility_toggle2.png
accessibility_toggle3.png
accessibility_two_windows.png
accessibility_window_objs.png
accessibility_window_signal.png
accessibility_window_speak.png
active_movie-0.png
active_movie-1.png
address_book-0.png
address_book-1.png
address_book_card.png
address_book_card_copy-0.png
address_book_card_copy-1.png
address_book_card_users.png
address_book_cards.png
address_book_copy.png
address_book_home.png
address_book_pad.png
address_book_pad_users.png
address_book_user.png
address_book_users.png
amplify.png
application_hammer_grouppol-0.png
application_hammer_grouppol-1.png
application_hourglass-0.png
application_hourglass-1.png
application_hourglass_small-0.png
application_hourglass_small-1.png
application_hourglass_small-2.png
application_hourglass_small-3.png
application_hourglass_small-4.png
application_hourglass_small-5.png
application_hourglass_small_cool-0.png
application_hourglass_small_cool-1.png
application_hourglass_small_cool-2.png
application_hourglass_small_cool-3.png
application_hourglass_small_cool-4.png
application_hourglass_small_cool-5.png
appwiz_file-0.png
appwiz_file-1.png
appwizard-0.png
appwizard-1.png
appwizard-2.png
appwizard-3.png
appwizard-4.png
appwizard-5.png
appwizard_list.png
audio_compression-0.png
audio_compression-1.png
backup_devices.png
backup_devices_2-0.png
backup_devices_2-1.png
bar_graph-0.png
bar_graph-1.png
bar_graph_default-0.png
bar_graph_default-1.png
battery.png
battery_alt-0.png
battery_alt-1.png
briefcase-0.png
briefcase-1.png
briefcase-2.png
briefcase-3.png
briefcase-4.png
briefcase-5.png
c_clamp-0.png
c_clamp-1.png
cable-0.png
cable-1.png
cable_2-0.png
cable_2-1.png
cable_3-0.png
cable_3-1.png
calculator-0.png
calculator-1.png
calendar-0.png
calendar-1.png
calendar-2.png
calendar-3.png
calendar-4.png
calendar-5.png
calendar2.png
camera-0.png
camera-1.png
camera-2.png
camera-3.png
camera3-0.png
camera3-1.png
camera3-2.png
camera3-3.png
camera3-4.png
camera3-5.png
camera3_network-0.png
camera3_network-1.png
camera3_network-2.png
camera3_network-3.png
camera3_network-4.png
camera3_network-5.png
camera3_plus-0.png
camera3_plus-1.png
camera3_plus-2.png
camera3_plus-3.png
camera3_plus-4.png
camera3_plus-5.png
camera3_vid-0.png
camera3_vid-1.png
camera3_vid-2.png
camera3_vid-3.png
camera3_vid-4.png
camera3_vid-5.png
camera_2-0.png
camera_2-1.png
camera_vid-0.png
camera_vid-1.png
camera_vid_ms-0.png
camera_vid_ms-1.png
card_reader-0.png
card_reader-1.png
card_reader-2.png
card_reader-3.png
card_reader_empty-0.png
card_reader_empty-1.png
card_reader_empty-2.png
card_reader_empty-3.png
card_reader_not-0.png
card_reader_not-1.png
card_reader_not-2.png
card_reader_not-3.png
card_reader_question-0.png
card_reader_question-1.png
card_reader_question-2.png
card_reader_question-3.png
card_reader_restr-0.png
card_reader_restr-1.png
card_reader_restr-2.png
card_reader_restr-3.png
cardfile-0.png
cardfile-1.png
cassette_tape-0.png
cassette_tape-1.png
catalog-0.png
catalog-1.png
catalog_excl-0.png
catalog_excl-1.png
catalog_no-0.png
catalog_no-1.png
cd_audio_cd-0.png
cd_audio_cd-1.png
cd_audio_cd-2.png
cd_audio_cd_a-0.png
cd_audio_cd_a-1.png
cd_audio_cd_a-2.png
cd_audio_cd_a-3.png
cd_audio_cd_a-4.png
cd_audio_cd_a-5.png
cd_drive-0.png
cd_drive-1.png
cd_drive-2.png
cd_drive-3.png
cd_drive-4.png
cd_drive-5.png
cd_drive_purple-0.png
cd_drive_purple-1.png
cd_drive_purple-2.png
cd_drive_purple-3.png
cd_drive_purple-4.png
cd_drive_purple-5.png
certificate-0.png
certificate-1.png
certificate_2-0.png
certificate_2-1.png
certificate_2_excl-0.png
certificate_2_excl-1.png
certificate_2_no-0.png
certificate_2_no-1.png
certificate_3-0.png
certificate_3-1.png
certificate_application-0.png
certificate_application-1.png
certificate_checklist-0.png
certificate_checklist-1.png
certificate_envelope_key-0.png
certificate_envelope_key-1.png
certificate_excl-0.png
certificate_excl-1.png
certificate_gear.png
certificate_multiple-0.png
certificate_multiple-1.png
certificate_no-0.png
certificate_no-1.png
certificate_red_line-0.png
certificate_red_line-1.png
certificate_seal.png
certificate_seal_lock-0.png
certificate_seal_lock-1.png
certificate_server-0.png
certificate_server-1.png
channels-0.png
channels-1.png
channels-2.png
channels-3.png
channels-4.png
channels-5.png
channels_file-0.png
channels_file-1.png
channels_file-2.png
channels_file-3.png
channels_file-4.png
channels_file-5.png
charmap-0.png
charmap-1.png
charmap_w2k-0.png
charmap_w2k-1.png
chart1-0.png
chart1-1.png
chart1-2.png
chart1-3.png
chart1-4.png
chart1-5.png
check-0.png
check-1.png
chip_ramdrive-0.png
chip_ramdrive-1.png
chip_ramdrive-2.png
chip_ramdrive-3.png
chip_ramdrive-4.png
chip_ramdrive-5.png
chm-0.png
chm-1.png
chm-2.png
circle_question-0.png
circle_question-1.png
clean_drive-0.png
clean_drive-1.png
clean_drive-2.png
clean_drive-3.png
clean_drive-4.png
clean_drive-5.png
clock-0.png
clock-1.png
color_profile-0.png
color_profile-1.png
color_profile_gray-0.png
color_profile_gray-1.png
computer-0.png
computer-1.png
computer-2.png
computer-3.png
computer-4.png
computer-5.png
computer_2-0.png
computer_2-1.png
computer_2-2.png
computer_2-3.png
computer_2-4.png
computer_2-5.png
computer_2_cool-0.png
computer_2_cool-1.png
computer_2_cool-2.png
computer_2_cool-3.png
computer_2_cool-4.png
computer_2_cool-5.png
computer_explorer-0.png
computer_explorer-1.png
computer_explorer-2.png
computer_explorer-3.png
computer_explorer-4.png
computer_explorer-5.png
computer_explorer_2k-0.png
computer_explorer_2k-1.png
computer_explorer_2k-2.png
computer_explorer_2k-3.png
computer_explorer_2k-4.png
computer_explorer_2k-5.png
computer_explorer_cool-0.png
computer_explorer_cool-1.png
computer_explorer_cool-2.png
computer_explorer_cool-3.png
computer_explorer_cool-4.png
computer_explorer_cool-5.png
computer_gear.png
computer_musical_keyboard-0.png
computer_musical_keyboard-1.png
computer_musical_keyboard-2.png
computer_padlock.png
computer_search-0.png
computer_search-1.png
computer_search-2.png
computer_search-3.png
computer_sound-0.png
computer_sound-1.png
computer_sound-2.png
computer_sound-3.png
computer_sound-4.png
computer_sound-5.png
computer_taskmgr-0.png
computer_taskmgr-1.png
computer_user_pencil-0.png
computer_user_pencil-1.png
computer_win.png
computer_win_lock-0.png
computer_win_lock-1.png
conn_cloud.png
conn_cloud_ok.png
conn_dialup.png
conn_dialup_alt.png
conn_dialup_ok.png
conn_dialup_recbin_phone.png
conn_dialup_recbin_phones.png
conn_network_no_phone.png
conn_pcs_no_network.png
conn_pcs_off_off.png
conn_pcs_off_on.png
conn_pcs_on_off.png
conn_pcs_on_on.png
connected_world-0.png
connected_world-1.png
console_prompt-0.png
console_prompt-1.png
cylinder_database-0.png
cylinder_database-1.png
defragment-0.png
defragment-1.png
desktop-0.png
desktop-1.png
desktop-2.png
desktop-3.png
desktop-4.png
desktop-5.png
desktop_old-0.png
desktop_old-1.png
desktop_old-2.png
desktop_old-3.png
desktop_old-4.png
desktop_old-5.png
desktop_w95-0.png
desktop_w95-1.png
device_rhombic_chip.png
direct_cable_conn-0.png
direct_cable_conn-1.png
directory_admin_tools-0.png
directory_admin_tools-1.png
directory_admin_tools-2.png
directory_admin_tools-3.png
directory_admin_tools-4.png
directory_admin_tools-5.png
directory_business_calendar-0.png
directory_business_calendar-1.png
directory_business_calendar-2.png
directory_business_calendar-3.png
directory_business_calendar-4.png
directory_business_calendar-5.png
directory_channels-0.png
directory_channels-1.png
directory_channels-2.png
directory_channels-3.png
directory_channels-4.png
directory_channels-5.png
directory_check-0.png
directory_check-1.png
directory_check-2.png
directory_check-3.png
directory_closed-0.png
directory_closed-1.png
directory_closed-2.png
directory_closed-3.png
directory_closed-4.png
directory_closed-5.png
directory_closed_cool-0.png
directory_closed_cool-1.png
directory_closed_cool-2.png
directory_closed_cool-3.png
directory_closed_cool-4.png
directory_closed_cool-5.png
directory_closed_history-0.png
directory_closed_history-1.png
directory_closed_history-2.png
directory_closed_history-3.png
directory_closed_history-4.png
directory_closed_history-5.png
directory_computer-0.png
directory_computer-1.png
directory_computer-2.png
directory_computer-3.png
directory_control_panel-0.png
directory_control_panel-1.png
directory_control_panel-2.png
directory_control_panel-3.png
directory_control_panel-4.png
directory_control_panel-5.png
directory_control_panel_cool-0.png
directory_control_panel_cool-1.png
directory_control_panel_cool-2.png
directory_control_panel_cool-3.png
directory_control_panel_cool-4.png
directory_control_panel_cool-5.png
directory_dial_up_networking-0.png
directory_dial_up_networking-1.png
directory_dial_up_networking-2.png
directory_dial_up_networking-3.png
directory_dial_up_networking-4.png
directory_dial_up_networking-5.png
directory_dial_up_networking_cool-0.png
directory_dial_up_networking_cool-1.png
directory_dial_up_networking_cool-2.png
directory_dial_up_networking_cool-3.png
directory_dial_up_networking_cool-4.png
directory_dial_up_networking_cool-5.png
directory_e-0.png
directory_e-1.png
directory_e-2.png
directory_e-3.png
directory_e-4.png
directory_e-5.png
directory_e_open-0.png
directory_e_open-1.png
directory_explorer-0.png
directory_explorer-1.png
directory_explorer-2.png
directory_explorer-3.png
directory_explorer-4.png
directory_explorer-5.png
directory_favorites-0.png
directory_favorites-1.png
directory_favorites-2.png
directory_favorites-3.png
directory_favorites-4.png
directory_favorites-5.png
directory_favorites_small-0.png
directory_favorites_small-1.png
directory_favorites_small-2.png
directory_favorites_small-3.png
directory_favorites_small-4.png
directory_favorites_small-5.png
directory_folder_options-0.png
directory_folder_options-1.png
directory_folder_options-2.png
directory_folder_options-3.png
directory_folder_options-4.png
directory_folder_options-5.png
directory_fonts-0.png
directory_fonts-1.png
directory_fonts-2.png
directory_fonts-3.png
directory_fonts-4.png
directory_fonts-5.png
directory_fonts_cool-0.png
directory_fonts_cool-1.png
directory_fonts_cool-2.png
directory_fonts_cool-3.png
directory_fonts_cool-4.png
directory_fonts_cool-5.png
directory_fonts_shortcut-0.png
directory_fonts_shortcut-1.png
directory_fonts_shortcut-2.png
directory_fonts_shortcut-3.png
directory_fonts_shortcut-4.png
directory_fonts_shortcut-5.png
directory_movie-0.png
directory_movie-1.png
directory_movie-2.png
directory_movie-3.png
directory_movie-4.png
directory_movie-5.png
directory_net_web-0.png
directory_net_web-1.png
directory_net_web-2.png
directory_net_web-3.png
directory_net_web-4.png
directory_net_web-5.png
directory_network_conn-0.png
directory_network_conn-1.png
directory_network_conn-2.png
directory_network_conn-3.png
directory_network_conn-4.png
directory_network_conn-5.png
directory_network_conn_shortcut-0.png
directory_network_conn_shortcut-1.png
directory_network_conn_shortcut-2.png
directory_network_conn_shortcut-3.png
directory_network_conn_shortcut-4.png
directory_network_conn_shortcut-5.png
directory_open_cabinet-0.png
directory_open_cabinet-1.png
directory_open_cabinet_fc-0.png
directory_open_cabinet_fc-1.png
directory_open_cabinet_fc-2.png
directory_open_cabinet_fc-3.png
directory_open_cool-0.png
directory_open_cool-1.png
directory_open_cool-2.png
directory_open_cool-3.png
directory_open_cool-4.png
directory_open_cool-5.png
directory_open_file_mydocs-0.png
directory_open_file_mydocs-1.png
directory_open_file_mydocs-2.png
directory_open_file_mydocs-3.png
directory_open_file_mydocs-4.png
directory_open_file_mydocs-5.png
directory_open_file_mydocs_2k-0.png
directory_open_file_mydocs_2k-1.png
directory_open_file_mydocs_2k-2.png
directory_open_file_mydocs_2k-3.png
directory_open_file_mydocs_2k-4.png
directory_open_file_mydocs_2k-5.png
directory_open_file_mydocs_cool-0.png
directory_open_file_mydocs_cool-1.png
directory_open_file_mydocs_cool-2.png
directory_open_file_mydocs_cool-3.png
directory_open_file_mydocs_cool-4.png
directory_open_file_mydocs_cool-5.png
directory_open_file_mydocs_small-0.png
directory_open_file_mydocs_small-1.png
directory_open_file_mydocs_small-2.png
directory_open_file_mydocs_small-3.png
directory_open_file_mydocs_small-4.png
directory_open_file_mydocs_small-5.png
directx.png
directx_alt-0.png
directx_alt-1.png
diskettes_copy-0.png
diskettes_copy-1.png
display_properties-0.png
display_properties-1.png
display_properties-2.png
display_properties-3.png
display_properties-4.png
display_properties-5.png
doctor_watson.png
document-0.png
document-1.png
download.png
drum_onestick.png
eject_pc.png
eject_pc_2.png
eject_pc_cool-0.png
eject_pc_cool-1.png
eject_pc_cool-2.png
eject_pc_cool-3.png
eject_pc_cool-4.png
eject_pc_cool-5.png
eject_pc_shell32-0.png
eject_pc_shell32-1.png
eject_pc_shell32-2.png
eject_pc_shell32-3.png
eject_pc_shell32-4.png
eject_pc_shell32-5.png
entire_network_globe-0.png
entire_network_globe-1.png
entire_network_globe-2.png
entire_network_globe-3.png
entire_network_globe-4.png
entire_network_globe-5.png
envelope_closed-0.png
envelope_closed-1.png
envelope_open_sheet-0.png
envelope_open_sheet-1.png
erase_file-0.png
erase_file-1.png
event_log.png
executable-0.png
executable-1.png
executable_gear-0.png
executable_gear-1.png
executable_script-0.png
executable_script-1.png
executable_sound-0.png
executable_sound-1.png
expand_hierarchial_array-0.png
expand_hierarchial_array-1.png
expand_hierarchial_array-2.png
expansion_board-0.png
expansion_board-1.png
expansion_board_modem-0.png
expansion_board_modem-1.png
fax_machine-0.png
fax_machine-1.png
fax_machine_exclam-0.png
fax_machine_exclam-1.png
fax_machine_paperstack-0.png
fax_machine_paperstack-1.png
file_blue_grad_paint-0.png
file_blue_grad_paint-1.png
file_cd.png
file_eye.png
file_gears-0.png
file_gears-1.png
file_gears-2.png
file_lines-0.png
file_lines-1.png
file_padlock.png
file_program_group-0.png
file_program_group-1.png
file_question.png
file_set-0.png
file_set-1.png
file_sorted_lock-0.png
file_sorted_lock-1.png
file_win_shortcut-0.png
file_win_shortcut-1.png
file_win_shortcut-2.png
file_windows-0.png
file_windows-1.png
file_windows-2.png
filepack-0.png
filepack-1.png
floppy_drive_3_5-0.png
floppy_drive_3_5-1.png
floppy_drive_3_5-2.png
floppy_drive_3_5-3.png
floppy_drive_3_5-4.png
floppy_drive_3_5-5.png
floppy_drive_3_5_cool-0.png
floppy_drive_3_5_cool-1.png
floppy_drive_3_5_cool-2.png
floppy_drive_3_5_cool-3.png
floppy_drive_3_5_cool-4.png
floppy_drive_3_5_cool-5.png
floppy_drive_5_25-0.png
floppy_drive_5_25-1.png
floppy_drive_5_25-2.png
floppy_drive_5_25-3.png
floppy_drive_5_25-4.png
floppy_drive_5_25-5.png
floppy_drive_5_25_cool-0.png
floppy_drive_5_25_cool-1.png
floppy_drive_5_25_cool-2.png
floppy_drive_5_25_cool-3.png
floppy_drive_5_25_cool-4.png
floppy_drive_5_25_cool-5.png
font_adobe-0.png
font_adobe-1.png
font_bitmap-0.png
font_bitmap-1.png
font_opentype-0.png
font_opentype-1.png
font_tt-0.png
font_tt-1.png
font_tt_green-0.png
font_tt_green-1.png
frame_web-0.png
frame_web-1.png
game_freecell-0.png
game_freecell-1.png
game_freecell-2.png
game_hearts.png
game_mine_1-0.png
game_mine_1-1.png
game_mine_2-0.png
game_mine_2-1.png
game_solitaire-0.png
game_solitaire-1.png
game_spider-0.png
game_spider-1.png
game_spider-2.png
game_spider-3.png
gears-0.png
gears-1.png
gears_3-0.png
gears_3-1.png
gears_tweakui_a-0.png
gears_tweakui_a-1.png
gears_tweakui_b.png
globe_map-0.png
globe_map-1.png
globe_map-2.png
globe_map-3.png
globe_map-4.png
globe_map-5.png
gps-0.png
gps-1.png
gps-2.png
gps-3.png
gps-4.png
graphedit-0.png
graphedit-1.png
graphedit_file-0.png
graphedit_file-1.png
graphedit_file_2-0.png
graphedit_file_2-1.png
hard_disk_drive-0.png
hard_disk_drive-1.png
hard_disk_drive-2.png
hard_disk_drive-3.png
hard_disk_drive-4.png
hard_disk_drive-5.png
hard_disk_drive_cool-0.png
hard_disk_drive_cool-1.png
hard_disk_drive_cool-2.png
hard_disk_drive_cool-3.png
hard_disk_drive_cool-4.png
hard_disk_drive_cool-5.png
hard_disk_drive_pie.png
hard_disk_drive_tools-0.png
hard_disk_drive_tools-1.png
hard_disk_drives-0.png
hard_disk_drives-1.png
hardware-0.png
hardware-1.png
hardware-2.png
hardware-3.png
hardware-4.png
hardware-5.png
help_book_big-0.png
help_book_big-1.png
help_book_computer-0.png
help_book_computer-1.png
help_book_computer-2.png
help_book_computer-3.png
help_book_computer-4.png
help_book_cool-0.png
help_book_cool-1.png
help_book_cool-2.png
help_book_cool-3.png
help_book_cool-4.png
help_book_cool-5.png
help_book_cool_small-0.png
help_book_cool_small-1.png
help_book_cool_small-2.png
help_book_cool_small-3.png
help_book_cool_small-4.png
help_book_cool_small-5.png
help_book_small-0.png
help_book_small-1.png
help_book_small-2.png
help_book_small-3.png
help_book_small-4.png
help_book_small-5.png
help_question_mark-0.png
help_question_mark-1.png
help_sheet-0.png
help_sheet-1.png
history-0.png
history-1.png
homepage-0.png
homepage-1.png
homepage_alt.png
html-0.png
html-1.png
html-2.png
html-3.png
html-4.png
html-5.png
html2-0.png
html2-1.png
html2-2.png
html2-3.png
html2-4.png
html2-5.png
html2_new-0.png
html2_new-1.png
html2_new-2.png
html2_new-3.png
html2_new-4.png
html2_new-5.png
image_old_gif-0.png
image_old_gif-1.png
image_old_jpeg-0.png
image_old_jpeg-1.png
imaggif-0.png
imaggif-1.png
imagjpeg-0.png
imagjpeg-1.png
imagkoda-0.png
imagkoda-1.png
imagothe-0.png
imagothe-1.png
imagpng-0.png
imagpng-1.png
imagwmf-0.png
imagwmf-1.png
infrared-0.png
infrared-1.png
input_devices-0.png
input_devices-1.png
input_devices-2.png
input_devices-3.png
input_devices-4.png
input_devices-5.png
installer-0.png
installer-1.png
installer-2.png
installer-3.png
installer_file_gear-0.png
installer_file_gear-1.png
installer_generic_old-0.png
installer_generic_old-1.png
internet_connection_wiz-0.png
internet_connection_wiz-1.png
internet_connection_wiz-2.png
internet_connection_wiz-3.png
internet_connection_wiz-4.png
internet_connection_wiz-5.png
internet_options-0.png
internet_options-1.png
internet_options-2.png
internet_options-3.png
internet_options-4.png
internet_options-5.png
internet_options_old_e-0.png
internet_options_old_e-1.png
internet_options_old_e-2.png
internet_options_old_e-3.png
internet_options_old_e-4.png
internet_options_old_e-5.png
ipconfig.png
java-0.png
java-1.png
java_dpf-0.png
java_dpf-1.png
java_ocx-0.png
java_ocx-1.png
joystick-0.png
joystick-1.png
joystick-2.png
joystick-3.png
joystick-4.png
joystick-5.png
joystick_alt-0.png
joystick_alt-1.png
joystick_button.png
key_gray.png
key_padlock-0.png
key_padlock-1.png
key_padlock_help.png
key_webfile.png
key_win-0.png
key_win-1.png
key_win-2.png
key_win-3.png
key_win-4.png
key_win-5.png
key_win_alt-0.png
key_win_alt-1.png
key_win_alt-2.png
key_world-0.png
key_world-1.png
keyboard-0.png
keyboard-1.png
keyboard-2.png
keyboard-3.png
keyboard-4.png
keyboard-5.png
keyboard-6.png
keyboard_delay.png
keyboard_musical.png
keyboard_musical_midi.png
keyboard_repeat_rate.png
keys-0.png
keys-1.png
keys-2.png
keys-3.png
keys-4.png
keys-5.png
kodak_imaging-0.png
kodak_imaging-1.png
kodak_imaging_file-0.png
kodak_imaging_file-1.png
laptop.png
laptop_infrared-0.png
laptop_infrared-1.png
laptop_infrared-2.png
laptop_infrared-3.png
laptop_infrared_2-0.png
laptop_infrared_2-1.png
laptop_infrared_2-2.png
laptop_infrared_2-3.png
laptop_infrared_2-4.png
laptop_infrared_2-5.png
laptop_small-0.png
laptop_small-1.png
loudspeaker_muted-0.png
loudspeaker_muted-1.png
loudspeaker_rays-0.png
loudspeaker_rays-1.png
loudspeaker_rays_green-0.png
loudspeaker_rays_green-1.png
loudspeaker_rays_green-2.png
loudspeaker_wave-0.png
loudspeaker_wave-1.png
magnifying_glass-0.png
magnifying_glass-1.png
magnifying_glass_3.png
magnifying_glass_4-0.png
magnifying_glass_4-1.png
mailbox_world-0.png
mailbox_world-1.png
mailbox_world-2.png
mci_devices-0.png
mci_devices-1.png
media_player-0.png
media_player-1.png
media_player_file-0.png
media_player_file-1.png
media_player_file-2.png
media_player_stream_conn1.png
media_player_stream_conn2.png
media_player_stream_mono-0.png
media_player_stream_mono-1.png
media_player_stream_no.png
media_player_stream_no2-0.png
media_player_stream_no2-1.png
media_player_stream_stereo-0.png
media_player_stream_stereo-1.png
media_player_stream_sun0.png
media_player_stream_sun1.png
media_player_stream_sun2.png
media_player_stream_sun3.png
media_player_stream_sun4.png
memory-0.png
memory-1.png
message_empty_tack-0.png
message_empty_tack-1.png
message_envelope_open-0.png
message_envelope_open-1.png
message_file-0.png
message_file-1.png
message_tack-0.png
message_tack-1.png
microphone-0.png
microphone-1.png
microphone_2-0.png
microphone_2-1.png
midi_bl-0.png
midi_bl-1.png
midi_bl-2.png
midi_gr-0.png
midi_gr-1.png
midi_gr-2.png
midi_mg-0.png
midi_mg-1.png
midi_mg-2.png
midi_tl-0.png
midi_tl-1.png
midi_tl-2.png
minesweeper-0.png
minesweeper-1.png
mixer_cd_sound-0.png
mixer_cd_sound-1.png
mixer_keyboard_musical-0.png
mixer_keyboard_musical-1.png
mixer_sound-0.png
mixer_sound-1.png
modem-0.png
modem-1.png
modem-2.png
modem-3.png
modem-4.png
modem-5.png
monitor_application.png
monitor_black.png
monitor_blue_grad-0.png
monitor_blue_grad-1.png
monitor_gear.png
monitor_moon.png
monitor_tweakui-0.png
monitor_tweakui-1.png
monitor_windows.png
mouse-0.png
mouse-1.png
mouse-2.png
mouse-3.png
mouse-4.png
mouse-5.png
mouse_hide.png
mouse_location.png
mouse_ms-0.png
mouse_ms-1.png
mouse_padlock.png
mouse_snap.png
mouse_speed.png
mouse_trails.png
mouse_wireless.png
move_system_file.png
movie_maker-0.png
movie_maker-1.png
movie_maker-2.png
movie_maker-3.png
movie_maker-4.png
movie_maker-5.png
ms_dos-0.png
ms_dos-1.png
ms_dos_2-0.png
ms_dos_2-1.png
msagent-0.png
msagent-1.png
msagent-2.png
msagent-3.png
msagent-4.png
msagent_file-0.png
msagent_file-1.png
msconfig-0.png
msconfig-1.png
msg_error-0.png
msg_error-1.png
msg_error-2.png
msg_information-0.png
msg_information-1.png
msg_information-2.png
msg_question-0.png
msg_question-1.png
msg_question-2.png
msg_warning-0.png
msg_warning-1.png
msg_warning-2.png
msg_warning_inv-0.png
msg_warning_inv-1.png
mshearts.png
msie1-0.png
msie1-1.png
msie1-2.png
msie1-3.png
msie1-4.png
msie1-5.png
msie2-0.png
msie2-1.png
msie2-2.png
msie2-3.png
msie2-4.png
msie2-5.png
msie_box-0.png
msie_box-1.png
msinfo32-0.png
msinfo32-1.png
msn.png
msn2-0.png
msn2-1.png
msn2-2.png
msn2-3.png
msn3-0.png
msn3-1.png
msn3-2.png
msn3-3.png
msn3-4.png
msn3-5.png
msn_cool-0.png
msn_cool-1.png
msn_cool-2.png
msn_cool-3.png
msn_cool-4.png
msn_cool-5.png
multimedia-0.png
multimedia-1.png
multimedia-2.png
multimedia-3.png
multimedia-4.png
multimedia-5.png
nail-0.png
nail-1.png
netmeeting-0.png
netmeeting-1.png
netmeeting-2.png
netmeeting-3.png
netmeeting_share-0.png
netmeeting_share-1.png
netmeeting_share-2.png
netshow-0.png
netshow-1.png
netshow-2.png
netshow_arrow-0.png
netshow_arrow-1.png
netshow_arrow-2.png
netshow_notransm-0.png
netshow_notransm-1.png
netshow_notransm-2.png
network-0.png
network-1.png
network_cool_two_pcs-0.png
network_cool_two_pcs-1.png
network_cool_two_pcs-2.png
network_cool_two_pcs-3.png
network_cool_two_pcs-4.png
network_cool_two_pcs-5.png
network_drive-0.png
network_drive-1.png
network_drive-2.png
network_drive-3.png
network_drive-4.png
network_drive-5.png
network_drive_cool-0.png
network_drive_cool-1.png
network_drive_cool-2.png
network_drive_cool-3.png
network_drive_cool-4.png
network_drive_cool-5.png
network_drive_unavailable-0.png
network_drive_unavailable-1.png
network_drive_unavailable-2.png
network_drive_unavailable-3.png
network_drive_unavailable-4.png
network_drive_unavailable-5.png
network_drive_unavailable_cool-0.png
network_drive_unavailable_cool-1.png
network_drive_unavailable_cool-2.png
network_drive_unavailable_cool-3.png
network_drive_unavailable_cool-4.png
network_drive_unavailable_cool-5.png
network_drive_world-0.png
network_drive_world-1.png
network_internet_pcs_installer-0.png
network_internet_pcs_installer-1.png
network_internet_pcs_installer-2.png
network_internet_pcs_installer-3.png
network_internet_pcs_installer-4.png
network_internet_pcs_installer-5.png
network_normal_two_pcs-0.png
network_normal_two_pcs-1.png
network_normal_two_pcs-2.png
network_normal_two_pcs-3.png
network_normal_two_pcs-4.png
network_normal_two_pcs-5.png
network_television-0.png
network_television-1.png
network_television-2.png
network_television-3.png
network_television-4.png
network_television-5.png
network_televisons-0.png
network_televisons-1.png
network_televisons-2.png
network_televisons-3.png
network_three_pcs-0.png
network_three_pcs-1.png
newspaper.png
newspaper_mail.png
no-0.png
no-1.png
no2-0.png
no2-1.png
note-0.png
note-1.png
note-2.png
note-3.png
notepad-0.png
notepad-1.png
notepad-2.png
notepad-3.png
notepad-4.png
notepad-5.png
notepad_file-0.png
notepad_file-1.png
notepad_file-2.png
notepad_file_gear-0.png
notepad_file_gear-1.png
notepad_file_gear-2.png
odbc-0.png
odbc-1.png
odbc-2.png
odbc-3.png
odbc-4.png
odbc-5.png
odbc-6.png
ole-0.png
ole-1.png
ole2-0.png
ole2-1.png
outlook_express-0.png
outlook_express-1.png
outlook_express-2.png
outlook_express-3.png
outlook_express-4.png
outlook_express-5.png
outlook_express_tack-0.png
outlook_express_tack-1.png
outlook_express_tack-2.png
outlook_express_tack-3.png
outlook_express_tack-4.png
outlook_express_tack-5.png
outlook_express_tack_drive-0.png
outlook_express_tack_drive-1.png
outlook_express_tack_folder-0.png
outlook_express_tack_folder-1.png
overlay_black-0.png
overlay_black-1.png
overlay_refresh-0.png
overlay_refresh-1.png
overlay_share-0.png
overlay_share-1.png
overlay_share-2.png
overlay_share-3.png
overlay_share-4.png
overlay_share-5.png
overlay_share_cool-0.png
overlay_share_cool-1.png
overlay_share_cool-2.png
overlay_share_cool-3.png
overlay_share_cool-4.png
overlay_share_cool-5.png
overlay_shortcut-0.png
overlay_shortcut-1.png
overlay_shortcut-2.png
package-0.png
package-1.png
paint_file-0.png
paint_file-1.png
paint_file-2.png
paint_file-3.png
paint_file-4.png
paint_file-5.png
paint_old-0.png
paint_old-1.png
printer-0.png
printer-1.png
printer-2.png
printer-3.png
printer-4.png
printer-5.png
printer_desk-0.png
printer_desk-1.png
printer_diskette-0.png
printer_diskette-1.png
printer_diskette-2.png
printer_diskette-3.png
printer_diskette-4.png
printer_diskette-5.png
printer_feeding_slot-0.png
printer_feeding_slot-1.png
printer_network-0.png
printer_network-1.png
printer_network-2.png
printer_network-3.png
printer_network-4.png
printer_network-5.png
printer_pause-0.png
printer_pause-1.png
printer_play-0.png
printer_play-1.png
printer_plotter-0.png
printer_plotter-1.png
printer_question-0.png
printer_question-1.png
printer_question-2.png
printer_question-3.png
printer_question-4.png
printer_question-5.png
printer_shared-0.png
printer_shared-1.png
printer_slim-0.png
printer_slim-1.png
printer_slot_filled-0.png
printer_slot_filled-1.png
processor-0.png
processor-1.png
program_manager-0.png
program_manager-1.png
ram_drive-0.png
ram_drive-1.png
ram_drive-2.png
ram_drive-3.png
ram_drive-4.png
ram_drive-5.png
recycle_bin_directory.png
recycle_bin_empty-0.png
recycle_bin_empty-1.png
recycle_bin_empty-2.png
recycle_bin_empty-3.png
recycle_bin_empty-4.png
recycle_bin_empty-5.png
recycle_bin_empty_2k-0.png
recycle_bin_empty_2k-1.png
recycle_bin_empty_2k-2.png
recycle_bin_empty_2k-3.png
recycle_bin_empty_2k-4.png
recycle_bin_empty_2k-5.png
recycle_bin_empty_cool-0.png
recycle_bin_empty_cool-1.png
recycle_bin_empty_cool-2.png
recycle_bin_empty_cool-3.png
recycle_bin_empty_cool-4.png
recycle_bin_empty_cool-5.png
recycle_bin_file.png
recycle_bin_file_directory.png
recycle_bin_full-0.png
recycle_bin_full-1.png
recycle_bin_full-2.png
recycle_bin_full-3.png
recycle_bin_full-4.png
recycle_bin_full-5.png
recycle_bin_full_2k-0.png
recycle_bin_full_2k-1.png
recycle_bin_full_2k-2.png
recycle_bin_full_2k-3.png
recycle_bin_full_2k-4.png
recycle_bin_full_2k-5.png
recycle_bin_full_cool-0.png
recycle_bin_full_cool-1.png
recycle_bin_full_cool-2.png
recycle_bin_full_cool-3.png
recycle_bin_full_cool-4.png
recycle_bin_full_cool-5.png
regedit-0.png
regedit-1.png
regedit_binary-0.png
regedit_binary-1.png
regedit_binary_lock-0.png
regedit_binary_lock-1.png
regedit_file-0.png
regedit_file-1.png
regedit_string.png
registration-0.png
registration-1.png
registration_no.png
removable_disk_drive-0.png
removable_disk_drive-1.png
removable_disk_drive-2.png
removable_disk_drive-3.png
removable_disk_drive-4.png
removable_disk_drive-5.png
removable_disk_drive_alt-0.png
removable_disk_drive_alt-1.png
rename-0.png
rename-1.png
rename-2.png
rename-3.png
rename-4.png
rename-5.png
replace_directory.png
replace_file.png
restrict-0.png
restrict-1.png
rj_jack-0.png
rj_jack-1.png
roland_gs-0.png
roland_gs-1.png
scandisk-0.png
scandisk-1.png
scanner-0.png
scanner-1.png
scanner-2.png
scanner-3.png
scanner_alt-0.png
scanner_alt-1.png
scanner_alt-2.png
scanner_alt-3.png
scanner_alt-4.png
scanner_alt-5.png
scanner_alt_network-0.png
scanner_alt_network-1.png
scanner_alt_network-2.png
scanner_alt_network-3.png
scanner_alt_network-4.png
scanner_alt_network-5.png
scanner_camera-0.png
scanner_camera-1.png
scanner_camera-2.png
scanner_camera-3.png
scanner_camera-4.png
scanner_camera-5.png
scanner_video_cam-0.png
scanner_video_cam-1.png
scanner_video_cam-2.png
scanner_video_cam-3.png
scanregw.png
sched_tasks.png
screen_keyboard-0.png
screen_keyboard-1.png
script_file_blue-0.png
script_file_blue-1.png
script_file_teal-0.png
script_file_teal-1.png
script_file_yellow-0.png
script_file_yellow-1.png
scsi-0.png
scsi-1.png
search_computer-0.png
search_computer-1.png
search_computer-2.png
search_computer-3.png
search_directory-0.png
search_directory-1.png
search_directory-2.png
search_directory-3.png
search_directory-4.png
search_directory-5.png
search_file-0.png
search_file-1.png
search_file-2.png
search_file_2-0.png
search_file_2-1.png
search_file_2-2.png
search_file_2-3.png
search_file_2-4.png
search_file_2-5.png
search_file_2_cool-0.png
search_file_2_cool-1.png
search_file_2_cool-2.png
search_file_2_cool-3.png
search_file_2_cool-4.png
search_file_2_cool-5.png
search_file_3.png
search_laptop_1.png
search_laptop_2.png
search_laptop_3.png
search_laptop_4.png
search_server-0.png
search_server-1.png
search_web-0.png
search_web-1.png
server_gear-0.png
server_gear-1.png
server_to_desktop.png
server_window.png
settings_gear-0.png
settings_gear-1.png
settings_gear-2.png
settings_gear-3.png
settings_gear-4.png
settings_gear-5.png
settings_gear_cool-0.png
settings_gear_cool-1.png
settings_gear_cool-2.png
settings_gear_cool-3.png
settings_gear_cool-4.png
settings_gear_cool-5.png
shell_window1.png
shell_window2.png
shell_window3.png
shell_window4.png
shell_window5-0.png
shell_window5-1.png
shell_window6-0.png
shell_window6-1.png
shut_down_cool-0.png
shut_down_cool-1.png
shut_down_cool-2.png
shut_down_cool-3.png
shut_down_cool-4.png
shut_down_cool-5.png
shut_down_normal-0.png
shut_down_normal-1.png
shut_down_normal-2.png
shut_down_normal-3.png
shut_down_normal-4.png
shut_down_normal-5.png
shut_down_with_computer-0.png
shut_down_with_computer-1.png
signature-0.png
signature-1.png
signature_excl-0.png
signature_excl-1.png
signature_no-0.png
signature_no-1.png
sndvol32_input-0.png
sndvol32_input-1.png
sndvol32_main-0.png
sndvol32_main-1.png
sndvol32_output-0.png
sndvol32_output-1.png
soundgrn-0.png
soundgrn-1.png
soundgrn-2.png
soundgrn-3.png
soundgrn-4.png
soundpu2-0.png
soundpu2-1.png
soundpu2-2.png
soundpu2-3.png
soundpu2-4.png
soundpur-0.png
soundpur-1.png
soundpur-2.png
soundpur-3.png
soundpur-4.png
soundtel-0.png
soundtel-1.png
soundtel-2.png
soundtel-3.png
soundtel-4.png
soundvor-0.png
soundvor-1.png
soundvor-2.png
soundvor-3.png
soundvor-4.png
soundyel-0.png
soundyel-1.png
soundyel-2.png
soundyel-3.png
soundyel-4.png
spider-0.png
spider-1.png
spider-2.png
spider-3.png
standby_monitor_moon-0.png
standby_monitor_moon-1.png
standby_monitor_moon-2.png
standby_monitor_moon-3.png
standby_monitor_moon-4.png
standby_monitor_moon-5.png
standby_monitor_moon_cool-0.png
standby_monitor_moon_cool-1.png
standby_monitor_moon_cool-2.png
standby_monitor_moon_cool-3.png
standby_monitor_moon_cool-4.png
standby_monitor_moon_cool-5.png
start_menu_shortcuts.png
start_menu_xp-0.png
start_menu_xp-1.png
system_restore-0.png
system_restore-1.png
system_restore-2.png
system_restore-3.png
system_restore-4.png
system_restore-5.png
telephony-0.png
telephony-1.png
telephony-2.png
telephony-3.png
telephony-4.png
telephony-5.png
template_directory_net_web-0.png
template_directory_net_web-1.png
template_empty-0.png
template_empty-1.png
template_empty-2.png
template_empty-3.png
template_empty-4.png
template_empty-5.png
template_nework_conn-0.png
template_nework_conn-1.png
template_nework_conn-2.png
template_nework_conn-3.png
template_nework_conn-4.png
template_nework_conn-5.png
template_nework_places-0.png
template_nework_places-1.png
template_nework_places-2.png
template_nework_places-3.png
template_nework_places-4.png
template_nework_places-5.png
template_printer-0.png
template_printer-1.png
template_printer-2.png
template_printer-3.png
template_printer-4.png
template_printer-5.png
template_scanner_camera-0.png
template_scanner_camera-1.png
template_scanner_camera-2.png
template_scanner_camera-3.png
template_scanner_camera-4.png
template_scanner_camera-5.png
template_sched_task-0.png
template_sched_task-1.png
template_sched_task-2.png
template_sched_task-3.png
template_world-0.png
template_world-1.png
template_world-2.png
template_world-3.png
template_world-4.png
template_world-5.png
themes-0.png
themes-1.png
themes-2.png
themes-3.png
themes-4.png
themes-5.png
time_and_date-0.png
time_and_date-1.png
time_and_date-2.png
time_and_date-3.png
time_and_date-4.png
time_and_date-5.png
tip.png
tools_gear-0.png
tools_gear-1.png
tree-0.png
tree-1.png
true_type_paint-0.png
true_type_paint-1.png
trust0-0.png
trust0-1.png
trust1_restrict-0.png
trust1_restrict-1.png
unplug_eject_pc.png
unplug_storage-0.png
unplug_storage-1.png
ups.png
url1-0.png
url1-1.png
url1a-0.png
url1a-1.png
url2-0.png
url2-1.png
usb-0.png
usb-1.png
usb_port-0.png
usb_port-1.png
user_calendar-0.png
user_calendar-1.png
user_card.png
user_card_view.png
user_computer-0.png
user_computer-1.png
user_computer_pair-0.png
user_computer_pair-1.png
user_network-0.png
user_network-1.png
user_world-0.png
user_world-1.png
users-0.png
users-1.png
users-2.png
users_green-0.png
users_green-1.png
users_green-2.png
users_green-3.png
users_green-4.png
users_green-5.png
users_key-0.png
users_key-1.png
users_key-2.png
users_key-3.png
users_key-4.png
users_key-5.png
utopia_smiley.png
video_-0.png
video_-1.png
video_-2.png
video_compression-0.png
video_compression-1.png
video_gr-0.png
video_gr-1.png
video_gr-2.png
video_mg-0.png
video_mg-1.png
video_mg-2.png
video_mk-0.png
video_mk-1.png
video_mk-2.png
video_mk-3.png
video_mk-4.png
video_mk-5.png
video_tl-0.png
video_tl-1.png
video_tl-2.png
web_file-0.png
web_file-1.png
web_file-2.png
web_file-3.png
web_file_set-0.png
web_file_set-1.png
web_file_set-2.png
web_file_set-3.png
web_file_set-4.png
web_file_set-5.png
wia_img_a-0.png
wia_img_a-1.png
wia_img_check-0.png
wia_img_check-1.png
wia_img_color-0.png
wia_img_color-1.png
wia_img_color_sound-0.png
wia_img_color_sound-1.png
wia_img_gray-0.png
wia_img_gray-1.png
window_red_hilights.png
windows-0.png
windows-1.png
windows-2.png
windows-3.png
windows-4.png
windows-5.png
windows_button-0.png
windows_button-1.png
windows_movie-0.png
windows_movie-1.png
windows_slanted-0.png
windows_slanted-1.png
windows_three.png
windows_title-0.png
windows_title-1.png
windows_update_large-0.png
windows_update_large-1.png
windows_update_large-2.png
windows_update_large-3.png
windows_update_large-4.png
windows_update_large-5.png
windows_update_old-0.png
windows_update_old-1.png
windows_update_old-2.png
windows_update_old-3.png
windows_update_old-4.png
windows_update_old-5.png
windows_update_small-0.png
windows_update_small-1.png
windows_update_small-2.png
windows_update_small-3.png
windows_update_small-4.png
windows_update_small-5.png
winrep-0.png
winrep-1.png
winrep_mag_glass.png
wm-0.png
wm-1.png
wm-2.png
wm-3.png
wm-4.png
wm-5.png
wm_file-0.png
wm_file-1.png
wm_file-2.png
wm_file-3.png
wm_file-4.png
wm_file-5.png
world-0.png
world-1.png
world-2.png
world-3.png
world-4.png
world-5.png
world_address_book-0.png
world_address_book-1.png
world_lock-0.png
world_lock-1.png
world_network_directories-0.png
world_network_directories-1.png
world_network_directories-2.png
world_network_directories-3.png
world_network_directories-4.png
world_network_directories-5.png
world_phonereceiver.png
world_star-0.png
world_star-1.png
write_card_phone.png
write_file-0.png
write_file-1.png
write_red.png
write_wordpad-0.png
write_wordpad-1.png
write_yellow-0.png
write_yellow-1.png
xml-0.png
xml-1.png
xml-2.png
xml-3.png
xml_gear-0.png
xml_gear-1.png
xml_gear-2.png
xml_gear-3.png
To use the available inputs in Windows 98, you'll need to use the <Input /> component. It accepts the "type" prop (email, number, password, search, tel, text and url), if you don't add any type, it will be a text type by default.
import Input from "./components/Input/Input";
<Input />
The Input component also accepts the next props: placeholder, required, disabled and id.
import Input from "./components/Input/Input"; <> <Input type="text" placeholder="Username" id="username" required></Input> <Input type="password" placeholder="Password" id="password" required></Input> <Input type="email" placeholder="Email" id="email" required></Input> <Input type="number" placeholder="Age" id="age" required></Input> <Input type="tel" placeholder="Tel" id="tel" required></Input> <Input type="url" placeholder="Website" id="website" required></Input> </>;
import Input from "./components/Input/Input";
<Input type="search" placeholder="Search Bar" id="searchBar" ></Input>
The Modal component comes with a button that opens it but you can pass it a prop named "open" and it will be opened by default. Also, you can pass a prop "buttonContent" to customize the button that opens the modal (it comes with a default "Open Modal" string value.).
To add things inside the modal, you will need to nest them inside the <Modal /> component. To add a title and icon to the bar, you need to pass the props "icon" and "title".
import Typography from "./components/Typography/Typography"; import Modal from "./components/Modal/Modal"; import InfoIcon from "./components/Icons/msg_information-0.png"; import WindowsIcon from "./components/Icons/windows-0.png"; <Modal icon={WindowsIcon} title="Windows Modal" buttonContent="Open me!"> <div className="modalContent"> <div> <img src={InfoIcon} alt="Information windows icon" /> </div> <div className="modalInfo"> <Typography bold type="h6"> You opened this modal! </Typography> <Typography> You can add anything in here! To close the modal, you can click outside it or press the cross button. </Typography> </div> </div> </Modal>;
The <Tabs /> component needs its children <TabList />, <Tab> and <TabPanel>. This component accepts a "selectedTab" prop to have that one selected by default, if you don't pass that prop, the value will be 1.
<TabList /> is the father of <Tab />, it contains the list of tabs.
You will need to pass the prop "value" to match the TabPanel component later. If you add two <Tab /> components, you should add the first one the value "1" and the second one "2".
You can add the name of each Tab nesting it inside the component tag.
Like the <Tab /> component, you need to pass it a prop "value" matching the value of the Tab you want to link. If you add two Tab components, you need to add two TabPanel components as well.
import Tabs from "./components/Tabs/Tabs"; import TabList from "./components/TabList/TabList"; import Tab from "./components/Tab/Tab"; import TabPanel from "./components/TabPanel/TabPanel"; <Tabs> <TabList> <Tab value={1}>About me</Tab> <Tab value={2}>Click me</Tab> </TabList> <TabPanel value={1}> <Typography> Follow me on{" "} <a href="https://github.com/veronicadip" target="_blank"> GitHub </a>{" "} if you want to see more of my projects! </Typography> <Typography> I also have a <a href="https://veronicadip.github.io./">website</a> and a{" "} <a href="https://www.linkedin.com/in/veronica-dip/">LinkedIn</a> . <img src={SmileIcon} alt="smiley windows 98 icon" /> </Typography> </TabPanel> <TabPanel value={2}> <Typography>Great! you changed tabs, this function comes with the library too.</Typography> </TabPanel> </Tabs>;
This component can receive a function for each button, you can achieve this passing it the next props: "onMinimize", "onMaximize" and "onClose".
It also receives the "icon" and "title" props.
import TitleBar from "./components/TitleBar/TitleBar"; import MineIcon from "./components/Icons/game_mine_1-1.png"; <TitleBar icon={MineIcon} title="Minesweeper"></TitleBar>
TreeList is used to contain one or more nested TreeItems. You can pass an optional `fullHeight` prop to make it take the full screen height (like the tree list on the left of this page.)
TreeItems can be infinitely nested and must live inside a TreeList.
A TreeItem requires a `label` prop, which can be a ReactNode, allowing you to put icons, emojis, text, etc.
A TreeItem can be opened or closed, and you can control this state using the `openBranch` prop.
import TreeList from './components/TreeList/Treelist' import TreeItem from "./components/TreeList/Treelist"; <TreeList> <TreeItem label={<IconWithText icon={ComputerIcon} text="CD Rom" />} openBranch> <TreeItem label={<IconWithText icon={CDRomIcon} text="Computer" />} openBranch> <TreeItem label={<IconWithText icon={MouseIcon} text="Mouse" />} openBranch></TreeItem> </TreeItem> </TreeItem> <TreeItem label={<IconWithText icon={KeyboardIcon} text="Keyboard" />} openBranch></TreeItem> <TreeItem label={<IconWithText icon={MonitorIcon} text="Monitor" />} openBranch></TreeItem> </TreeList>
Typography is a component to give text styles. You can use the `type` prop to specify the typography hierarchy.
You can find all the available types below.
This is a p
This is a pre
By default, Typography is color black and font-weight regular,
You can add the `white` prop to make the text white.
You can also add the `bold` prop to make the text bold.
import Typography from "./components/Typography/Typography"; <> <Typography white type="h1"> This is a h1 </Typography> ... <Typography>By default, Typography is color black and font-weight regular,</Typography> <Typography white>You can add the "white" prop to make the text white.</Typography> <Typography white bold> You can also add the "bold" prop to make the text bold. </Typography> </>;