Configure
+
+
+
+ 
+
+ Presets for popular tools
+ Easy setup for TypeScript, SCSS and more.
+
+
+
+ 
+
+ Build configuration
+ How to customize webpack and Babel
+
+
+
+ 
+
+ Styling
+ How to load and configure CSS libraries
+
+
+
+ 
+
+ Data
+ Providers and mocking for data libraries
+
+
+
+
+Learn
+
+
+
+ 
+
+ Storybook documentation
+ Configure, customize, and extend
+
+
+
+ 
+
+ In-depth guides
+ Best practices from leading teams
+
+
+
+ 
+
+ GitHub project
+ View the source and add issues
+
+
+
+ 
+
+ Discord chat
+ Chat with maintainers and the community
+
+
+
+
+
+ TipEdit the Markdown in{' '}
+
diff --git a/web/stories/Modal.stories.tsx b/web/stories/Modal.stories.tsx
new file mode 100644
index 000000000..4e0d24229
--- /dev/null
+++ b/web/stories/Modal.stories.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Modal, Button } from 'antd';
+
+const Usage = () => {
+ const [isModalVisible, setIsModalVisible] = useState(false);
+
+ const showModal = () => {
+ setIsModalVisible(true);
+ };
+
+ const handleOk = () => {
+ setIsModalVisible(false);
+ };
+
+ const handleCancel = () => {
+ setIsModalVisible(false);
+ };
+
+ return (
+ <>
+
+ src/stories/Introduction.stories.mdx
+Some contents...
+Some contents...
+Some contents...
+
+
+ Small
+ Default
+ Large
+
+
+
+
+ Content of card tab 1
+
+
+ Content of card tab 2
+
+
+ Content of card tab 3
+
+
+
+ );
+ }
+}
+
+export default {
+ title: 'owncast/Tabs',
+ component: Tabs,
+} as ComponentMeta