diff --git a/packages/styles/.eslintignore b/packages/styles/.eslintignore
new file mode 100644
index 000000000..70b3dbbba
--- /dev/null
+++ b/packages/styles/.eslintignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+webpack.config.js
\ No newline at end of file
diff --git a/packages/styles/.eslintrc.json b/packages/styles/.eslintrc.json
new file mode 100644
index 000000000..1df2a47c5
--- /dev/null
+++ b/packages/styles/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+ "extends": ["../../node_modules/@standardnotes/config/src/.eslintrc"],
+ "ignorePatterns": [".eslintrc.js", "webpack.config.js"]
+}
diff --git a/packages/styles/.gitignore b/packages/styles/.gitignore
new file mode 100644
index 000000000..53c37a166
--- /dev/null
+++ b/packages/styles/.gitignore
@@ -0,0 +1 @@
+dist
\ No newline at end of file
diff --git a/packages/styles/linter.tsconfig.json b/packages/styles/linter.tsconfig.json
new file mode 100644
index 000000000..ab3d8c031
--- /dev/null
+++ b/packages/styles/linter.tsconfig.json
@@ -0,0 +1,3 @@
+{
+ "extends": "../../node_modules/@standardnotes/config/src/linter.tsconfig.json"
+}
diff --git a/packages/styles/package.json b/packages/styles/package.json
new file mode 100644
index 000000000..a61fea826
--- /dev/null
+++ b/packages/styles/package.json
@@ -0,0 +1,24 @@
+{
+ "name": "@standardnotes/styles",
+ "version": "1.0.0",
+ "main": "dist/index.js",
+ "types": "dist/index.d.ts",
+ "publishConfig": {
+ "access": "public"
+ },
+ "scripts": {
+ "build": "webpack --mode='production' && yarn run tsc",
+ "start": "webpack --watch --mode='development'",
+ "lint": "prettier --check *.js"
+ },
+ "dependencies": {},
+ "devDependencies": {
+ "css-loader": "~6.6.0",
+ "mini-css-extract-plugin": "^2.5.3",
+ "node-sass": "^7.0.1",
+ "sass-loader": "^12.6.0",
+ "style-loader": "~3.3.1",
+ "webpack": "^5.69.1",
+ "webpack-cli": "^4.9.2"
+ }
+}
diff --git a/packages/styles/src/Alert/Alert.ts b/packages/styles/src/Alert/Alert.ts
new file mode 100644
index 000000000..bb8d0d69c
--- /dev/null
+++ b/packages/styles/src/Alert/Alert.ts
@@ -0,0 +1,127 @@
+type AlertButtonStyle = 'small' | 'outlined' | 'contrast' | 'neutral' | 'info' | 'warning' | 'danger' | 'success'
+
+type AlertButton = {
+ text: string
+ style: AlertButtonStyle
+ action: () => void
+ primary?: boolean
+}
+
+export class SKAlert {
+ private title?: string
+ private text: string
+ private buttons: AlertButton[]
+ private element!: HTMLDivElement
+ private onElement!: HTMLElement
+
+ constructor({ title, text, buttons }: { title?: string; text: string; buttons?: AlertButton[] }) {
+ this.title = title
+ this.text = text
+ this.buttons = buttons || []
+ }
+
+ buttonsString() {
+ const genButton = function (buttonDesc: AlertButton, index: number) {
+ return `
+
+ `
+ }
+
+ const buttonString = this.buttons
+ .map(function (buttonDesc, index) {
+ return genButton(buttonDesc, index)
+ })
+ .join('')
+
+ const str = `
+
+ ${buttonString}
+
+ `
+ return str
+ }
+
+ templateString() {
+ let buttonsTemplate: string
+ let panelStyle: string
+ if (this.buttons) {
+ buttonsTemplate = `
+
+ ${this.buttonsString()}
+
+ `
+ panelStyle = ''
+ } else {
+ buttonsTemplate = ''
+ panelStyle = 'style="padding-bottom: 8px"'
+ }
+ const titleTemplate = this.title ? `${this.title}
` : ''
+ const messageTemplate = this.text ? `${this.text}
` : ''
+
+ const template = `
+
+
+
+
+
+
+
+ ${titleTemplate}
+
+
+ ${messageTemplate}
+
+
+ ${buttonsTemplate}
+
+
+
+
+
+