diff --git a/src/stories/Button.stories.svelte b/src/stories/Button.stories.svelte
new file mode 100644
index 0000000..4c8c7cc
--- /dev/null
+++ b/src/stories/Button.stories.svelte
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/stories/Button.svelte b/src/stories/Button.svelte
new file mode 100644
index 0000000..b2b820e
--- /dev/null
+++ b/src/stories/Button.svelte
@@ -0,0 +1,26 @@
+
+
+
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
new file mode 100644
index 0000000..549973e
--- /dev/null
+++ b/src/stories/Configure.mdx
@@ -0,0 +1,364 @@
+import { Meta } from "@storybook/blocks";
+
+import Github from "./assets/github.svg";
+import Discord from "./assets/discord.svg";
+import Youtube from "./assets/youtube.svg";
+import Tutorials from "./assets/tutorials.svg";
+import Styling from "./assets/styling.png";
+import Context from "./assets/context.png";
+import Assets from "./assets/assets.png";
+import Docs from "./assets/docs.png";
+import Share from "./assets/share.png";
+import FigmaPlugin from "./assets/figma-plugin.png";
+import Testing from "./assets/testing.png";
+import Accessibility from "./assets/accessibility.png";
+import Theming from "./assets/theming.png";
+import AddonLibrary from "./assets/addon-library.png";
+
+export const RightArrow = () =>
+
+
+
+
+
+ # Configure your project
+
+ Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
+
+
+
+
Add styling and CSS
+
Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
To link static files (like fonts) to your projects and stories, use the
+ `staticDirs` configuration option to specify folders to load when
+ starting Storybook.
+ # Do more with Storybook
+
+ Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
+
+
+
+
+
+
Autodocs
+
Auto-generate living,
+ interactive reference documentation from your components and stories.
+ We recommend building UIs with a
+
+ component-driven
+
+ process starting with atomic components and ending with pages.
+
+
+ Render pages with mock data. This makes it easy to build and review page states without
+ needing to navigate to them in your app. Here are some handy patterns for managing page data
+ in Storybook:
+
+
+
+ Use a higher-level connected component. Storybook helps you compose such data from the
+ "args" of child component stories
+
+
+ Assemble data in the page component from your services. You can mock these services out
+ using Storybook.
+
+
+
+ Get a guided tutorial on component-driven development at
+
+ Storybook tutorials
+
+ . Read more in the
+ docs
+ .
+
+
+ Tip
+ Adjust the width of the canvas with the
+
+ Viewports addon in the toolbar
+
+
+
diff --git a/src/stories/assets/accessibility.png b/src/stories/assets/accessibility.png
new file mode 100644
index 0000000..6ffe6fe
Binary files /dev/null and b/src/stories/assets/accessibility.png differ
diff --git a/src/stories/assets/accessibility.svg b/src/stories/assets/accessibility.svg
new file mode 100644
index 0000000..107e93f
--- /dev/null
+++ b/src/stories/assets/accessibility.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/stories/assets/addon-library.png b/src/stories/assets/addon-library.png
new file mode 100644
index 0000000..95deb38
Binary files /dev/null and b/src/stories/assets/addon-library.png differ
diff --git a/src/stories/assets/assets.png b/src/stories/assets/assets.png
new file mode 100644
index 0000000..cfba681
Binary files /dev/null and b/src/stories/assets/assets.png differ
diff --git a/src/stories/assets/avif-test-image.avif b/src/stories/assets/avif-test-image.avif
new file mode 100644
index 0000000..530709b
Binary files /dev/null and b/src/stories/assets/avif-test-image.avif differ
diff --git a/src/stories/assets/context.png b/src/stories/assets/context.png
new file mode 100644
index 0000000..e5cd249
Binary files /dev/null and b/src/stories/assets/context.png differ
diff --git a/src/stories/assets/discord.svg b/src/stories/assets/discord.svg
new file mode 100644
index 0000000..d638958
--- /dev/null
+++ b/src/stories/assets/discord.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/stories/assets/docs.png b/src/stories/assets/docs.png
new file mode 100644
index 0000000..a749629
Binary files /dev/null and b/src/stories/assets/docs.png differ
diff --git a/src/stories/assets/figma-plugin.png b/src/stories/assets/figma-plugin.png
new file mode 100644
index 0000000..8f79b08
Binary files /dev/null and b/src/stories/assets/figma-plugin.png differ
diff --git a/src/stories/assets/github.svg b/src/stories/assets/github.svg
new file mode 100644
index 0000000..dc51352
--- /dev/null
+++ b/src/stories/assets/github.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/stories/assets/share.png b/src/stories/assets/share.png
new file mode 100644
index 0000000..8097a37
Binary files /dev/null and b/src/stories/assets/share.png differ
diff --git a/src/stories/assets/styling.png b/src/stories/assets/styling.png
new file mode 100644
index 0000000..d341e82
Binary files /dev/null and b/src/stories/assets/styling.png differ
diff --git a/src/stories/assets/testing.png b/src/stories/assets/testing.png
new file mode 100644
index 0000000..d4ac39a
Binary files /dev/null and b/src/stories/assets/testing.png differ
diff --git a/src/stories/assets/theming.png b/src/stories/assets/theming.png
new file mode 100644
index 0000000..1535eb9
Binary files /dev/null and b/src/stories/assets/theming.png differ
diff --git a/src/stories/assets/tutorials.svg b/src/stories/assets/tutorials.svg
new file mode 100644
index 0000000..b492a9c
--- /dev/null
+++ b/src/stories/assets/tutorials.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/stories/assets/youtube.svg b/src/stories/assets/youtube.svg
new file mode 100644
index 0000000..a7515d7
--- /dev/null
+++ b/src/stories/assets/youtube.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/stories/button.css b/src/stories/button.css
new file mode 100644
index 0000000..94d674b
--- /dev/null
+++ b/src/stories/button.css
@@ -0,0 +1,30 @@
+.storybook-button {
+ display: inline-block;
+ cursor: pointer;
+ border: 0;
+ border-radius: 3em;
+ font-weight: 700;
+ line-height: 1;
+ font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.storybook-button--primary {
+ background-color: #1ea7fd;
+ color: white;
+}
+.storybook-button--secondary {
+ box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+ background-color: transparent;
+ color: #333;
+}
+.storybook-button--small {
+ padding: 10px 16px;
+ font-size: 12px;
+}
+.storybook-button--medium {
+ padding: 11px 20px;
+ font-size: 14px;
+}
+.storybook-button--large {
+ padding: 12px 24px;
+ font-size: 16px;
+}
diff --git a/src/stories/header.css b/src/stories/header.css
new file mode 100644
index 0000000..5efd46c
--- /dev/null
+++ b/src/stories/header.css
@@ -0,0 +1,32 @@
+.storybook-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ padding: 15px 20px;
+ font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-header svg {
+ display: inline-block;
+ vertical-align: top;
+}
+
+.storybook-header h1 {
+ display: inline-block;
+ vertical-align: top;
+ margin: 6px 0 6px 10px;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 1;
+}
+
+.storybook-header button + button {
+ margin-left: 10px;
+}
+
+.storybook-header .welcome {
+ margin-right: 10px;
+ color: #333;
+ font-size: 14px;
+}
diff --git a/src/stories/page.css b/src/stories/page.css
new file mode 100644
index 0000000..87f7ecb
--- /dev/null
+++ b/src/stories/page.css
@@ -0,0 +1,69 @@
+.storybook-page {
+ margin: 0 auto;
+ padding: 48px 20px;
+ max-width: 600px;
+ color: #333;
+ font-size: 14px;
+ line-height: 24px;
+ font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+ display: inline-block;
+ vertical-align: top;
+ margin: 0 0 4px;
+ font-weight: 700;
+ font-size: 32px;
+ line-height: 1;
+}
+
+.storybook-page p {
+ margin: 1em 0;
+}
+
+.storybook-page a {
+ color: #1ea7fd;
+ text-decoration: none;
+}
+
+.storybook-page ul {
+ margin: 1em 0;
+ padding-left: 30px;
+}
+
+.storybook-page li {
+ margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+ display: inline-block;
+ vertical-align: top;
+ margin-right: 10px;
+ border-radius: 1em;
+ background: #e7fdd8;
+ padding: 4px 12px;
+ color: #66bf3c;
+ font-weight: 700;
+ font-size: 11px;
+ line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+ margin-top: 40px;
+ margin-bottom: 40px;
+ font-size: 13px;
+ line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+ display: inline-block;
+ vertical-align: top;
+ margin-top: 3px;
+ margin-right: 4px;
+ width: 12px;
+ height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+ fill: #1ea7fd;
+}
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..825b9e6
Binary files /dev/null and b/static/favicon.png differ
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..1295460
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+ // Consult https://svelte.dev/docs/kit/integrations
+ // for more information about preprocessors
+ preprocess: vitePreprocess(),
+
+ kit: {
+ // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+ // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+ // See https://svelte.dev/docs/kit/adapters for more information about adapters.
+ adapter: adapter()
+ }
+};
+
+export default config;
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..e61b52f
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,12 @@
+import typography from '@tailwindcss/typography';
+import type { Config } from 'tailwindcss';
+
+export default {
+ content: ['./src/**/*.{html,js,svelte,ts}'],
+
+ theme: {
+ extend: {}
+ },
+
+ plugins: [typography]
+} satisfies Config;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..0b2d886
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "extends": "./.svelte-kit/tsconfig.json",
+ "compilerOptions": {
+ "allowJs": true,
+ "checkJs": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "resolveJsonModule": true,
+ "skipLibCheck": true,
+ "sourceMap": true,
+ "strict": true,
+ "moduleResolution": "bundler"
+ }
+ // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+ // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+ //
+ // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+ // from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..d76fc8a
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+import { sveltekit } from '@sveltejs/kit/vite';
+
+export default defineConfig({
+ plugins: [sveltekit()],
+
+ test: {
+ include: ['src/**/*.{test,spec}.{js,ts}']
+ }
+});