diff --git a/components/ui/sonner.stories.tsx b/components/ui/sonner.stories.tsx
new file mode 100644
index 0000000..79e79af
--- /dev/null
+++ b/components/ui/sonner.stories.tsx
@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Toaster } from '@/components/ui/sonner'
+import { Button } from '@/components/ui/button'
+import { toast } from 'sonner'
+
+const meta: Meta<typeof Toaster> = {
+  title: 'UI/Sonner',
+  component: Toaster,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function ToastTriggers() {
+  return (
+    <div className="flex gap-3 flex-wrap">
+      <Button
+        onClick={() =>
+          toast.success('Success notification', {
+            description: 'This is a success toast with a description',
+          })
+        }
+        variant="default"
+      >
+        Show Success
+      </Button>
+      <Button
+        onClick={() =>
+          toast.error('Error notification', {
+            description: 'Something went wrong',
+          })
+        }
+        variant="destructive"
+      >
+        Show Error
+      </Button>
+      <Button
+        onClick={() =>
+          toast.info('Information', {
+            description: 'Here is some useful information',
+          })
+        }
+        variant="outline"
+      >
+        Show Info
+      </Button>
+      <Button
+        onClick={() =>
+          toast.warning('Warning', {
+            description: 'Please be careful with this action',
+          })
+        }
+        variant="outline"
+      >
+        Show Warning
+      </Button>
+      <Button
+        onClick={() => toast.loading('Loading...', { id: 'loading-toast' })}
+        variant="outline"
+      >
+        Show Loading
+      </Button>
+      <Button
+        onClick={() => toast.dismiss('loading-toast')}
+        variant="ghost"
+      >
+        Dismiss
+      </Button>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <Toaster />
+      <ToastTriggers />
+    </>
+  ),
+}
+
+export const SuccessToast: Story = {
+  render: () => (
+    <>
+      <Toaster />
+      <Button onClick={() => toast.success('Operation completed successfully!')}>
+        Trigger Success Toast
+      </Button>
+    </>
+  ),
+}
+
+export const ErrorToast: Story = {
+  render: () => (
+    <>
+      <Toaster />
+      <Button onClick={() => toast.error('An error occurred', { description: 'Please try again' })}>
+        Trigger Error Toast
+      </Button>
+    </>
+  ),
+}
+
+export const InfoToast: Story = {
+  render: () => (
+    <>
+      <Toaster />
+      <Button onClick={() => toast.info('New update available', { description: 'Click to learn more' })}>
+        Trigger Info Toast
+      </Button>
+    </>
+  ),
+}
+
+export const WithLongMessage: Story = {
+  render: () => (
+    <>
+      <Toaster />
+      <Button
+        onClick={() =>
+          toast.success('Transaction confirmed', {
+            description:
+              'Your transaction has been successfully processed and added to the blockchain. You can view it in the explorer.',
+          })
+        }
+      >
+        Trigger Long Message Toast
+      </Button>
+    </>
+  ),
+}
diff --git a/components/ui/tabs.stories.tsx b/components/ui/tabs.stories.tsx
new file mode 100644
index 0000000..ed13d98
--- /dev/null
+++ b/components/ui/tabs.stories.tsx
@@ -0,0 +1,168 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { Card } from '@/components/ui/card'
+
+const meta: Meta<typeof Tabs> = {
+  title: 'UI/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="tab1">All</TabsTrigger>
+        <TabsTrigger value="tab2">Receiving</TabsTrigger>
+        <TabsTrigger value="tab3">Sending</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1">
+        <Card className="p-4">
+          <p className="text-sm">All transactions and activity</p>
+        </Card>
+      </TabsContent>
+      <TabsContent value="tab2">
+        <Card className="p-4">
+          <p className="text-sm">Incoming streams and transfers</p>
+        </Card>
+      </TabsContent>
+      <TabsContent value="tab3">
+        <Card className="p-4">
+          <p className="text-sm">Outgoing streams and transfers</p>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const FourTabs: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1" className="w-[500px]">
+      <TabsList>
+        <TabsTrigger value="tab1">Overview</TabsTrigger>
+        <TabsTrigger value="tab2">History</TabsTrigger>
+        <TabsTrigger value="tab3">Settings</TabsTrigger>
+        <TabsTrigger value="tab4">Advanced</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1">
+        <Card className="p-4">
+          <p className="text-sm">Overview tab content</p>
+        </Card>
+      </TabsContent>
+      <TabsContent value="tab2">
+        <Card className="p-4">
+          <p className="text-sm">History tab content with transaction list</p>
+        </Card>
+      </TabsContent>
+      <TabsContent value="tab3">
+        <Card className="p-4">
+          <p className="text-sm">Settings tab content with preferences</p>
+        </Card>
+      </TabsContent>
+      <TabsContent value="tab4">
+        <Card className="p-4">
+          <p className="text-sm">Advanced tab content with developer options</p>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const LineVariant: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1" className="w-[400px]">
+      <TabsList variant="line">
+        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1">
+        <Card className="p-4">
+          <p className="text-sm">Line variant tab 1</p>
+        </Card>
+      </TabsContent>
+      <TabsContent value="tab2">
+        <Card className="p-4">
+          <p className="text-sm">Line variant tab 2</p>
+        </Card>
+      </TabsContent>
+      <TabsContent value="tab3">
+        <Card className="p-4">
+          <p className="text-sm">Line variant tab 3</p>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const DisabledTab: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="tab1">Enabled</TabsTrigger>
+        <TabsTrigger value="tab2" disabled>
+          Disabled
+        </TabsTrigger>
+        <TabsTrigger value="tab3">Enabled</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1">
+        <Card className="p-4">
+          <p className="text-sm">This tab is enabled</p>
+        </Card>
+      </TabsContent>
+      <TabsContent value="tab3">
+        <Card className="p-4">
+          <p className="text-sm">This tab is also enabled</p>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+function InteractiveTabsExample() {
+  const [activeTab, setActiveTab] = useState('tab1')
+
+  return (
+    <div className="w-[400px] space-y-4">
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="tab1">Stream</TabsTrigger>
+          <TabsTrigger value="tab2">Transfer</TabsTrigger>
+          <TabsTrigger value="tab3">Claim</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">
+          <Card className="p-4">
+            <p className="text-sm font-medium mb-2">Recurring Stream</p>
+            <p className="text-xs text-muted-foreground">Set up a continuous payment stream over time</p>
+          </Card>
+        </TabsContent>
+        <TabsContent value="tab2">
+          <Card className="p-4">
+            <p className="text-sm font-medium mb-2">One-time Transfer</p>
+            <p className="text-xs text-muted-foreground">Send tokens immediately to an address</p>
+          </Card>
+        </TabsContent>
+        <TabsContent value="tab3">
+          <Card className="p-4">
+            <p className="text-sm font-medium mb-2">Claim Tokens</p>
+            <p className="text-xs text-muted-foreground">Claim available tokens from a stream</p>
+          </Card>
+        </TabsContent>
+      </Tabs>
+      <p className="text-xs text-muted-foreground">
+        Use arrow keys to navigate between tabs (or try Alt+Arrow on some browsers)
+      </p>
+    </div>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveTabsExample />,
+}
diff --git a/components/ui/token-amount.stories.tsx b/components/ui/token-amount.stories.tsx
new file mode 100644
index 0000000..2219de0
--- /dev/null
+++ b/components/ui/token-amount.stories.tsx
@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TokenAmount } from '@/components/ui/token-amount'
+import type { TokenInfo } from '@/types/stream'
+
+const meta: Meta<typeof TokenAmount> = {
+  title: 'UI/TokenAmount',
+  component: TokenAmount,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockUSDC: TokenInfo = {
+  symbol: 'USDC',
+  decimals: 6,
+  address: 'GBBD47UZQ', // truncated for example
+  issuer: 'GBBD47UZQD',
+}
+
+const mockEUR: TokenInfo = {
+  symbol: 'EUR',
+  decimals: 2,
+  address: 'CEUR5CRBJZ',
+  issuer: 'CEUR5CRBJZTRWZXWV',
+}
+
+const mockWBTC: TokenInfo = {
+  symbol: 'WBTC',
+  decimals: 8,
+  address: 'CWBTC52345',
+  issuer: 'CWBTC52345678901',
+}
+
+export const SmallAmount: Story = {
+  args: {
+    amount: BigInt(100000), // 0.1 USDC
+    token: mockUSDC,
+  },
+}
+
+export const StandardAmount: Story = {
+  args: {
+    amount: BigInt(1000000), // 1 USDC
+    token: mockUSDC,
+  },
+}
+
+export const LargeAmount: Story = {
+  args: {
+    amount: BigInt(1234567890000), // 1,234,567.89 USDC
+    token: mockUSDC,
+  },
+}
+
+export const CompactSmall: Story = {
+  args: {
+    amount: BigInt(1200000), // 1.2 USDC
+    token: mockUSDC,
+    compact: true,
+  },
+}
+
+export const CompactLarge: Story = {
+  args: {
+    amount: BigInt(1200000000), // 1.2B USDC in compact
+    token: mockUSDC,
+    compact: true,
+  },
+}
+
+export const VeryLargeWithCompact: Story = {
+  args: {
+    amount: BigInt(5400000000000), // 5.4T in compact notation
+    token: mockUSDC,
+    compact: true,
+  },
+}
+
+export const DifferentToken: Story = {
+  args: {
+    amount: BigInt(12345), // 123.45 EUR
+    token: mockEUR,
+  },
+}
+
+export const Bitcoin: Story = {
+  args: {
+    amount: BigInt(50000000), // 0.5 WBTC
+    token: mockWBTC,
+  },
+}
+
+export const WithoutSymbol: Story = {
+  args: {
+    amount: BigInt(1000000),
+    token: mockUSDC,
+    showSymbol: false,
+  },
+}
+
+export const CustomMaxFractionDigits: Story = {
+  args: {
+    amount: BigInt(1234567),
+    token: mockUSDC,
+    maxFractionDigits: 2,
+  },
+}
+
+function TokenAmountComparison() {
+  const amounts = [
+    { label: '0.001 USDC', amount: BigInt(1000) },
+    { label: '0.1 USDC', amount: BigInt(100000) },
+    { label: '1 USDC', amount: BigInt(1000000) },
+    { label: '100 USDC', amount: BigInt(100000000) },
+    { label: '1000 USDC', amount: BigInt(1000000000) },
+    { label: '1,000,000 USDC', amount: BigInt(1000000000000) },
+  ]
+
+  return (
+    <div className="space-y-3 p-4 bg-muted/30 rounded-lg">
+      <p className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
+        Amount Formatting Comparison
+      </p>
+      {amounts.map((item) => (
+        <div key={item.label} className="flex items-center justify-between gap-4 text-sm">
+          <span className="text-muted-foreground">{item.label}</span>
+          <div className="space-x-4">
+            <span className="inline-block w-32 text-right">
+              <TokenAmount amount={item.amount} token={mockUSDC} />
+            </span>
+            <span className="inline-block w-20 text-right text-xs text-muted-foreground">
+              <TokenAmount amount={item.amount} token={mockUSDC} compact showSymbol={false} />
+              {' USDC'}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export const Comparison: Story = {
+  render: () => <TokenAmountComparison />,
+}
diff --git a/components/ui/tx-preview-dialog.stories.tsx b/components/ui/tx-preview-dialog.stories.tsx
new file mode 100644
index 0000000..ae41a5f
--- /dev/null
+++ b/components/ui/tx-preview-dialog.stories.tsx
@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { TxPreviewDialog } from '@/components/ui/tx-preview-dialog'
+import { Button } from '@/components/ui/button'
+import type { CreateStreamInput } from '@/types/stream'
+
+const meta: Meta<typeof TxPreviewDialog> = {
+  title: 'UI/TxPreviewDialog',
+  component: TxPreviewDialog,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockInput: CreateStreamInput = {
+  recipientAddress: 'GDZSTFXVCDTUJ76ZAV2HA72KYRMF5QJMJBFPMJDHKHXU4LBKCZW75J2Z',
+  tokenAddress: 'CBBT7UGKPGP7EOUDJYVWGXQKD4CWPVD54PH43D5F7WAJT3XJVJ2XPMA',
+  startTime: Math.floor(Date.now() / 1000),
+  endTime: Math.floor(Date.now() / 1000) + 86400 * 30, // 30 days
+  totalAmount: '1000000000', // 1000 USDC
+  cancelable: true,
+  transferable: true,
+}
+
+function DialogTrigger() {
+  const [open, setOpen] = useState(false)
+  const [pending, setPending] = useState(false)
+
+  const handleConfirm = () => {
+    setPending(true)
+    setTimeout(() => {
+      setPending(false)
+      setOpen(false)
+    }, 2000)
+  }
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Transaction Preview</Button>
+      <TxPreviewDialog
+        open={open}
+        input={mockInput}
+        network="testnet"
+        sender="GBZXVUKUU3YQZRYOFQHP53BQXW5X5O4MHVK2D7MKQZH7VH6HMQQXOXM"
+        operationLabel="Create 30-day Stream"
+        onConfirm={handleConfirm}
+        onCancel={() => setOpen(false)}
+        pending={pending}
+      />
+    </>
+  )
+}
+
+export const Default: Story = {
+  render: () => <DialogTrigger />,
+}
+
+function SimulatingState() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Simulating Dialog</Button>
+      <TxPreviewDialog
+        open={open}
+        input={mockInput}
+        network="testnet"
+        sender="GBZXVUKUU3YQZRYOFQHP53BQXW5X5O4MHVK2D7MKQZH7VH6HMQQXOXM"
+        operationLabel="Create 30-day Stream"
+        onConfirm={() => {}}
+        onCancel={() => setOpen(false)}
+        pending={false}
+      />
+    </>
+  )
+}
+
+export const Simulating: Story = {
+  render: () => <SimulatingState />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows the simulating state with spinner while transaction is being simulated',
+      },
+    },
+  },
+}
+
+function SuccessState() {
+  const [open, setOpen] = useState(false)
+  const [pending, setPending] = useState(false)
+
+  const handleConfirm = () => {
+    setPending(true)
+    setTimeout(() => {
+      setPending(false)
+      setOpen(false)
+    }, 2000)
+  }
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Success Preview</Button>
+      <TxPreviewDialog
+        open={open}
+        input={mockInput}
+        network="testnet"
+        sender="GBZXVUKUU3YQZRYOFQHP53BQXW5X5O4MHVK2D7MKQZH7VH6HMQQXOXM"
+        operationLabel="Create 30-day Stream"
+        onConfirm={handleConfirm}
+        onCancel={() => setOpen(false)}
+        pending={pending}
+      />
+    </>
+  )
+}
+
+export const SuccessSimulation: Story = {
+  render: () => <SuccessState />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows successful simulation with estimated fees and resource usage',
+      },
+    },
+  },
+}
+
+function FailedState() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant="destructive">
+        Open Failed Preview
+      </Button>
+      <TxPreviewDialog
+        open={open}
+        input={mockInput}
+        network="testnet"
+        sender="GBZXVUKUU3YQZRYOFQHP53BQXW5X5O4MHVK2D7MKQZH7VH6HMQQXOXM"
+        operationLabel="Create 30-day Stream"
+        onConfirm={() => {}}
+        onCancel={() => setOpen(false)}
+        pending={false}
+      />
+    </>
+  )
+}
+
+export const FailedSimulation: Story = {
+  render: () => <FailedState />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows failed simulation with error message, confirm button is disabled',
+      },
+    },
+  },
+}
+
+function PendingState() {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <TxPreviewDialog
+      open={open}
+      input={mockInput}
+      network="testnet"
+      sender="GBZXVUKUU3YQZRYOFQHP53BQXW5X5O4MHVK2D7MKQZH7VH6HMQQXOXM"
+      operationLabel="Create 30-day Stream"
+      onConfirm={() => {}}
+      onCancel={() => setOpen(false)}
+      pending={true}
+    />
+  )
+}
+
+export const PendingSign: Story = {
+  render: () => <PendingState />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows pending state when user is signing the transaction in their wallet',
+      },
+    },
+  },
+}