diff --git a/settings/html.completion.cson b/settings/html.completion.cson
index 343822c..8e5c26f 100644
--- a/settings/html.completion.cson
+++ b/settings/html.completion.cson
@@ -1,4 +1,4 @@
-'.text.html, .text.css, .source.js':
+'.text.html, .text.css, .source.scss, .source.sass, .source.js, .source.jsx, .source.ts, .source.tsx':
'editor':
'completions': [
diff --git a/settings/icons.fontawesome.cson b/settings/icons.fontawesome.cson
index 9242401..250a5dd 100644
--- a/settings/icons.fontawesome.cson
+++ b/settings/icons.fontawesome.cson
@@ -1,4 +1,4 @@
-'.text.html, .source.css, .source.sass, .source.less, .source.jade':
+'.text.html, .source.css, .source.sass, .source.scss, .source.less, .source.jade, .source.jsx, .source.tsx':
'editor':
'completions': [
'fa-lg'
diff --git a/settings/icons.glyphicons.cson b/settings/icons.glyphicons.cson
index 01631a7..655ceb4 100644
--- a/settings/icons.glyphicons.cson
+++ b/settings/icons.glyphicons.cson
@@ -1,4 +1,4 @@
-'.text.html, .source.css, .source.sass, .source.less, .source.jade':
+'.text.html, .source.css, .source.sass, .source.scss, .source.less, .source.jade, .source.jsx, .source.tsx':
'editor':
'completions': [
'glyphicon-asterisk'
diff --git a/settings/icons.octicons.cson b/settings/icons.octicons.cson
index 12f902e..e9bc68a 100644
--- a/settings/icons.octicons.cson
+++ b/settings/icons.octicons.cson
@@ -1,4 +1,4 @@
-'.text.html, .source.css, .source.sass, .source.less, .source.jade':
+'.text.html, .source.css, .source.sass, .source.scss, .source.less, .source.jade, .source.jsx, .source.tsx':
'editor':
'completions': [
'octicon-alert'
diff --git a/snippets/react-components.cson b/snippets/react-components.cson
new file mode 100644
index 0000000..5e714eb
--- /dev/null
+++ b/snippets/react-components.cson
@@ -0,0 +1,315 @@
+'.source.jsx, .source.tsx':
+
+ 'Icon':
+ 'prefix': 'icon'
+ 'body': """
+
+ """
+
+ 'Octicons by GitHub':
+ 'prefix': 'oi'
+ 'body': """
+ $0
+ """
+
+ 'Fontawesome Icon':
+ 'prefix': 'fa'
+ 'body': """
+
+ """
+
+ 'Button':
+ 'prefix': 'btn'
+ 'body': """
+
+ """
+
+ 'Button Modal':
+ 'prefix': 'btn-modal'
+ 'body': """
+
+ """
+
+ 'Dropdown':
+ 'prefix': 'dropdown'
+ 'body': """
+
+ """
+
+ 'Menu Item':
+ 'prefix': 'menuitem'
+ 'body': """
+ $2
+ """
+
+ 'Menu Header':
+ 'prefix': 'menuheader'
+ 'body': """
+ $1
+ """
+
+ 'Menu Divider':
+ 'prefix': 'menudivider'
+ 'body': """
+
+ """
+
+ 'Button Group':
+ 'prefix': 'btn-group'
+ 'body': """
+
+ ${3:btn}
+
+ """
+
+ 'Button Group Vertical':
+ 'prefix': 'btn-group-vertical'
+ 'body': """
+
+ ${3:btn}
+
+ """
+
+ 'Button Toolbar':
+ 'prefix': 'btn-toolbar'
+ 'body': """
+
+ ${1:btngroup}
+
+ """
+
+ 'Input Group':
+ 'prefix': 'input-group'
+ 'body': """
+
+ $1
+
+ $3
+
+ """
+
+ 'Tab':
+ 'prefix': 'nav-tabs'
+ 'body': """
+
+ """
+
+ 'Item':
+ 'prefix': 'item'
+ 'body': """
+ $2
+ """
+
+ 'Pills':
+ 'prefix': 'nav-pills'
+ 'body': """
+
+ """
+
+ 'Navbar':
+ 'prefix': 'nav-'
+ 'body': """
+
+ """
+
+ 'Breadcrumbs':
+ 'prefix': 'breadcrumb'
+ 'body': """
+
+ $1
+
+ """
+
+ 'Pagination':
+ 'prefix': 'pagination'
+ 'body': """
+
+ """
+
+ "Pager":
+ 'prefix': 'pager'
+ 'body': """
+
+ """
+
+ 'Label':
+ 'prefix': 'label-'
+ 'body': """
+ $2
+ """
+
+ 'Badge':
+ 'prefix': 'badge'
+ 'body': """
+ $2
+ """
+
+ 'Jumbotron':
+ 'prefix': 'jumbotron'
+ 'body': """
+
+
${1:Hello, world!}
+
$2
+
+ """
+
+ 'Page Header':
+ 'prefix': 'page-header'
+ 'body': """
+
+
$1 $2
+
+ """
+
+ 'Thumbnail':
+ 'prefix': 'thumbnail'
+ 'body': """
+
+ ${1:
}
+
+ """
+
+ 'Alert':
+ 'prefix': 'alert'
+ 'body': """
+ $2
+ """
+
+ 'Alert Close':
+ 'prefix': 'close'
+ 'body': """
+
+ """
+
+ 'Alert Link':
+ 'prefix': 'alert-link'
+ 'body': """
+ $2
+ """
+
+ 'Progress Bar':
+ 'prefix': 'progress-'
+ 'body': """
+
+ """
+
+ 'List Group':
+ 'prefix': 'list-group'
+ 'body': """
+
+ """
+
+ 'List Group Item':
+ 'prefix': 'list-item'
+ 'body': """
+ $1
+ """
+
+ 'Panel':
+ 'prefix': 'panel'
+ 'body': """
+
+ ${1:
+
$2
+ }
+
+ $3
+
+ ${4:
+ $5
+
}
+
+ """
+
+ 'Well':
+ 'prefix': 'well'
+ 'body': """
+
+ $2
+
+ """
+
+ 'Blockquote Reverse':
+ 'prefix': 'blockquote-reverse'
+ 'body': """
+
+ $2
+
+ """
+
+ 'List Unstyled':
+ 'prefix': 'list-unstyled'
+ 'body': """
+
+ """
+
+ 'List Inline':
+ 'prefix': 'list-inline'
+ 'body': """
+
+ """
+
+ 'Dl Horizontal':
+ 'prefix': 'dl-horizontal'
+ 'body': """
+
+ ${1:- $2
+ - $3
}
+
+ """
+
+ 'Table':
+ 'prefix': 'table-'
+ 'body': """
+
+ """
+
+ 'Form Group':
+ 'prefix': 'form-group'
+ 'body': """
+
+
+
+ ${6:
${7:Help text here.}
}
+
+ """
diff --git a/snippets/react-grid.cson b/snippets/react-grid.cson
new file mode 100644
index 0000000..c17675b
--- /dev/null
+++ b/snippets/react-grid.cson
@@ -0,0 +1,65 @@
+'.source.jsx, .source.tsx':
+
+ 'Container':
+ 'prefix': 'con'
+ 'body': """
+
+ $1
+
+ """
+
+ 'Container Fluid':
+ 'prefix': 'conf'
+ 'body': """
+
+ $1
+
+ """
+
+ 'Row':
+ 'prefix': 'row'
+ 'body': """
+
+ $1
+
+ """
+
+ 'Column':
+ 'prefix': 'col-'
+ 'body': """
+
+ $3
+
+ """
+
+ 'Column Extra Small':
+ 'prefix': 'col-xs'
+ 'body': """
+
+ $0
+
+ """
+
+ 'Column Small':
+ 'prefix': 'col-sm'
+ 'body': """
+
+ $0
+
+ """
+
+ 'Column Medium':
+ 'prefix': 'col-md'
+ 'body': """
+
+ $0
+
+ """
+
+ 'Column Large':
+ 'prefix': 'col-lg'
+ 'body': """
+
+ $0
+
+ """
diff --git a/snippets/react-templates.cson b/snippets/react-templates.cson
new file mode 100644
index 0000000..fe4f964
--- /dev/null
+++ b/snippets/react-templates.cson
@@ -0,0 +1,157 @@
+'.source.jsx, .source.tsx':
+
+ 'Modal':
+ 'prefix': 'modal'
+ 'body': """
+
+
+
+ ${3:
+
+
$5
+ }
+
+ $6
+
+ ${7:
+
+
+
}
+
+
+
+ """
+
+ 'Accordion':
+ 'prefix': 'accordion'
+ 'body': """
+
+ """
+
+ 'Accordion Item':
+ 'prefix': 'accordion-item'
+ 'body': """
+
+ """
+
+ 'Carousel':
+ 'prefix': 'carousel'
+ 'body': """
+
+
+
+
+
+
+
+
+
+
+
+

+
+ $4
+
+
+ $5
+
+
+
+
+
+
+
+
+
+
+ """
+
+ 'Carousel Item':
+ 'prefix': 'carousel-item'
+ 'body': """
+
+

+
+
+ """
+
+ 'Navbar':
+ 'prefix': 'navbar'
+ 'body': """
+
+ """
+
+ 'Navbar Dropdown':
+ 'prefix': 'navbar-dropdown'
+ 'body': """
+
+ ${1:Menu Item}
+
+
+ """
diff --git a/snippets/react-typography.cson b/snippets/react-typography.cson
new file mode 100644
index 0000000..7ad2f70
--- /dev/null
+++ b/snippets/react-typography.cson
@@ -0,0 +1,33 @@
+'.source.jsx, .source.tsx':
+
+ 'Initialism':
+ 'prefix': 'initialism'
+ 'body': '$2'
+
+ 'Lead':
+ 'prefix': 'lead'
+ 'body': '$0
'
+
+ 'Heading 1':
+ 'prefix': 'h1-'
+ 'body': '$1 ${2:$3}
'
+
+ 'Heading 2':
+ 'prefix': 'h2-'
+ 'body': '$1 ${2:$3}
'
+
+ 'Heading 3':
+ 'prefix': 'h3-'
+ 'body': '$1 ${2:$3}
'
+
+ 'Heading 4':
+ 'prefix': 'h4-'
+ 'body': '$1 ${2:$3}
'
+
+ 'Heading 5':
+ 'prefix': 'h5-'
+ 'body': '$1 ${2:$3}
'
+
+ 'Heading 6':
+ 'prefix': 'h6-'
+ 'body': '$1 ${2:$3}
'