Adding homepage.

.storybook/main.ts

@@ -1,10 +1,21 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../src/Introduction.mdx", 
+    "../src/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        loaderOptions: {
+          prettierConfig: { printWidth: 80, singleQuote: false },
+        },
+      },
+    },
+    //"@storybook/addon-interactions",
     "storybook-addon-pseudo-states",
     "@storybook/addon-a11y",
   ],

.storybook/preview-body.html

@@ -0,0 +1,16 @@
+<link rel="preconnect" href="https://rsms.me/">
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+
+<style>
+	.sbdocs h1, .sbdocs h2, .sbdocs h3, .sbdocs h4, .sbdocs h5, .sbdocs h6, .sbdocs p, .sbdocs ol, .sbdocs li  {
+		font-family: 'Inter', sans-serif;
+	}
+
+	.sbdocs a {
+		color: #FAFF69;
+	}
+
+	.sbdocs a:hover {
+		text-decoration: underline;
+	}
+</style>

.storybook/preview-head.html

@@ -2,10 +2,8 @@
 <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 
 <style>
-
 	.sbdocs-preview, .docs-story, .docs-story > div:first-child {
 		min-height: 180px;
 		padding: 0;
 	}
-
 </style>

.storybook/preview.tsx

@@ -17,7 +17,6 @@ const ThemeBlock = styled.div<{ $left?: boolean; $bfill?: boolean }>(
       bottom: 0;
       overflow: auto;
       padding: 1rem;
-      background: ${theme.click.global.color.background.default};
     `
 );
 
@@ -31,8 +30,8 @@ export const globalTypes = {
       icon: "circlehollow",
       // Array of options
       items: [
-        { value: "light", icon: "circlehollow", title: "light" },
-        { value: "dark", icon: "circle", title: "dark" },
+        { value: "dark", icon: "moon", title: "dark" },
+        { value: "light", icon: "sun", title: "light" },
         { value: "classic", icon: "circle", title: "classic" },
       ],
       // Property that specifies if the name of the item will be displayed
@@ -58,6 +57,7 @@ const preview: Preview = {
       storySort: {
         method: "alphabetical",
         order: [
+          "Introduction",
           "Buttons",
           "Cards",
           "Forms",
@@ -76,7 +76,7 @@ const preview: Preview = {
       },
     },
     docs: {
-      theme: themes.light,
+      theme: themes.dark,
     },
   },
 };

src/Introduction.mdx

@@ -0,0 +1,57 @@
+
+<img src='/clickhouse-backs.png' alt='Click UI' style={{width:'100%', borderRadius:'4px'}} />
+
+<br /><br />
+
+# Click UI
+Welcome to the home of Click UI, the ClickHouse design system and component library. Our aim with Click UI is to provide an accessible, theme-able, modern, and attractive interface with which to experience the speed and power of ClickHouse.
+
+As we shift our tech stack to React, we’re looking to implement a consistent experience that runs across the entire ClickHouse ecosystem, whether that be the Cloud product, the docs, or the website.
+
+While this library is primarily meant for ClickHouse designers and developers, in keeping with the ethos of the company, this is an open-source project and we‘re excited to provide value to the greater community.
+
+The source code is available on [GitHub](https://github.com/ClickHouse/click-ui) here. Once ready, we’ll be publishing the design system to the Figma community.
+<br />
+--- 
+<br />
+### Using Click UI in an external app
+Click UI has been tested in NextJS, Gatsby, and Vite. If you run into problems using it in your app, please create an issue and our team will try to answer.
+1. Navigate to your app's route and run
+   `npm i @clickhouse/click-ui`
+   or
+   `yarn add @clickhouse/click-ui`
+2. Make sure to wrap your application in the Click UI `ThemeProvider`, without doing this, you may run into issues with styled-components. Once thats done, you'll be able to import the individual components that you want to use on each page. Here's an example an `App.tsx` in NextJS.
+
+```
+import { Switch, Text, ThemeName, ThemeProvider, Title } from '@clickhouse/click-ui'
+
+function App() {
+  const [theme, setTheme] = useState<ThemeName>('dark')
+
+  const toggleTheme = () => {
+    theme === 'dark' ? setTheme('light') : setTheme('dark')
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Switch checked={theme === 'dark'} onClick={() => toggleTheme() } />
+
+      <Title type='h1'>Click UI Example</Title>
+      <Text>Welcome to Click UI. Get started here.</Text>
+    </ThemeProvider>
+  )
+}
+
+export default App
+```
+
+
+
+### To develop this library locally 🚀
+1. Clone this repo, cd into the `click-ui` directory
+2. To install dependencies, run `npm i` 
+3. To build the latest styles, run `npm run generate-tokens`
+4. To run ClickUI locally, run `npm run dev` and navigate to https://localhost:5173
+5. To run Storybook locally, run `npm run storybook` and navigate to https://localhost:6006
+
+Enjoy!