diff --git a/resources/js/stories/Alert.stories.ts b/resources/js/stories/Alert.stories.ts
new file mode 100644
index 0000000000..940606067b
--- /dev/null
+++ b/resources/js/stories/Alert.stories.ts
@@ -0,0 +1,336 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Alert, Heading, Description} from '@ui';
+import {icons} from './icons';
+
+const meta = {
+ title: 'Components/Alert',
+ component: Alert,
+ argTypes: {
+ variant: {
+ control: 'select',
+ options: ['default', 'warning', 'error', 'success'],
+ },
+ icon: {
+ control: 'select',
+ options: icons,
+ },
+ },
+} satisfies Meta
;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ text: 'This is a default alert message',
+ variant: 'default',
+ },
+};
+
+const defaultCode = `
+
+`;
+
+export const _DocsIntro: Story = {
+ tags: ['!dev'],
+ parameters: {
+ docs: {
+ source: { code: defaultCode }
+ }
+ },
+ render: () => ({
+ components: { Alert },
+ template: `${defaultCode}
`,
+ }),
+};
+
+const variantsCode = `
+
+
+
+
+`;
+
+export const Variants: Story = {
+ argTypes: {
+ variant: { control: { disable: true } },
+ text: { control: { disable: true } },
+ icon: { control: { disable: true } },
+ },
+ parameters: {
+ docs: {
+ source: {
+ code: variantsCode,
+ },
+ },
+ },
+ render: () => ({
+ components: { Alert },
+ template: `
+
+ `,
+ }),
+};
+
+const customIconCode = `
+
+
+
+`;
+
+export const CustomIcons: Story = {
+ argTypes: {
+ icon: { control: { disable: true } },
+ text: { control: { disable: true } },
+ variant: { control: { disable: true } },
+ },
+ parameters: {
+ docs: {
+ source: {
+ code: customIconCode,
+ },
+ },
+ },
+ render: () => ({
+ components: { Alert },
+ template: `
+
+ `,
+ }),
+};
+
+
+
+const headingsCode = `
+
+`;
+
+export const Headings: Story = {
+ argTypes: {
+ icon: { control: { disable: true } },
+ text: { control: { disable: true } },
+ variant: { control: { disable: true } },
+ },
+ parameters: {
+ docs: {
+ source: {
+ code: headingsCode,
+ },
+ },
+ },
+ render: () => ({
+ components: { Alert },
+ template: `
+
+ `,
+ }),
+};
+
+const slotContentCode = `
+
+ Success! This alert uses a slot for custom content.
+
+`;
+
+export const SlotContent: Story = {
+ tags: ['!dev'],
+ argTypes: {
+ text: { control: { disable: true } },
+ variant: { control: { disable: true } },
+ },
+ parameters: {
+ docs: {
+ source: {
+ code: slotContentCode,
+ },
+ },
+ },
+ render: () => ({
+ components: { Alert },
+ template: `
+
+
+ Success! This alert uses a slot for custom content.
+
+
+ You can use bold text, italic text, and even code in slot content.
+
+
+
+ Please run your migrations
+ The importer uses Laravel's job batching feature to keep track of the import progress, however, it requires a job_batches table in your database. Before you can run the importer, you will need to run php artisan migrate. This alert uses a heading for the title and a paragraph for the message.
+
+
+ New Feature Available
+ We've added support for custom field types. You can now create your own field types by extending the Fieldtype class. Check out the documentation for more details.
+
+
+ Backup Completed Successfully
+ Your site backup has been created and saved to /storage/backups/site-2032-01-15.tar.gz. The backup includes all content, assets, and configuration files.
+
+
+ Failed to Connect to Database
+ Unable to establish a connection to the database server. Please check your database configuration in .env and ensure the database server is running.
+
+
+ Base Size (default)
+ This heading uses the default base size with Heading and Description components.
+
+
+ Large Size
+ Here's an example of a larger heading with Heading and Description components. The Alert component automatically adjusts spacing for larger headings.
+
+
+ Extra Large Size
+ Here's an example of an extra large heading with Heading and Description components.
+
+
+ 2XL Size
+ Here's an example of the largest heading size with Heading and Description components. Note the adjusted spacing for larger headings.
+
+
+
+ Please run your migrations
+ The importer uses Laravel's job batching feature to keep track of the import progress, however, it requires a job_batches table in your database. Before you can run the importer, you will need to run php artisan migrate. This alert uses a heading for the title and a paragraph for the message.
+
+
+ New Feature Available
+ We've added support for custom field types. You can now create your own field types by extending the Fieldtype class. Check out the documentation for more details.
+
+
+ Backup Completed Successfully
+ Your site backup has been created and saved to /storage/backups/site-2032-01-15.tar.gz. The backup includes all content, assets, and configuration files.
+
+
+ Failed to Connect to Database
+ Unable to establish a connection to the database server. Please check your database configuration in .env and ensure the database server is running.
+
+
+ Base Size (default)
+ This heading uses the default base size with Heading and Description components.
+
+
+ Large Size
+ Here's an example of a larger heading with Heading and Description components. The Alert component automatically adjusts spacing for larger headings.
+
+
+ Extra Large Size
+ Here's an example of an extra large heading with Heading and Description components.
+
+
+ 2XL Size
+ Here's an example of the largest heading size with Heading and Description components. Note the adjusted spacing for larger headings.
+
+
+
+ Using Heading Component
+ This alert uses the Heading and Description components instead of native HTML elements.
+
+
+ Warning: Action Required
+ This is a warning alert with a larger heading with Heading and Description components. The Heading component supports different sizes and inherits the alert's color scheme.
+
+
+ Backup Completed Successfully
+ This is an extra large heading with Heading and Description components. Your site backup has been created and saved to /storage/backups/site-2032-01-15.tar.gz. The backup includes all content, assets, and configuration files.
+
+
+ Database Connection Failed
+ This is a heading level 2 example, with no heading size difference. Unable to establish a connection to the database server. Please check your database configuration in .env and ensure the database server is running.
+
+
+ Migration Required
+ This is a heading with an icon with Heading and Description components. The importer uses Laravel's job batching feature to keep track of the import progress, however, it requires a job_batches table in your database. Before you can run the importer, you will need to run php artisan migrate.
+
+