diff --git a/.changeset/rude-taxis-raise.md b/.changeset/rude-taxis-raise.md
new file mode 100644
index 0000000000..9452d47621
--- /dev/null
+++ b/.changeset/rude-taxis-raise.md
@@ -0,0 +1,7 @@
+---
+'@penumbra-zone/ui': major
+'node-status': patch
+'minifront': patch
+---
+
+UI: refactor the package to provide better and more clear exports. Includes a readme with setting up the UI package and more storybook stories.
diff --git a/apps/minifront/src/components/dashboard/assets-table/equivalent-values.tsx b/apps/minifront/src/components/dashboard/assets-table/equivalent-values.tsx
index 095f9bf5ea..ae9a935b70 100644
--- a/apps/minifront/src/components/dashboard/assets-table/equivalent-values.tsx
+++ b/apps/minifront/src/components/dashboard/assets-table/equivalent-values.tsx
@@ -1,7 +1,7 @@
 import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
 import { asValueView } from '@penumbra-zone/getters/equivalent-value';
 import { getDisplayDenomFromView, getEquivalentValues } from '@penumbra-zone/getters/value-view';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 
 export const EquivalentValues = ({ valueView }: { valueView?: ValueView }) => {
   const equivalentValuesAsValueViews = (getEquivalentValues.optional()(valueView) ?? []).map(
diff --git a/apps/minifront/src/components/dashboard/assets-table/index.tsx b/apps/minifront/src/components/dashboard/assets-table/index.tsx
index ee714bea71..20254de5d9 100644
--- a/apps/minifront/src/components/dashboard/assets-table/index.tsx
+++ b/apps/minifront/src/components/dashboard/assets-table/index.tsx
@@ -1,5 +1,4 @@
-import { AddressIcon } from '@repo/ui/components/ui/address-icon';
-import { AddressComponent } from '@repo/ui/components/ui/address-component';
+import { AddressComponent, AddressIcon } from '@repo/ui/components/ui/address';
 import {
   Table,
   TableBody,
@@ -8,7 +7,7 @@ import {
   TableHeader,
   TableRow,
 } from '@repo/ui/components/ui/table';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { EquivalentValues } from './equivalent-values';
 import { Fragment } from 'react';
 import { shouldDisplay } from './helpers';
diff --git a/apps/minifront/src/components/header/header.tsx b/apps/minifront/src/components/header/header.tsx
index 825b8d82fc..e1eb23bcca 100644
--- a/apps/minifront/src/components/header/header.tsx
+++ b/apps/minifront/src/components/header/header.tsx
@@ -1,4 +1,4 @@
-import { CondensedBlockSyncStatus } from '@repo/ui/components/ui/block-sync-status/condensed';
+import { CondensedBlockSyncStatus } from '@repo/ui/components/ui/block-sync-status';
 import { TestnetBanner } from '@repo/ui/components/ui/testnet-banner';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
diff --git a/apps/minifront/src/components/send/receive.tsx b/apps/minifront/src/components/send/receive.tsx
index 7b2c08703e..f44f24df33 100644
--- a/apps/minifront/src/components/send/receive.tsx
+++ b/apps/minifront/src/components/send/receive.tsx
@@ -1,4 +1,4 @@
-import { SelectAccount } from '@repo/ui/components/ui/select-account';
+import { SelectAccount } from '@repo/ui/components/ui/select';
 import { getAddrByIndex } from '../../fetchers/address';
 
 export const Receive = () => {
diff --git a/apps/minifront/src/components/shared/gas-fee.tsx b/apps/minifront/src/components/shared/gas-fee.tsx
index 9481013a90..becb4fdbb9 100644
--- a/apps/minifront/src/components/shared/gas-fee.tsx
+++ b/apps/minifront/src/components/shared/gas-fee.tsx
@@ -4,7 +4,7 @@ import {
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/fee/v1/fee_pb';
 import { SegmentedPicker, SegmentedPickerOption } from '@repo/ui/components/ui/segmented-picker';
 import { InputBlock } from './input-block';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import {
   Metadata,
   ValueView,
diff --git a/apps/minifront/src/components/shared/selectors/asset-selector.tsx b/apps/minifront/src/components/shared/selectors/asset-selector.tsx
index ef51d763de..555b899b88 100644
--- a/apps/minifront/src/components/shared/selectors/asset-selector.tsx
+++ b/apps/minifront/src/components/shared/selectors/asset-selector.tsx
@@ -1,10 +1,10 @@
 import { Dialog, DialogClose, DialogContent, DialogHeader } from '@repo/ui/components/ui/dialog';
-import { AssetIcon } from '@repo/ui/components/ui/tx/view/asset-icon';
+import { AssetIcon } from '@repo/ui/components/ui/asset-icon';
 import {
   Metadata,
   ValueView,
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { useEffect, useId, useMemo, useState } from 'react';
 import { IconInput } from '@repo/ui/components/ui/icon-input';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
diff --git a/apps/minifront/src/components/shared/selectors/balance-item.tsx b/apps/minifront/src/components/shared/selectors/balance-item.tsx
index 0aad0c58a2..7d77869f1b 100644
--- a/apps/minifront/src/components/shared/selectors/balance-item.tsx
+++ b/apps/minifront/src/components/shared/selectors/balance-item.tsx
@@ -4,8 +4,8 @@ import { getMetadataFromBalancesResponseOptional } from '@penumbra-zone/getters/
 import { useMemo } from 'react';
 import { DialogClose } from '@repo/ui/components/ui/dialog';
 import { cn } from '@repo/ui/lib/utils';
-import { AssetIcon } from '@repo/ui/components/ui/tx/view/asset-icon';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { AssetIcon } from '@repo/ui/components/ui/asset-icon';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 
 interface BalanceItemProps {
   asset: BalanceOrMetadata;
diff --git a/apps/minifront/src/components/shared/selectors/balance-selector.tsx b/apps/minifront/src/components/shared/selectors/balance-selector.tsx
index c2248775be..e5592b10d2 100644
--- a/apps/minifront/src/components/shared/selectors/balance-selector.tsx
+++ b/apps/minifront/src/components/shared/selectors/balance-selector.tsx
@@ -2,7 +2,7 @@ import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { useId, useState } from 'react';
 import { IconInput } from '@repo/ui/components/ui/icon-input';
 import { Dialog, DialogContent, DialogHeader } from '@repo/ui/components/ui/dialog';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { BalancesResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb';
 import { Box } from '@repo/ui/components/ui/box';
 import { motion } from 'framer-motion';
diff --git a/apps/minifront/src/components/staking/account/delegation-value-view/index.tsx b/apps/minifront/src/components/staking/account/delegation-value-view/index.tsx
index d6db861ee4..26bb6b3134 100644
--- a/apps/minifront/src/components/staking/account/delegation-value-view/index.tsx
+++ b/apps/minifront/src/components/staking/account/delegation-value-view/index.tsx
@@ -1,6 +1,6 @@
 import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
 import { ValidatorInfoComponent } from './validator-info-component';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { StakingActions } from './staking-actions';
 import { memo, useMemo } from 'react';
 import {
diff --git a/apps/minifront/src/components/staking/account/delegation-value-view/validator-info-component.tsx b/apps/minifront/src/components/staking/account/delegation-value-view/validator-info-component.tsx
index 64d39801e8..72abc0192c 100644
--- a/apps/minifront/src/components/staking/account/delegation-value-view/validator-info-component.tsx
+++ b/apps/minifront/src/components/staking/account/delegation-value-view/validator-info-component.tsx
@@ -13,7 +13,7 @@ import {
 } from '@penumbra-zone/getters/validator-info';
 import { calculateCommissionAsPercentage } from '@penumbra-zone/types/staking';
 import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { AssetIcon } from '@repo/ui/components/ui/tx/view/asset-icon';
+import { AssetIcon } from '@repo/ui/components/ui/asset-icon';
 
 /**
  * Renders a single `ValidatorInfo`: its name and identity key,
diff --git a/apps/minifront/src/components/staking/account/header/index.tsx b/apps/minifront/src/components/staking/account/header/index.tsx
index cedb23deb8..17bf347e09 100644
--- a/apps/minifront/src/components/staking/account/header/index.tsx
+++ b/apps/minifront/src/components/staking/account/header/index.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@repo/ui/components/ui/button';
 import { Card, CardContent } from '@repo/ui/components/ui/card';
 import { AccountSwitcher } from '@repo/ui/components/ui/account-switcher';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { Stat } from './stat';
 import { AllSlices } from '../../../../state';
 import { UnbondingTokens } from './unbonding-tokens';
diff --git a/apps/minifront/src/components/staking/account/header/unbonding-tokens.tsx b/apps/minifront/src/components/staking/account/header/unbonding-tokens.tsx
index a8e5c4bd83..672df1ca97 100644
--- a/apps/minifront/src/components/staking/account/header/unbonding-tokens.tsx
+++ b/apps/minifront/src/components/staking/account/header/unbonding-tokens.tsx
@@ -9,7 +9,7 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from '@repo/ui/components/ui/tooltip';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { ReactNode } from 'react';
 import { zeroValueView } from '../../../../utils/zero-value-view';
 
diff --git a/apps/minifront/src/components/swap/auction-list/filters.tsx b/apps/minifront/src/components/swap/auction-list/filters.tsx
index 39217d401f..3f1a613e5e 100644
--- a/apps/minifront/src/components/swap/auction-list/filters.tsx
+++ b/apps/minifront/src/components/swap/auction-list/filters.tsx
@@ -1,7 +1,7 @@
 import { ListFilter } from 'lucide-react';
 import { AllSlices } from '../../../state';
 import { useStoreShallow } from '../../../utils/use-store-shallow';
-import { PopoverMenu, PopoverMenuItem } from '@repo/ui/components/ui/popover-menu';
+import { PopoverMenu, PopoverMenuItem } from '@repo/ui/components/ui/popover';
 import type { Filter as TFilter } from '../../../state/swap/dutch-auction';
 
 const filtersSelector = (state: AllSlices) => ({
diff --git a/apps/minifront/src/components/swap/swap-form/simulate-swap-result/index.tsx b/apps/minifront/src/components/swap/swap-form/simulate-swap-result/index.tsx
index 2ce41cdef7..73a0b82cca 100644
--- a/apps/minifront/src/components/swap/swap-form/simulate-swap-result/index.tsx
+++ b/apps/minifront/src/components/swap/swap-form/simulate-swap-result/index.tsx
@@ -1,4 +1,4 @@
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { PriceImpact } from './price-impact';
 import { motion } from 'framer-motion';
 import { SimulateSwapResult as TSimulateSwapResult } from '../../../../state/swap';
diff --git a/apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/index.tsx b/apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/index.tsx
index 267a8ded09..3733a5c331 100644
--- a/apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/index.tsx
+++ b/apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/index.tsx
@@ -4,7 +4,7 @@ import {
   Metadata,
   ValueView,
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { ArrowDown, ArrowUp } from 'lucide-react';
 
 export const Traces = ({
diff --git a/apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/trace/index.tsx b/apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/trace/index.tsx
index 593dbe6547..14e5bc5ade 100644
--- a/apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/trace/index.tsx
+++ b/apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/trace/index.tsx
@@ -5,7 +5,7 @@ import {
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
 import { SwapExecution_Trace } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/dex/v1/dex_pb';
 import { bech32mAssetId } from '@penumbra-zone/bech32m/passet';
-import { ValueViewComponent } from '@repo/ui/components/ui/tx/view/value';
+import { ValueViewComponent } from '@repo/ui/components/ui/value';
 import { Price } from './price';
 
 const getValueView = (metadataByAssetId: Record<string, Metadata>, { amount, assetId }: Value) =>
diff --git a/apps/minifront/src/components/swap/unclaimed-swaps.tsx b/apps/minifront/src/components/swap/unclaimed-swaps.tsx
index 60e036b723..4fed62091e 100644
--- a/apps/minifront/src/components/swap/unclaimed-swaps.tsx
+++ b/apps/minifront/src/components/swap/unclaimed-swaps.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@repo/ui/components/ui/button';
 import { Card } from '@repo/ui/components/ui/card';
-import { AssetIcon } from '@repo/ui/components/ui/tx/view/asset-icon';
+import { AssetIcon } from '@repo/ui/components/ui/asset-icon';
 import { AllSlices } from '../../state';
 import { useUnclaimedSwaps } from '../../state/unclaimed-swaps';
 import { getSwapRecordCommitment } from '@penumbra-zone/getters/swap-record';
diff --git a/apps/minifront/src/components/tx-details/tx-viewer.tsx b/apps/minifront/src/components/tx-details/tx-viewer.tsx
index 4109663abf..113c0e69e0 100644
--- a/apps/minifront/src/components/tx-details/tx-viewer.tsx
+++ b/apps/minifront/src/components/tx-details/tx-viewer.tsx
@@ -1,5 +1,5 @@
 import { JsonViewer } from '@repo/ui/components/ui/json-viewer';
-import { TransactionViewComponent } from '@repo/ui/components/ui/tx/view/transaction';
+import { TransactionViewComponent } from '@repo/ui/components/ui/tx';
 import { TransactionInfo } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb';
 import type { Jsonified } from '@penumbra-zone/types/jsonified';
 import { useState } from 'react';
diff --git a/packages/ui/components/ui/account-switcher.test.tsx b/packages/ui/components/ui/account-switcher/account-switcher.test.tsx
similarity index 98%
rename from packages/ui/components/ui/account-switcher.test.tsx
rename to packages/ui/components/ui/account-switcher/account-switcher.test.tsx
index d7917b1be4..b57c7323c2 100644
--- a/packages/ui/components/ui/account-switcher.test.tsx
+++ b/packages/ui/components/ui/account-switcher/account-switcher.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { AccountSwitcher } from './account-switcher';
+import { AccountSwitcher } from '.';
 import { fireEvent, render } from '@testing-library/react';
 
 describe('<AccountSwitcher />', () => {
diff --git a/packages/ui/components/ui/account-switcher.tsx b/packages/ui/components/ui/account-switcher/index.tsx
similarity index 97%
rename from packages/ui/components/ui/account-switcher.tsx
rename to packages/ui/components/ui/account-switcher/index.tsx
index 0ce8bd5afb..5f63eea8bb 100644
--- a/packages/ui/components/ui/account-switcher.tsx
+++ b/packages/ui/components/ui/account-switcher/index.tsx
@@ -1,8 +1,8 @@
 import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { cn } from '../../lib/utils';
-import { Button } from './button';
-import { Input } from './input';
+import { cn } from '../../../lib/utils';
+import { Button } from '../button';
+import { Input } from '../input';
 
 const MAX_INDEX = 2 ** 32;
 
diff --git a/packages/ui/components/ui/address-view/address-view.stories.tsx b/packages/ui/components/ui/address-view/address-view.stories.tsx
new file mode 100644
index 0000000000..c6a21394b0
--- /dev/null
+++ b/packages/ui/components/ui/address-view/address-view.stories.tsx
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AddressViewComponent } from '.';
+import {
+  Address,
+  AddressIndex,
+  AddressView,
+  AddressView_Decoded,
+} from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
+import { addressFromBech32m } from '@penumbra-zone/bech32m/penumbra';
+
+const meta: Meta<typeof AddressViewComponent> = {
+  component: AddressViewComponent,
+  title: 'AddressViewComponent',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof AddressViewComponent>;
+
+const EXAMPLE_VIEW = new AddressView({
+  addressView: {
+    case: 'decoded',
+
+    value: new AddressView_Decoded({
+      address: new Address({ inner: new Uint8Array(80) }),
+      index: new AddressIndex({
+        account: 0,
+        randomizer: new Uint8Array([0, 0, 0]),
+      }),
+    }),
+  },
+});
+
+const EXAMPLE_VIEW_OPAQUE = new AddressView({
+  addressView: {
+    case: 'opaque',
+    value: {
+      address: addressFromBech32m(
+        'penumbra1e8k5cyds484dxvapeamwveh5khqv4jsvyvaf5wwxaaccgfghm229qw03pcar3ryy8smptevstycch0qk3uu0rgkvtjpxy3cu3rjd0agawqtlz6erev28a6sg69u7cxy0t02nd4',
+      ),
+    },
+  },
+});
+
+export const Decoded: Story = {
+  args: {
+    view: EXAMPLE_VIEW,
+  },
+};
+
+export const Copiable: Story = {
+  args: {
+    view: EXAMPLE_VIEW,
+    copyable: true,
+  },
+};
+
+export const Opaque: Story = {
+  args: {
+    view: EXAMPLE_VIEW_OPAQUE,
+  },
+};
diff --git a/packages/ui/components/ui/tx/view/address-view.test.tsx b/packages/ui/components/ui/address-view/address-view.test.tsx
similarity index 97%
rename from packages/ui/components/ui/tx/view/address-view.test.tsx
rename to packages/ui/components/ui/address-view/address-view.test.tsx
index 536d65ece2..21ea592299 100644
--- a/packages/ui/components/ui/tx/view/address-view.test.tsx
+++ b/packages/ui/components/ui/address-view/address-view.test.tsx
@@ -4,7 +4,7 @@ import {
   AddressView,
   AddressView_Decoded,
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
-import { AddressViewComponent } from './address-view';
+import { AddressViewComponent } from '.';
 import { describe, expect, test } from 'vitest';
 import { render } from '@testing-library/react';
 
diff --git a/packages/ui/components/ui/tx/view/address-view.tsx b/packages/ui/components/ui/address-view/index.tsx
similarity index 88%
rename from packages/ui/components/ui/tx/view/address-view.tsx
rename to packages/ui/components/ui/address-view/index.tsx
index 461fd0db85..d6a36dd2b2 100644
--- a/packages/ui/components/ui/tx/view/address-view.tsx
+++ b/packages/ui/components/ui/address-view/index.tsx
@@ -1,7 +1,7 @@
-import { AddressIcon } from '../../address-icon';
+import { AddressIcon } from '../address/address-icon';
 import { AddressView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
-import { CopyToClipboardIconButton } from '../../copy-to-clipboard-icon-button';
-import { AddressComponent } from '../../address-component';
+import { CopyToClipboardIconButton } from '../copy-to-clipboard/copy-to-clipboard-icon-button';
+import { AddressComponent } from '../address/address-component';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
 
 interface AddressViewProps {
diff --git a/packages/ui/components/ui/address.tsx b/packages/ui/components/ui/address.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/ui/components/ui/address-component.test.tsx b/packages/ui/components/ui/address/address-component.test.tsx
similarity index 100%
rename from packages/ui/components/ui/address-component.test.tsx
rename to packages/ui/components/ui/address/address-component.test.tsx
diff --git a/packages/ui/components/ui/address-component.tsx b/packages/ui/components/ui/address/address-component.tsx
similarity index 93%
rename from packages/ui/components/ui/address-component.tsx
rename to packages/ui/components/ui/address/address-component.tsx
index 40d9ca228b..4d0ec27e71 100644
--- a/packages/ui/components/ui/address-component.tsx
+++ b/packages/ui/components/ui/address/address-component.tsx
@@ -1,7 +1,7 @@
 import { Address } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
 
-interface AddressComponentProps {
+export interface AddressComponentProps {
   address: Address;
   ephemeral?: boolean;
 }
diff --git a/packages/ui/components/ui/address-icon.tsx b/packages/ui/components/ui/address/address-icon.tsx
similarity index 85%
rename from packages/ui/components/ui/address-icon.tsx
rename to packages/ui/components/ui/address/address-icon.tsx
index fc14ce11c7..5b6e1fe4b1 100644
--- a/packages/ui/components/ui/address-icon.tsx
+++ b/packages/ui/components/ui/address/address-icon.tsx
@@ -1,8 +1,8 @@
-import { Identicon } from './identicon';
+import { Identicon } from '../identicon';
 import { Address } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
 
-interface AddressIconProps {
+export interface AddressIconProps {
   address: Address;
   size: number;
 }
diff --git a/packages/ui/components/ui/address/index.tsx b/packages/ui/components/ui/address/index.tsx
new file mode 100644
index 0000000000..fab022d05a
--- /dev/null
+++ b/packages/ui/components/ui/address/index.tsx
@@ -0,0 +1,2 @@
+export { AddressIcon, type AddressIconProps } from './address-icon';
+export { AddressComponent, type AddressComponentProps } from './address-component';
diff --git a/packages/ui/components/ui/asset-icon/asset-icon.stories.tsx b/packages/ui/components/ui/asset-icon/asset-icon.stories.tsx
new file mode 100644
index 0000000000..f97205a4a0
--- /dev/null
+++ b/packages/ui/components/ui/asset-icon/asset-icon.stories.tsx
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AssetIcon } from '.';
+import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
+
+const meta: Meta<typeof AssetIcon> = {
+  component: AssetIcon,
+  title: 'AssetIcon',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof AssetIcon>;
+
+const EXAMPLE_METADATA = new Metadata({
+  base: 'upenumbra',
+  display: 'penumbra',
+  symbol: 'UM',
+  images: [
+    {
+      svg: 'https://raw.githubusercontent.com/prax-wallet/registry/main/images/um.svg',
+    },
+  ],
+});
+
+export const Small: Story = {
+  args: {
+    metadata: EXAMPLE_METADATA,
+  },
+};
+
+export const ExtraSmall: Story = {
+  args: {
+    metadata: EXAMPLE_METADATA,
+    size: 'xs',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    metadata: EXAMPLE_METADATA,
+    size: 'lg',
+  },
+};
diff --git a/packages/ui/components/ui/tx/view/asset-icon/delegation-token-icon.tsx b/packages/ui/components/ui/asset-icon/delegation-token-icon.tsx
similarity index 100%
rename from packages/ui/components/ui/tx/view/asset-icon/delegation-token-icon.tsx
rename to packages/ui/components/ui/asset-icon/delegation-token-icon.tsx
diff --git a/packages/ui/components/ui/tx/view/asset-icon/index.tsx b/packages/ui/components/ui/asset-icon/index.tsx
similarity index 94%
rename from packages/ui/components/ui/tx/view/asset-icon/index.tsx
rename to packages/ui/components/ui/asset-icon/index.tsx
index 79bfb363a2..0d524c2c13 100644
--- a/packages/ui/components/ui/tx/view/asset-icon/index.tsx
+++ b/packages/ui/components/ui/asset-icon/index.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { Identicon } from '../../../identicon';
-import { cn } from '../../../../../lib/utils';
+import { Identicon } from '../identicon';
+import { cn } from '../../../lib/utils';
 import { DelegationTokenIcon } from './delegation-token-icon';
 import { getDisplay } from '@penumbra-zone/getters/metadata';
 import { assetPatterns } from '@penumbra-zone/types/assets';
diff --git a/packages/ui/components/ui/tx/view/asset-icon/unbonding-token-icon.tsx b/packages/ui/components/ui/asset-icon/unbonding-token-icon.tsx
similarity index 100%
rename from packages/ui/components/ui/tx/view/asset-icon/unbonding-token-icon.tsx
rename to packages/ui/components/ui/asset-icon/unbonding-token-icon.tsx
diff --git a/packages/ui/components/ui/auction-id-component.tsx b/packages/ui/components/ui/auction-id-component/index.tsx
similarity index 91%
rename from packages/ui/components/ui/auction-id-component.tsx
rename to packages/ui/components/ui/auction-id-component/index.tsx
index 17234655bc..c0fddd3f52 100644
--- a/packages/ui/components/ui/auction-id-component.tsx
+++ b/packages/ui/components/ui/auction-id-component/index.tsx
@@ -1,4 +1,4 @@
-import { CopyToClipboardIconButton } from './copy-to-clipboard-icon-button';
+import { CopyToClipboardIconButton } from '../copy-to-clipboard/copy-to-clipboard-icon-button';
 import { useMemo } from 'react';
 import { AuctionId } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/auction/v1/auction_pb';
 import { bech32mAuctionId, PENUMBRA_BECH32M_AUCTION_PREFIX } from '@penumbra-zone/bech32m/pauctid';
diff --git a/packages/ui/components/ui/avatar/avatar.stories.tsx b/packages/ui/components/ui/avatar/avatar.stories.tsx
new file mode 100644
index 0000000000..5d855fd77a
--- /dev/null
+++ b/packages/ui/components/ui/avatar/avatar.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Avatar, AvatarImage } from '.';
+
+const meta: Meta<typeof Avatar> = {
+  component: Avatar,
+  title: 'Avatar',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+const EXAMPLE_URL =
+  'https://images.unsplash.com/photo-1473830394358-91588751b241?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+
+export const Full: Story = {
+  args: {},
+  render: args => {
+    return (
+      <Avatar {...args}>
+        <AvatarImage src={EXAMPLE_URL} />
+      </Avatar>
+    );
+  },
+};
diff --git a/packages/ui/components/ui/avatar.tsx b/packages/ui/components/ui/avatar/index.tsx
similarity index 97%
rename from packages/ui/components/ui/avatar.tsx
rename to packages/ui/components/ui/avatar/index.tsx
index 5b6d80ea87..c5f4894664 100644
--- a/packages/ui/components/ui/avatar.tsx
+++ b/packages/ui/components/ui/avatar/index.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
diff --git a/packages/ui/components/ui/balance-value-view.test.tsx b/packages/ui/components/ui/balance-value-view/balance-value-view.test.tsx
similarity index 96%
rename from packages/ui/components/ui/balance-value-view.test.tsx
rename to packages/ui/components/ui/balance-value-view/balance-value-view.test.tsx
index 6ea5ff57d7..ca335472e0 100644
--- a/packages/ui/components/ui/balance-value-view.test.tsx
+++ b/packages/ui/components/ui/balance-value-view/balance-value-view.test.tsx
@@ -4,11 +4,11 @@ import {
   Metadata,
   ValueView,
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { BalanceValueView } from './balance-value-view';
+import { BalanceValueView } from '.';
 import { base64ToUint8Array } from '@penumbra-zone/types/base64';
 
 // Mocking the WalletIcon component
-vi.mock('./icons/wallet', () => ({
+vi.mock('../icons/wallet', () => ({
   WalletIcon: ({ className }: { className: string }) => (
     <div data-testid='wallet-icon' className={className}></div>
   ),
diff --git a/packages/ui/components/ui/balance-value-view.tsx b/packages/ui/components/ui/balance-value-view/index.tsx
similarity index 94%
rename from packages/ui/components/ui/balance-value-view.tsx
rename to packages/ui/components/ui/balance-value-view/index.tsx
index 1f685fd186..6db278e1fb 100644
--- a/packages/ui/components/ui/balance-value-view.tsx
+++ b/packages/ui/components/ui/balance-value-view/index.tsx
@@ -1,9 +1,9 @@
 import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { WalletIcon } from './icons/wallet';
+import { WalletIcon } from '../icons/wallet';
 import { getAmount, getDisplayDenomExponentFromValueView } from '@penumbra-zone/getters/value-view';
 import { formatAmount } from '@penumbra-zone/types/amount';
 import { Amount } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/num/v1/num_pb';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 /**
  * Renders a `ValueView` as a balance with a wallet icon.
diff --git a/packages/ui/components/ui/block-sync-status/condensed.tsx b/packages/ui/components/ui/block-sync-status/index.tsx
similarity index 100%
rename from packages/ui/components/ui/block-sync-status/condensed.tsx
rename to packages/ui/components/ui/block-sync-status/index.tsx
diff --git a/packages/ui/components/ui/box/box.stories.tsx b/packages/ui/components/ui/box/box.stories.tsx
new file mode 100644
index 0000000000..919c344db7
--- /dev/null
+++ b/packages/ui/components/ui/box/box.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Box } from '.';
+
+const meta: Meta<typeof Box> = {
+  component: Box,
+  title: 'Box',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Box>;
+
+export const Basic: Story = {
+  args: {
+    children: 'Box',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    children: 'Box',
+    label: 'Label',
+    headerContent: 'Header content',
+  },
+};
+
+export const SpacingCompact: Story = {
+  args: {
+    children: 'Box',
+    spacing: 'compact',
+  },
+};
+
+export const RedBorder: Story = {
+  args: {
+    children: 'Box',
+    state: 'error',
+  },
+};
diff --git a/packages/ui/components/ui/box.tsx b/packages/ui/components/ui/box/index.tsx
similarity index 98%
rename from packages/ui/components/ui/box.tsx
rename to packages/ui/components/ui/box/index.tsx
index 87835dfe6d..25529d0386 100644
--- a/packages/ui/components/ui/box.tsx
+++ b/packages/ui/components/ui/box/index.tsx
@@ -1,7 +1,7 @@
 import { cva, VariantProps } from 'class-variance-authority';
 import { motion } from 'framer-motion';
 import { PropsWithChildren, ReactNode } from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 import { RESOLVED_TAILWIND_CONFIG } from '@repo/tailwind-config/resolved-tailwind-config';
 
 const variants = cva('rounded-lg border bg-background', {
diff --git a/packages/ui/components/ui/button.stories.tsx b/packages/ui/components/ui/button/button.stories.tsx
similarity index 91%
rename from packages/ui/components/ui/button.stories.tsx
rename to packages/ui/components/ui/button/button.stories.tsx
index 3e75704290..092663f523 100644
--- a/packages/ui/components/ui/button.stories.tsx
+++ b/packages/ui/components/ui/button/button.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button } from './button';
+import { Button } from '.';
 
 const meta: Meta<typeof Button> = {
   component: Button,
diff --git a/packages/ui/components/ui/button.tsx b/packages/ui/components/ui/button/index.tsx
similarity index 98%
rename from packages/ui/components/ui/button.tsx
rename to packages/ui/components/ui/button/index.tsx
index 1396535f59..d0f90f813c 100644
--- a/packages/ui/components/ui/button.tsx
+++ b/packages/ui/components/ui/button/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-lg px-4 font-bold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
diff --git a/packages/ui/components/ui/candlestick-plot.tsx b/packages/ui/components/ui/candlestick-plot/index.tsx
similarity index 100%
rename from packages/ui/components/ui/candlestick-plot.tsx
rename to packages/ui/components/ui/candlestick-plot/index.tsx
diff --git a/packages/ui/components/ui/card/card.stories.tsx b/packages/ui/components/ui/card/card.stories.tsx
new file mode 100644
index 0000000000..6a5749a092
--- /dev/null
+++ b/packages/ui/components/ui/card/card.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter } from '.';
+
+const meta: Meta<typeof Card> = {
+  component: Card,
+  title: 'Card',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Basic: Story = {
+  args: {
+    children: 'Save',
+  },
+};
+
+export const Gradient: Story = {
+  args: {
+    children: 'Save',
+    gradient: true,
+  },
+};
+
+export const Light: Story = {
+  args: {
+    children: 'Save',
+    light: true,
+  },
+};
+
+export const Full: Story = {
+  args: {},
+  render: args => {
+    return (
+      <Card {...args}>
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+        </CardHeader>
+        <CardDescription>Card Description</CardDescription>
+        <CardContent>This is content</CardContent>
+        <CardFooter>Card footer</CardFooter>
+      </Card>
+    );
+  },
+};
diff --git a/packages/ui/components/ui/card.tsx b/packages/ui/components/ui/card/index.tsx
similarity index 98%
rename from packages/ui/components/ui/card.tsx
rename to packages/ui/components/ui/card/index.tsx
index e20249008e..3b0b9b202b 100644
--- a/packages/ui/components/ui/card.tsx
+++ b/packages/ui/components/ui/card/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 import { motion } from 'framer-motion';
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/packages/ui/components/ui/command.tsx b/packages/ui/components/ui/command/index.tsx
similarity index 98%
rename from packages/ui/components/ui/command.tsx
rename to packages/ui/components/ui/command/index.tsx
index d5bb1c872a..18361801e3 100644
--- a/packages/ui/components/ui/command.tsx
+++ b/packages/ui/components/ui/command/index.tsx
@@ -4,8 +4,8 @@ import * as React from 'react';
 import { type DialogProps } from '@radix-ui/react-dialog';
 import { Command as CommandPrimitive } from 'cmdk';
 import { Search } from 'lucide-react';
-import { cn } from '../../lib/utils';
-import { Dialog, DialogContent } from './dialog';
+import { cn } from '../../../lib/utils';
+import { Dialog, DialogContent } from '../dialog';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
diff --git a/packages/ui/components/ui/conditional-wrap.tsx b/packages/ui/components/ui/conditional-wrap.tsx
deleted file mode 100644
index 66fbb0ef73..0000000000
--- a/packages/ui/components/ui/conditional-wrap.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ReactNode } from 'react';
-
-/**
- * Little utility component to optionally wrap a React component with another
- * React component, depending on a condition.
- *
- * @example
- * ```tsx
- * <ConditionalWrap
- *   condition={shouldUseTooltip}
- *   wrap={(children) => (
- *     <Tooltip>
- *       <TooltipTrigger>{children}</TooltipTrigger>
- *       <TooltipContent>Here is the tooltip text.</TooltipContent>
- *     </Tooltip>
- *   )}
- * >
- *   Here is the content that may or may not need a tooltip.
- * </ConditionalWrap>
- * ```
- *
- * @see https://stackoverflow.com/a/56870316/974981
- */
-export const ConditionalWrap = ({
-  condition,
-  wrap,
-  children,
-}: {
-  condition: boolean;
-  wrap: (children: ReactNode) => ReactNode;
-  children: ReactNode;
-}) => (condition ? wrap(children) : children);
diff --git a/packages/ui/components/ui/copy-to-clipboard-icon-button.tsx b/packages/ui/components/ui/copy-to-clipboard/copy-to-clipboard-icon-button.tsx
similarity index 100%
rename from packages/ui/components/ui/copy-to-clipboard-icon-button.tsx
rename to packages/ui/components/ui/copy-to-clipboard/copy-to-clipboard-icon-button.tsx
diff --git a/packages/ui/components/ui/copy-to-clipboard.tsx b/packages/ui/components/ui/copy-to-clipboard/copy-to-clipboard.tsx
similarity index 94%
rename from packages/ui/components/ui/copy-to-clipboard.tsx
rename to packages/ui/components/ui/copy-to-clipboard/copy-to-clipboard.tsx
index 554eaf688b..b0c8524b80 100644
--- a/packages/ui/components/ui/copy-to-clipboard.tsx
+++ b/packages/ui/components/ui/copy-to-clipboard/copy-to-clipboard.tsx
@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { CheckCircledIcon } from '@radix-ui/react-icons';
-import { Button } from './button';
-import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { cn } from '../../../lib/utils';
 
 export interface CopyToClipboardProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   text: string;
diff --git a/packages/ui/components/ui/copy-to-clipboard/index.ts b/packages/ui/components/ui/copy-to-clipboard/index.ts
new file mode 100644
index 0000000000..2f63825b33
--- /dev/null
+++ b/packages/ui/components/ui/copy-to-clipboard/index.ts
@@ -0,0 +1,2 @@
+export { CopyToClipboardIconButton } from './copy-to-clipboard-icon-button';
+export { CopyToClipboard, type CopyToClipboardProps } from './copy-to-clipboard';
diff --git a/packages/ui/components/ui/dialog/dialog.stories.tsx b/packages/ui/components/ui/dialog/dialog.stories.tsx
new file mode 100644
index 0000000000..780050fda7
--- /dev/null
+++ b/packages/ui/components/ui/dialog/dialog.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Dialog, DialogHeader, DialogClose, DialogContent, DialogTrigger } from '.';
+import { Button } from '../button';
+
+const meta: Meta<typeof Dialog> = {
+  component: Dialog,
+  title: 'Dialog',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+export const Full: Story = {
+  args: {},
+  render: args => {
+    return (
+      <Dialog {...args}>
+        <DialogTrigger>
+          <Button>Open dialog</Button>
+        </DialogTrigger>
+
+        <DialogContent>
+          <DialogHeader>Header here, which includes a built-in close button.</DialogHeader>
+          <p>Content here</p>
+          <DialogClose>
+            <div>Clicking anything inside here will close the dialog.</div>
+          </DialogClose>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+};
diff --git a/packages/ui/components/ui/dialog.tsx b/packages/ui/components/ui/dialog/index.tsx
similarity index 99%
rename from packages/ui/components/ui/dialog.tsx
rename to packages/ui/components/ui/dialog/index.tsx
index 31a52702db..67ad4393a1 100644
--- a/packages/ui/components/ui/dialog.tsx
+++ b/packages/ui/components/ui/dialog/index.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 import { cva, VariantProps } from 'class-variance-authority';
 import { motion } from 'framer-motion';
 
diff --git a/packages/ui/components/ui/dutch-auction-component/progress-bar/index.tsx b/packages/ui/components/ui/dutch-auction-component/progress-bar/index.tsx
index e0495602f2..4b2a64b56c 100644
--- a/packages/ui/components/ui/dutch-auction-component/progress-bar/index.tsx
+++ b/packages/ui/components/ui/dutch-auction-component/progress-bar/index.tsx
@@ -1,5 +1,5 @@
 import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { ValueViewComponent } from '../../tx/view/value';
+import { ValueViewComponent } from '../../value';
 import { DutchAuction } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/auction/v1/auction_pb';
 import { Separator } from '../../separator';
 import { Indicator } from './indicator';
diff --git a/packages/ui/components/ui/fade-in.tsx b/packages/ui/components/ui/fade-in/index.tsx
similarity index 100%
rename from packages/ui/components/ui/fade-in.tsx
rename to packages/ui/components/ui/fade-in/index.tsx
diff --git a/packages/ui/components/ui/fade-transition.tsx b/packages/ui/components/ui/fade-transition/index.tsx
similarity index 93%
rename from packages/ui/components/ui/fade-transition.tsx
rename to packages/ui/components/ui/fade-transition/index.tsx
index a96867931a..b6890d054f 100644
--- a/packages/ui/components/ui/fade-transition.tsx
+++ b/packages/ui/components/ui/fade-transition/index.tsx
@@ -2,7 +2,7 @@
 
 import { motion } from 'framer-motion';
 import React from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const FadeTransition = ({
   children,
diff --git a/packages/ui/components/ui/gradient-header.tsx b/packages/ui/components/ui/gradient-header/index.tsx
similarity index 100%
rename from packages/ui/components/ui/gradient-header.tsx
rename to packages/ui/components/ui/gradient-header/index.tsx
diff --git a/packages/ui/components/ui/icon-input.tsx b/packages/ui/components/ui/icon-input/index.tsx
similarity index 95%
rename from packages/ui/components/ui/icon-input.tsx
rename to packages/ui/components/ui/icon-input/index.tsx
index ad20503922..dc63081726 100644
--- a/packages/ui/components/ui/icon-input.tsx
+++ b/packages/ui/components/ui/icon-input/index.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Input } from './input';
+import { Input } from '../input';
 
 interface IconInputProps {
   value: string;
diff --git a/packages/ui/components/ui/back-icon.tsx b/packages/ui/components/ui/icons/back-icon.tsx
similarity index 93%
rename from packages/ui/components/ui/back-icon.tsx
rename to packages/ui/components/ui/icons/back-icon.tsx
index ed37834a80..8958ffae1c 100644
--- a/packages/ui/components/ui/back-icon.tsx
+++ b/packages/ui/components/ui/icons/back-icon.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ArrowLeftIcon } from '@radix-ui/react-icons';
 import { IconProps } from '@radix-ui/react-icons/dist/types';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export type BackIconProps = IconProps & React.RefAttributes<SVGSVGElement>;
 
diff --git a/packages/ui/components/ui/identity-key-component.tsx b/packages/ui/components/ui/identity-key-component/index.tsx
similarity index 92%
rename from packages/ui/components/ui/identity-key-component.tsx
rename to packages/ui/components/ui/identity-key-component/index.tsx
index fe525633c7..bf9def4e87 100644
--- a/packages/ui/components/ui/identity-key-component.tsx
+++ b/packages/ui/components/ui/identity-key-component/index.tsx
@@ -1,5 +1,5 @@
 import { IdentityKey } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
-import { CopyToClipboardIconButton } from './copy-to-clipboard-icon-button';
+import { CopyToClipboardIconButton } from '../copy-to-clipboard/copy-to-clipboard-icon-button';
 import {
   bech32mIdentityKey,
   PENUMBRA_BECH32M_IDENTITYKEY_PREFIX,
diff --git a/packages/ui/components/ui/input.tsx b/packages/ui/components/ui/input/index.tsx
similarity index 97%
rename from packages/ui/components/ui/input.tsx
rename to packages/ui/components/ui/input/index.tsx
index 99df8010d1..6cf28ceecf 100644
--- a/packages/ui/components/ui/input.tsx
+++ b/packages/ui/components/ui/input/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { cva, VariantProps } from 'class-variance-authority';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const inputVariants = cva(
   'flex h-11 w-full rounded-lg border bg-background px-3 py-2 ring-offset-background [appearance:textfield] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
diff --git a/packages/ui/components/ui/json-viewer.tsx b/packages/ui/components/ui/json-viewer/index.tsx
similarity index 100%
rename from packages/ui/components/ui/json-viewer.tsx
rename to packages/ui/components/ui/json-viewer/index.tsx
diff --git a/packages/ui/components/ui/network.stories.tsx b/packages/ui/components/ui/network.stories.tsx
deleted file mode 100644
index b11d5ae748..0000000000
--- a/packages/ui/components/ui/network.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Network } from './network';
-
-const meta: Meta<typeof Network> = {
-  component: Network,
-  title: 'Network',
-  tags: ['autodocs'],
-};
-export default meta;
-
-type Story = StoryObj<typeof Network>;
-
-export const Basic: Story = {
-  args: {
-    name: 'penumbra-testnet-deimos-6',
-    href: 'https://app.testnet.penumbra.zone',
-  },
-};
diff --git a/packages/ui/components/ui/network.tsx b/packages/ui/components/ui/network.tsx
deleted file mode 100644
index 702b2b29de..0000000000
--- a/packages/ui/components/ui/network.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ExternalLink } from 'lucide-react';
-import { ConditionalWrap } from './conditional-wrap';
-
-export interface NetworkProps {
-  name: string;
-  href?: string;
-}
-
-/**
- * Displays the network (chain ID) we're connected to, as well as an optional
- * connection indicator and a link to the frontend.
- */
-export const Network = ({ name, href }: NetworkProps) => {
-  return (
-    <ConditionalWrap
-      condition={!!href}
-      wrap={children => (
-        <a href={href} target='_blank' rel='noreferrer'>
-          {children}
-        </a>
-      )}
-    >
-      <div
-        className={
-          'flex items-center gap-4 rounded-lg border bg-background px-5 py-[7px] font-bold text-muted-foreground md:px-[25px] xl:px-[18px]'
-        }
-      >
-        <p className='grow truncate whitespace-nowrap'>{name}</p>
-
-        {href && <ExternalLink size={16} className='shrink-0' />}
-      </div>
-    </ConditionalWrap>
-  );
-};
diff --git a/packages/ui/components/ui/pill.tsx b/packages/ui/components/ui/pill/index.tsx
similarity index 100%
rename from packages/ui/components/ui/pill.tsx
rename to packages/ui/components/ui/pill/index.tsx
diff --git a/packages/ui/components/ui/pill/pill.stories.tsx b/packages/ui/components/ui/pill/pill.stories.tsx
new file mode 100644
index 0000000000..8e7ad193d8
--- /dev/null
+++ b/packages/ui/components/ui/pill/pill.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Pill } from '.';
+
+const meta: Meta<typeof Pill> = {
+  component: Pill,
+  title: 'Pill',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Pill>;
+
+export const Basic: Story = {
+  args: {
+    children: 'Pill',
+  },
+};
+
+export const Dashed: Story = {
+  args: {
+    children: 'Pill',
+    variant: 'dashed',
+  },
+};
diff --git a/packages/ui/components/ui/popover/index.tsx b/packages/ui/components/ui/popover/index.tsx
new file mode 100644
index 0000000000..561ba18e60
--- /dev/null
+++ b/packages/ui/components/ui/popover/index.tsx
@@ -0,0 +1,2 @@
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger } from './popover';
+export { PopoverMenu, type PopoverMenuItem } from './popover-menu';
diff --git a/packages/ui/components/ui/popover-menu.stories.tsx b/packages/ui/components/ui/popover/popover-menu.stories.tsx
similarity index 96%
rename from packages/ui/components/ui/popover-menu.stories.tsx
rename to packages/ui/components/ui/popover/popover-menu.stories.tsx
index d009a86f7b..78df069755 100644
--- a/packages/ui/components/ui/popover-menu.stories.tsx
+++ b/packages/ui/components/ui/popover/popover-menu.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
 
 import { PopoverMenu, PopoverMenuItem } from './popover-menu';
-import { Button } from './button';
+import { Button } from '../button';
 
 const meta: Meta<typeof PopoverMenu> = {
   component: PopoverMenu,
diff --git a/packages/ui/components/ui/popover-menu.tsx b/packages/ui/components/ui/popover/popover-menu.tsx
similarity index 100%
rename from packages/ui/components/ui/popover-menu.tsx
rename to packages/ui/components/ui/popover/popover-menu.tsx
diff --git a/packages/ui/components/ui/popover.tsx b/packages/ui/components/ui/popover/popover.tsx
similarity index 96%
rename from packages/ui/components/ui/popover.tsx
rename to packages/ui/components/ui/popover/popover.tsx
index 8f63724371..d55faaf59a 100644
--- a/packages/ui/components/ui/popover.tsx
+++ b/packages/ui/components/ui/popover/popover.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Popover = PopoverPrimitive.Root;
 
diff --git a/packages/ui/components/ui/progress.tsx b/packages/ui/components/ui/progress/index.tsx
similarity index 97%
rename from packages/ui/components/ui/progress.tsx
rename to packages/ui/components/ui/progress/index.tsx
index 50da053c5c..6fa3346b14 100644
--- a/packages/ui/components/ui/progress.tsx
+++ b/packages/ui/components/ui/progress/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as ProgressPrimitive from '@radix-ui/react-progress';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 import { cva, VariantProps } from 'class-variance-authority';
 
 const progressVariants = cva('', {
diff --git a/packages/ui/components/ui/segmented-picker.tsx b/packages/ui/components/ui/segmented-picker/index.tsx
similarity index 98%
rename from packages/ui/components/ui/segmented-picker.tsx
rename to packages/ui/components/ui/segmented-picker/index.tsx
index 6cd622b028..8eb87cd935 100644
--- a/packages/ui/components/ui/segmented-picker.tsx
+++ b/packages/ui/components/ui/segmented-picker/index.tsx
@@ -1,5 +1,5 @@
 import { useId } from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 import { motion } from 'framer-motion';
 
 export interface SegmentedPickerOption<ValueType> {
diff --git a/packages/ui/components/ui/segmented-picker.stories.tsx b/packages/ui/components/ui/segmented-picker/segmented-picker.stories.tsx
similarity index 93%
rename from packages/ui/components/ui/segmented-picker.stories.tsx
rename to packages/ui/components/ui/segmented-picker/segmented-picker.stories.tsx
index c12cc04d4d..7779db584b 100644
--- a/packages/ui/components/ui/segmented-picker.stories.tsx
+++ b/packages/ui/components/ui/segmented-picker/segmented-picker.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
 
-import { SegmentedPicker } from './segmented-picker';
+import { SegmentedPicker } from '.';
 
 const meta: Meta<typeof SegmentedPicker> = {
   component: SegmentedPicker,
diff --git a/packages/ui/components/ui/segmented-picker.test.tsx b/packages/ui/components/ui/segmented-picker/segmented-picker.test.tsx
similarity index 96%
rename from packages/ui/components/ui/segmented-picker.test.tsx
rename to packages/ui/components/ui/segmented-picker/segmented-picker.test.tsx
index 4cf7ceff8c..7c7af699a0 100644
--- a/packages/ui/components/ui/segmented-picker.test.tsx
+++ b/packages/ui/components/ui/segmented-picker/segmented-picker.test.tsx
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render } from '@testing-library/react';
-import { SegmentedPicker } from './segmented-picker';
+import { SegmentedPicker } from '.';
 
 describe('<SegmentedPicker />', () => {
   const onChange = vi.fn();
diff --git a/packages/ui/components/ui/select/index.tsx b/packages/ui/components/ui/select/index.tsx
new file mode 100644
index 0000000000..3764d02b78
--- /dev/null
+++ b/packages/ui/components/ui/select/index.tsx
@@ -0,0 +1,13 @@
+export {
+  Select,
+  SelectItem,
+  SelectContent,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  type SelectTriggerProps,
+} from './select';
+export { SelectAccount, type SelectAccountProps } from './select-account';
+export { SelectList } from './select-list';
diff --git a/packages/ui/components/ui/select-account.tsx b/packages/ui/components/ui/select/select-account.tsx
similarity index 86%
rename from packages/ui/components/ui/select-account.tsx
rename to packages/ui/components/ui/select/select-account.tsx
index 4600c12039..69cb59c5da 100644
--- a/packages/ui/components/ui/select-account.tsx
+++ b/packages/ui/components/ui/select/select-account.tsx
@@ -1,17 +1,17 @@
-import { AddressIcon } from './address-icon';
+import { AddressIcon } from '../address/address-icon';
 import { InfoIcon } from 'lucide-react';
-import { CopyToClipboardIconButton } from './copy-to-clipboard-icon-button';
-import { IncognitoIcon } from './icons/incognito';
-import { Switch } from './switch';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
+import { CopyToClipboardIconButton } from '../copy-to-clipboard/copy-to-clipboard-icon-button';
+import { IncognitoIcon } from '../icons/incognito';
+import { Switch } from '../switch';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../tooltip';
 import { useEffect, useState } from 'react';
-import { AddressComponent } from './address-component';
+import { AddressComponent } from '../address/address-component';
 import { Address } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
-import { AccountSwitcher } from './account-switcher';
+import { AccountSwitcher } from '../account-switcher';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
-import { Box } from './box';
+import { Box } from '../box';
 
-interface SelectAccountProps {
+export interface SelectAccountProps {
   getAddrByIndex: (index: number, ephemeral: boolean) => Promise<Address> | Address;
 }
 
diff --git a/packages/ui/components/ui/select-list.stories.tsx b/packages/ui/components/ui/select/select-list.stories.tsx
similarity index 100%
rename from packages/ui/components/ui/select-list.stories.tsx
rename to packages/ui/components/ui/select/select-list.stories.tsx
diff --git a/packages/ui/components/ui/select-list.tsx b/packages/ui/components/ui/select/select-list.tsx
similarity index 98%
rename from packages/ui/components/ui/select-list.tsx
rename to packages/ui/components/ui/select/select-list.tsx
index 1f88a68515..ca12f3e779 100644
--- a/packages/ui/components/ui/select-list.tsx
+++ b/packages/ui/components/ui/select/select-list.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 /**
  * A select list is a nicely formatted vertical list of options for a user to
diff --git a/packages/ui/components/ui/select.tsx b/packages/ui/components/ui/select/select.tsx
similarity index 99%
rename from packages/ui/components/ui/select.tsx
rename to packages/ui/components/ui/select/select.tsx
index 00c4297b85..6c2120efb4 100644
--- a/packages/ui/components/ui/select.tsx
+++ b/packages/ui/components/ui/select/select.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { cva, type VariantProps } from 'class-variance-authority';
 
diff --git a/packages/ui/components/ui/separator.tsx b/packages/ui/components/ui/separator/index.tsx
similarity index 100%
rename from packages/ui/components/ui/separator.tsx
rename to packages/ui/components/ui/separator/index.tsx
diff --git a/packages/ui/components/ui/sheet.tsx b/packages/ui/components/ui/sheet/index.tsx
similarity index 99%
rename from packages/ui/components/ui/sheet.tsx
rename to packages/ui/components/ui/sheet/index.tsx
index 8f9e37a22a..2ef10d226c 100644
--- a/packages/ui/components/ui/sheet.tsx
+++ b/packages/ui/components/ui/sheet/index.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 import { Cross1Icon } from '@radix-ui/react-icons';
 
 const Sheet = SheetPrimitive.Root;
diff --git a/packages/ui/components/ui/splash-page.tsx b/packages/ui/components/ui/splash-page/index.tsx
similarity index 86%
rename from packages/ui/components/ui/splash-page.tsx
rename to packages/ui/components/ui/splash-page/index.tsx
index 95b858c0c5..0d211b440c 100644
--- a/packages/ui/components/ui/splash-page.tsx
+++ b/packages/ui/components/ui/splash-page/index.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
-import { FadeTransition } from './fade-transition';
-import { AnimatedPenumbra } from './logo/animated-penumbra';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../card';
+import { FadeTransition } from '../fade-transition';
+import { AnimatedPenumbra } from '../logo/animated-penumbra';
 
 export const SplashPage = ({
   title,
diff --git a/packages/ui/components/ui/switch.tsx b/packages/ui/components/ui/switch/index.tsx
similarity index 96%
rename from packages/ui/components/ui/switch.tsx
rename to packages/ui/components/ui/switch/index.tsx
index 90163c7586..75dd904ce9 100644
--- a/packages/ui/components/ui/switch.tsx
+++ b/packages/ui/components/ui/switch/index.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
diff --git a/packages/ui/components/ui/table.tsx b/packages/ui/components/ui/table/index.tsx
similarity index 98%
rename from packages/ui/components/ui/table.tsx
rename to packages/ui/components/ui/table/index.tsx
index 9b20a84243..72ddd18717 100644
--- a/packages/ui/components/ui/table.tsx
+++ b/packages/ui/components/ui/table/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
diff --git a/packages/ui/components/ui/table/table.stories.tsx b/packages/ui/components/ui/table/table.stories.tsx
new file mode 100644
index 0000000000..d9a5372255
--- /dev/null
+++ b/packages/ui/components/ui/table/table.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Table, TableBody, TableHead, TableHeader, TableRow, TableCell } from '.';
+
+const meta: Meta<typeof Table> = {
+  component: Table,
+  title: 'Table',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Table>;
+
+export const Full: Story = {
+  args: {},
+  render: args => {
+    return (
+      <Table {...args}>
+        <TableHeader>
+          <TableRow>
+            <TableHead className='text-center'>Block Height</TableHead>
+            <TableHead className='text-center'>Description</TableHead>
+            <TableHead className='text-center'>Transaction Hash</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <p className='text-center text-base font-bold'>10000</p>
+              <p className='text-center text-base font-bold'>Some description</p>
+              <p className='text-center text-base font-bold'>hash</p>
+              <p className='text-center text-base font-bold'>Action</p>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+  },
+};
diff --git a/packages/ui/components/ui/tabs.tsx b/packages/ui/components/ui/tabs/index.tsx
similarity index 97%
rename from packages/ui/components/ui/tabs.tsx
rename to packages/ui/components/ui/tabs/index.tsx
index 341aeeeb00..4bfd45269b 100644
--- a/packages/ui/components/ui/tabs.tsx
+++ b/packages/ui/components/ui/tabs/index.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Tabs = TabsPrimitive.Root;
 
diff --git a/packages/ui/components/ui/tabs/tabs.stories.tsx b/packages/ui/components/ui/tabs/tabs.stories.tsx
new file mode 100644
index 0000000000..8fda569be9
--- /dev/null
+++ b/packages/ui/components/ui/tabs/tabs.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '.';
+import { useState } from 'react';
+
+const meta: Meta<typeof Tabs> = {
+  component: Tabs,
+  title: 'Tabs',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Full: Story = {
+  args: {
+    defaultValue: 'one',
+  },
+  render: args => {
+    const [active, setActive] = useState(args.defaultValue);
+
+    return (
+      <Tabs {...args} value={active} onValueChange={setActive}>
+        <TabsList>
+          <TabsTrigger value='one'>One</TabsTrigger>
+          <TabsTrigger value='two'>Two</TabsTrigger>
+          <TabsTrigger value='three'>Three</TabsTrigger>
+        </TabsList>
+        <TabsContent value='one'>Content for one</TabsContent>
+        <TabsContent value='two'>Content for two</TabsContent>
+        <TabsContent value='three'>Content for three</TabsContent>
+      </Tabs>
+    );
+  },
+};
diff --git a/packages/ui/components/ui/testnet-banner.tsx b/packages/ui/components/ui/testnet-banner/index.tsx
similarity index 100%
rename from packages/ui/components/ui/testnet-banner.tsx
rename to packages/ui/components/ui/testnet-banner/index.tsx
diff --git a/packages/ui/components/ui/testnet-banner.test.tsx b/packages/ui/components/ui/testnet-banner/testnet-banner.test.tsx
similarity index 95%
rename from packages/ui/components/ui/testnet-banner.test.tsx
rename to packages/ui/components/ui/testnet-banner/testnet-banner.test.tsx
index 5fb8fdccda..01bb17b0b4 100644
--- a/packages/ui/components/ui/testnet-banner.test.tsx
+++ b/packages/ui/components/ui/testnet-banner/testnet-banner.test.tsx
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { render } from '@testing-library/react';
-import { TestnetBanner } from './testnet-banner';
+import { TestnetBanner } from '.';
 
 describe('<TestnetBanner />', () => {
   it('renders banner if chainId is a testnet', () => {
diff --git a/packages/ui/components/ui/toaster.tsx b/packages/ui/components/ui/toaster/index.tsx
similarity index 100%
rename from packages/ui/components/ui/toaster.tsx
rename to packages/ui/components/ui/toaster/index.tsx
diff --git a/packages/ui/components/ui/toaster.css b/packages/ui/components/ui/toaster/toaster.css
similarity index 100%
rename from packages/ui/components/ui/toaster.css
rename to packages/ui/components/ui/toaster/toaster.css
diff --git a/packages/ui/components/ui/toaster.stories.tsx b/packages/ui/components/ui/toaster/toaster.stories.tsx
similarity index 88%
rename from packages/ui/components/ui/toaster.stories.tsx
rename to packages/ui/components/ui/toaster/toaster.stories.tsx
index cec73c0be3..856c48ee87 100644
--- a/packages/ui/components/ui/toaster.stories.tsx
+++ b/packages/ui/components/ui/toaster/toaster.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Toaster } from './toaster';
+import { Toaster } from '.';
 import { toast } from 'sonner';
-import { Button } from './button';
+import { Button } from '../button';
 
 const meta: Meta<typeof Toaster> = {
   component: Toaster,
diff --git a/packages/ui/components/ui/toggle.tsx b/packages/ui/components/ui/toggle/index.tsx
similarity index 97%
rename from packages/ui/components/ui/toggle.tsx
rename to packages/ui/components/ui/toggle/index.tsx
index 7b4e7f1303..cfa7d61d3c 100644
--- a/packages/ui/components/ui/toggle.tsx
+++ b/packages/ui/components/ui/toggle/index.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { ToggleProps as RadixToggleProps } from '@radix-ui/react-toggle';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const toggleVariants = cva(
   'inline-flex items-center justify-center rounded-lg font-bold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
diff --git a/packages/ui/components/ui/tooltip.tsx b/packages/ui/components/ui/tooltip/index.tsx
similarity index 97%
rename from packages/ui/components/ui/tooltip.tsx
rename to packages/ui/components/ui/tooltip/index.tsx
index 74fe4195e8..1c7c851dcf 100644
--- a/packages/ui/components/ui/tooltip.tsx
+++ b/packages/ui/components/ui/tooltip/index.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { cn } from '../../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const TooltipProvider = (props: React.ComponentProps<typeof TooltipPrimitive.Provider>) => (
   <TooltipPrimitive.Provider delayDuration={0} {...props} />
diff --git a/packages/ui/components/ui/tx/view/action-view.tsx b/packages/ui/components/ui/tx/action-view.tsx
similarity index 82%
rename from packages/ui/components/ui/tx/view/action-view.tsx
rename to packages/ui/components/ui/tx/action-view.tsx
index 889beadb31..4d005b4984 100644
--- a/packages/ui/components/ui/tx/view/action-view.tsx
+++ b/packages/ui/components/ui/tx/action-view.tsx
@@ -1,16 +1,16 @@
-import { SpendViewComponent } from './spend';
-import { OutputViewComponent } from './output';
+import { SpendViewComponent } from './actions-views/spend';
+import { OutputViewComponent } from './actions-views/output';
 import { ActionView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/transaction/v1/transaction_pb';
-import { SwapClaimViewComponent } from './swap-claim';
-import { DelegateComponent } from './delegate';
-import { UndelegateComponent } from './undelegate';
-import { UndelegateClaimComponent } from './undelegate-claim';
-import { Ics20WithdrawalComponent } from './isc20-withdrawal';
-import { UnimplementedView } from './unimplemented-view';
-import { SwapViewComponent } from './swap';
-import { ActionDutchAuctionScheduleViewComponent } from './action-dutch-auction-schedule-view';
-import { ActionDutchAuctionEndComponent } from './action-dutch-auction-end';
-import { ActionDutchAuctionWithdrawViewComponent } from './action-dutch-auction-withdraw-view';
+import { SwapClaimViewComponent } from './actions-views/swap/swap-claim';
+import { DelegateComponent } from './actions-views/delegate';
+import { UndelegateComponent } from './actions-views/undelegate';
+import { UndelegateClaimComponent } from './actions-views/undelegate-claim';
+import { Ics20WithdrawalComponent } from './actions-views/isc20-withdrawal';
+import { UnimplementedView } from './actions-views/unimplemented-view';
+import { SwapViewComponent } from './actions-views/swap';
+import { ActionDutchAuctionScheduleViewComponent } from './actions-views/action-dutch-auction-schedule-view';
+import { ActionDutchAuctionEndComponent } from './actions-views/action-dutch-auction-end';
+import { ActionDutchAuctionWithdrawViewComponent } from './actions-views/action-dutch-auction-withdraw-view';
 
 const CASE_TO_LABEL: Record<string, string> = {
   daoDeposit: 'DAO Deposit',
diff --git a/packages/ui/components/ui/tx/view/action-details.tsx b/packages/ui/components/ui/tx/actions-views/action-details.tsx
similarity index 100%
rename from packages/ui/components/ui/tx/view/action-details.tsx
rename to packages/ui/components/ui/tx/actions-views/action-details.tsx
diff --git a/packages/ui/components/ui/tx/view/action-dutch-auction-end.tsx b/packages/ui/components/ui/tx/actions-views/action-dutch-auction-end.tsx
similarity index 94%
rename from packages/ui/components/ui/tx/view/action-dutch-auction-end.tsx
rename to packages/ui/components/ui/tx/actions-views/action-dutch-auction-end.tsx
index 5d76e429ea..817882adad 100644
--- a/packages/ui/components/ui/tx/view/action-dutch-auction-end.tsx
+++ b/packages/ui/components/ui/tx/actions-views/action-dutch-auction-end.tsx
@@ -1,5 +1,5 @@
 import { ActionDutchAuctionEnd } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/auction/v1/auction_pb';
-import { ViewBox } from './viewbox';
+import { ViewBox } from '../viewbox';
 import { AuctionIdComponent } from '../../auction-id-component';
 import { ActionDetails } from './action-details';
 
diff --git a/packages/ui/components/ui/tx/view/action-dutch-auction-schedule-view.tsx b/packages/ui/components/ui/tx/actions-views/action-dutch-auction-schedule-view.tsx
similarity index 94%
rename from packages/ui/components/ui/tx/view/action-dutch-auction-schedule-view.tsx
rename to packages/ui/components/ui/tx/actions-views/action-dutch-auction-schedule-view.tsx
index 966daebfc3..732d10a6f3 100644
--- a/packages/ui/components/ui/tx/view/action-dutch-auction-schedule-view.tsx
+++ b/packages/ui/components/ui/tx/actions-views/action-dutch-auction-schedule-view.tsx
@@ -3,7 +3,7 @@ import {
   DutchAuction,
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/auction/v1/auction_pb';
 import { DutchAuctionComponent } from '../../dutch-auction-component';
-import { ViewBox } from './viewbox';
+import { ViewBox } from '../viewbox';
 
 export const ActionDutchAuctionScheduleViewComponent = ({
   value,
diff --git a/packages/ui/components/ui/tx/view/action-dutch-auction-withdraw-view.tsx b/packages/ui/components/ui/tx/actions-views/action-dutch-auction-withdraw-view.tsx
similarity index 92%
rename from packages/ui/components/ui/tx/view/action-dutch-auction-withdraw-view.tsx
rename to packages/ui/components/ui/tx/actions-views/action-dutch-auction-withdraw-view.tsx
index d5f63c812b..a8d5ee11ce 100644
--- a/packages/ui/components/ui/tx/view/action-dutch-auction-withdraw-view.tsx
+++ b/packages/ui/components/ui/tx/actions-views/action-dutch-auction-withdraw-view.tsx
@@ -1,8 +1,8 @@
 import { ActionDutchAuctionWithdrawView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/auction/v1/auction_pb';
-import { ViewBox } from './viewbox';
+import { ViewBox } from '../viewbox';
 import { ActionDetails } from './action-details';
 import { AuctionIdComponent } from '../../auction-id-component';
-import { ValueViewComponent } from './value';
+import { ValueViewComponent } from '../../value';
 import { getDisplayDenomFromView } from '@penumbra-zone/getters/value-view';
 
 export const ActionDutchAuctionWithdrawViewComponent = ({
diff --git a/packages/ui/components/ui/tx/view/delegate.tsx b/packages/ui/components/ui/tx/actions-views/delegate.tsx
similarity index 97%
rename from packages/ui/components/ui/tx/view/delegate.tsx
rename to packages/ui/components/ui/tx/actions-views/delegate.tsx
index 4037b1fcd7..558ce093f9 100644
--- a/packages/ui/components/ui/tx/view/delegate.tsx
+++ b/packages/ui/components/ui/tx/actions-views/delegate.tsx
@@ -1,5 +1,5 @@
 import { Delegate } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/stake/v1/stake_pb';
-import { ViewBox } from './viewbox';
+import { ViewBox } from '../viewbox';
 import { joinLoHiAmount } from '@penumbra-zone/types/amount';
 import { bech32mIdentityKey } from '@penumbra-zone/bech32m/penumbravalid';
 import { ActionDetails } from './action-details';
diff --git a/packages/ui/components/ui/tx/view/isc20-withdrawal.tsx b/packages/ui/components/ui/tx/actions-views/isc20-withdrawal.tsx
similarity index 97%
rename from packages/ui/components/ui/tx/view/isc20-withdrawal.tsx
rename to packages/ui/components/ui/tx/actions-views/isc20-withdrawal.tsx
index cd9d5a043a..02c3afc4c5 100644
--- a/packages/ui/components/ui/tx/view/isc20-withdrawal.tsx
+++ b/packages/ui/components/ui/tx/actions-views/isc20-withdrawal.tsx
@@ -1,5 +1,5 @@
 import { Ics20Withdrawal } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/ibc/v1/ibc_pb';
-import { ViewBox } from './viewbox';
+import { ViewBox } from '../viewbox';
 import { ActionDetails } from './action-details';
 import { joinLoHiAmount } from '@penumbra-zone/types/amount';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
diff --git a/packages/ui/components/ui/tx/view/output.tsx b/packages/ui/components/ui/tx/actions-views/output.tsx
similarity index 90%
rename from packages/ui/components/ui/tx/view/output.tsx
rename to packages/ui/components/ui/tx/actions-views/output.tsx
index 62ba2bf5d4..1dc4223dde 100644
--- a/packages/ui/components/ui/tx/view/output.tsx
+++ b/packages/ui/components/ui/tx/actions-views/output.tsx
@@ -1,6 +1,6 @@
 import { OutputView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
-import { ViewBox } from './viewbox';
-import { ValueViewComponent } from './value';
+import { ViewBox } from '../viewbox';
+import { ValueViewComponent } from '../../value';
 import { ValueWithAddress } from './value-with-address';
 import { getNote } from '@penumbra-zone/getters/output-view';
 import { getAddress } from '@penumbra-zone/getters/note-view';
diff --git a/packages/ui/components/ui/tx/view/spend.tsx b/packages/ui/components/ui/tx/actions-views/spend.tsx
similarity index 90%
rename from packages/ui/components/ui/tx/view/spend.tsx
rename to packages/ui/components/ui/tx/actions-views/spend.tsx
index b6c20cf2d1..0231dfabfd 100644
--- a/packages/ui/components/ui/tx/view/spend.tsx
+++ b/packages/ui/components/ui/tx/actions-views/spend.tsx
@@ -1,6 +1,6 @@
 import { SpendView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
-import { ViewBox } from './viewbox';
-import { ValueViewComponent } from './value';
+import { ViewBox } from '../viewbox';
+import { ValueViewComponent } from '../../value';
 import { ValueWithAddress } from './value-with-address';
 import { getNote } from '@penumbra-zone/getters/spend-view';
 import { getAddress } from '@penumbra-zone/getters/note-view';
diff --git a/packages/ui/components/ui/tx/view/swap/index.test.tsx b/packages/ui/components/ui/tx/actions-views/swap/index.test.tsx
similarity index 100%
rename from packages/ui/components/ui/tx/view/swap/index.test.tsx
rename to packages/ui/components/ui/tx/actions-views/swap/index.test.tsx
diff --git a/packages/ui/components/ui/tx/view/swap/index.tsx b/packages/ui/components/ui/tx/actions-views/swap/index.tsx
similarity index 94%
rename from packages/ui/components/ui/tx/view/swap/index.tsx
rename to packages/ui/components/ui/tx/actions-views/swap/index.tsx
index 44acb6850b..ba8db597f7 100644
--- a/packages/ui/components/ui/tx/view/swap/index.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/index.tsx
@@ -1,6 +1,6 @@
-import { ViewBox } from '../viewbox';
+import { ViewBox } from '../../viewbox';
 import { SwapView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/dex/v1/dex_pb';
-import { TransactionIdComponent } from '../transaction-id';
+import { TransactionIdComponent } from './transaction-id';
 import { getOneWaySwapValues, isOneWaySwap } from '@penumbra-zone/types/swap';
 import { OneWaySwap } from './one-way-swap';
 import { ValueWithAddress } from '../value-with-address';
@@ -9,7 +9,7 @@ import {
   getClaimFeeFromSwapView,
   getClaimTx,
 } from '@penumbra-zone/getters/swap-view';
-import { ValueViewComponent } from '../value';
+import { ValueViewComponent } from '../../../value';
 import { ActionDetails } from '../action-details';
 import { joinLoHiAmount } from '@penumbra-zone/types/amount';
 import { getAmount } from '@penumbra-zone/getters/fee';
diff --git a/packages/ui/components/ui/tx/view/swap/one-way-swap.tsx b/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
similarity index 92%
rename from packages/ui/components/ui/tx/view/swap/one-way-swap.tsx
rename to packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
index 124439b430..1b48a229bd 100644
--- a/packages/ui/components/ui/tx/view/swap/one-way-swap.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
@@ -1,4 +1,4 @@
-import { ValueViewComponent } from '../value';
+import { ValueViewComponent } from '../../../value';
 import { ArrowRight } from 'lucide-react';
 import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
 import { getAmount } from '@penumbra-zone/getters/value-view';
diff --git a/packages/ui/components/ui/tx/view/swap-claim.tsx b/packages/ui/components/ui/tx/actions-views/swap/swap-claim.tsx
similarity index 95%
rename from packages/ui/components/ui/tx/view/swap-claim.tsx
rename to packages/ui/components/ui/tx/actions-views/swap/swap-claim.tsx
index 803e75a1eb..a939cd58ae 100644
--- a/packages/ui/components/ui/tx/view/swap-claim.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/swap-claim.tsx
@@ -1,7 +1,7 @@
-import { ViewBox } from './viewbox';
+import { ViewBox } from '../../viewbox';
 import { SwapClaimView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/dex/v1/dex_pb';
 import { TransactionIdComponent } from './transaction-id';
-import { ActionDetails } from './action-details';
+import { ActionDetails } from '../action-details';
 import {
   getOutput1ValueOptional,
   getOutput2ValueOptional,
@@ -10,7 +10,7 @@ import {
 import { getAmount } from '@penumbra-zone/getters/value-view';
 import { getAmount as getAmountFee } from '@penumbra-zone/getters/fee';
 import { isZero, joinLoHiAmount } from '@penumbra-zone/types/amount';
-import { ValueViewComponent } from './value';
+import { ValueViewComponent } from '../../../value';
 import { Amount } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/num/v1/num_pb';
 
 const getClaimLabel = (
diff --git a/packages/ui/components/ui/tx/view/transaction-id.tsx b/packages/ui/components/ui/tx/actions-views/swap/transaction-id.tsx
similarity index 93%
rename from packages/ui/components/ui/tx/view/transaction-id.tsx
rename to packages/ui/components/ui/tx/actions-views/swap/transaction-id.tsx
index ffffc82d32..f3d3a3fff7 100644
--- a/packages/ui/components/ui/tx/view/transaction-id.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/transaction-id.tsx
@@ -1,5 +1,5 @@
 import { TransactionId } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/txhash/v1/txhash_pb';
-import { Pill } from '../../pill';
+import { Pill } from '../../../pill';
 import { uint8ArrayToHex } from '@penumbra-zone/types/hex';
 import { shorten } from '@penumbra-zone/types/string';
 
diff --git a/packages/ui/components/ui/tx/view/undelegate-claim.tsx b/packages/ui/components/ui/tx/actions-views/undelegate-claim.tsx
similarity index 96%
rename from packages/ui/components/ui/tx/view/undelegate-claim.tsx
rename to packages/ui/components/ui/tx/actions-views/undelegate-claim.tsx
index 841ed7ff6f..a635cf6fe7 100644
--- a/packages/ui/components/ui/tx/view/undelegate-claim.tsx
+++ b/packages/ui/components/ui/tx/actions-views/undelegate-claim.tsx
@@ -1,5 +1,5 @@
 import { UndelegateClaim } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/stake/v1/stake_pb';
-import { ViewBox } from './viewbox';
+import { ViewBox } from '../viewbox';
 import { IdentityKeyComponent } from '../../identity-key-component';
 import { ActionDetails } from './action-details';
 import {
diff --git a/packages/ui/components/ui/tx/view/undelegate.tsx b/packages/ui/components/ui/tx/actions-views/undelegate.tsx
similarity index 97%
rename from packages/ui/components/ui/tx/view/undelegate.tsx
rename to packages/ui/components/ui/tx/actions-views/undelegate.tsx
index 5df4a81815..bb7c2078f8 100644
--- a/packages/ui/components/ui/tx/view/undelegate.tsx
+++ b/packages/ui/components/ui/tx/actions-views/undelegate.tsx
@@ -1,5 +1,5 @@
 import { Undelegate } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/stake/v1/stake_pb';
-import { ViewBox } from './viewbox';
+import { ViewBox } from '../viewbox';
 import { joinLoHiAmount } from '@penumbra-zone/types/amount';
 import { bech32mIdentityKey } from '@penumbra-zone/bech32m/penumbravalid';
 import { ActionDetails } from './action-details';
diff --git a/packages/ui/components/ui/tx/view/unimplemented-view.tsx b/packages/ui/components/ui/tx/actions-views/unimplemented-view.tsx
similarity index 91%
rename from packages/ui/components/ui/tx/view/unimplemented-view.tsx
rename to packages/ui/components/ui/tx/actions-views/unimplemented-view.tsx
index 06e4ad43c1..9eb2c6d394 100644
--- a/packages/ui/components/ui/tx/view/unimplemented-view.tsx
+++ b/packages/ui/components/ui/tx/actions-views/unimplemented-view.tsx
@@ -1,5 +1,5 @@
 import { TriangleAlert } from 'lucide-react';
-import { ViewBox } from './viewbox';
+import { ViewBox } from '../viewbox';
 
 export const UnimplementedView = ({ label }: { label: string }) => {
   return (
diff --git a/packages/ui/components/ui/tx/view/value-with-address.tsx b/packages/ui/components/ui/tx/actions-views/value-with-address.tsx
similarity index 93%
rename from packages/ui/components/ui/tx/view/value-with-address.tsx
rename to packages/ui/components/ui/tx/actions-views/value-with-address.tsx
index 5535f7dd91..eee2b78ece 100644
--- a/packages/ui/components/ui/tx/view/value-with-address.tsx
+++ b/packages/ui/components/ui/tx/actions-views/value-with-address.tsx
@@ -1,6 +1,6 @@
 import { AddressView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
 import { ReactNode } from 'react';
-import { AddressViewComponent } from './address-view';
+import { AddressViewComponent } from '../../address-view';
 
 /**
  * Displays "from" or "to" and an address. Useful for spends, outputs, swaps,
diff --git a/packages/ui/components/ui/tx/view/transaction.tsx b/packages/ui/components/ui/tx/index.tsx
similarity index 97%
rename from packages/ui/components/ui/tx/view/transaction.tsx
rename to packages/ui/components/ui/tx/index.tsx
index 78cb6b1944..977975a73c 100644
--- a/packages/ui/components/ui/tx/view/transaction.tsx
+++ b/packages/ui/components/ui/tx/index.tsx
@@ -4,7 +4,7 @@ import { ActionViewComponent } from './action-view';
 import { ViewBox, ViewSection } from './viewbox';
 import { getStakingTokenMetaData } from './registry';
 import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { ValueViewComponent } from './value';
+import { ValueViewComponent } from '../value';
 
 export const TransactionViewComponent = ({ txv }: { txv: TransactionView }) => {
   if (!txv.bodyView) throw new Error('transaction view missing body view');
diff --git a/packages/ui/components/ui/tx/view/memo-view.tsx b/packages/ui/components/ui/tx/memo-view.tsx
similarity index 90%
rename from packages/ui/components/ui/tx/view/memo-view.tsx
rename to packages/ui/components/ui/tx/memo-view.tsx
index dc7297d580..9a6c99c2bc 100644
--- a/packages/ui/components/ui/tx/view/memo-view.tsx
+++ b/packages/ui/components/ui/tx/memo-view.tsx
@@ -1,7 +1,7 @@
 import { MemoView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/transaction/v1/transaction_pb';
-import { AddressViewComponent } from './address-view';
+import { AddressViewComponent } from '../address-view';
 import { ViewBox } from './viewbox';
-import { ActionDetails } from './action-details';
+import { ActionDetails } from './actions-views/action-details';
 
 export const MemoViewComponent = ({ memo: { memoView } }: { memo: MemoView }) => {
   switch (memoView.case) {
diff --git a/packages/ui/components/ui/tx/view/registry.tsx b/packages/ui/components/ui/tx/registry.tsx
similarity index 100%
rename from packages/ui/components/ui/tx/view/registry.tsx
rename to packages/ui/components/ui/tx/registry.tsx
diff --git a/packages/ui/components/ui/tx/transaction.stories.tsx b/packages/ui/components/ui/tx/transaction.stories.tsx
new file mode 100644
index 0000000000..1244122518
--- /dev/null
+++ b/packages/ui/components/ui/tx/transaction.stories.tsx
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TransactionViewComponent } from '.';
+import { TransactionView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/transaction/v1/transaction_pb';
+
+const meta: Meta<typeof TransactionViewComponent> = {
+  component: TransactionViewComponent,
+  title: 'TransactionViewComponent',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof TransactionViewComponent>;
+
+// TODO: construct a working transaction – right now it throws an error in Storybook
+const EXAMPLE_TRANSACTION = new TransactionView({
+  bodyView: {
+    actionViews: [
+      {
+        actionView: {
+          case: 'spend',
+          value: {
+            spendView: {
+              case: 'visible',
+              value: {},
+            },
+          },
+        },
+      },
+      {
+        actionView: {
+          case: 'output',
+          value: {
+            outputView: {
+              case: 'visible',
+              value: {
+                note: {
+                  address: {
+                    addressView: {
+                      case: 'decoded',
+                      value: {},
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      {
+        actionView: {
+          case: 'output',
+          value: {
+            outputView: {
+              case: 'visible',
+              value: {
+                note: {
+                  address: {
+                    addressView: {
+                      case: 'decoded',
+                      value: {},
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    ],
+  },
+});
+
+export const Basic: Story = {
+  args: {
+    txv: EXAMPLE_TRANSACTION,
+  },
+};
diff --git a/packages/ui/components/ui/tx/view/viewbox.tsx b/packages/ui/components/ui/tx/viewbox.tsx
similarity index 91%
rename from packages/ui/components/ui/tx/view/viewbox.tsx
rename to packages/ui/components/ui/tx/viewbox.tsx
index 0dfa6d6f9c..feaf2865a8 100644
--- a/packages/ui/components/ui/tx/view/viewbox.tsx
+++ b/packages/ui/components/ui/tx/viewbox.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '../../../../lib/utils';
-import { IncognitoIcon } from '../../icons/incognito';
-import { Box } from '../../box';
+import { cn } from '../../../lib/utils';
+import { IncognitoIcon } from '../icons/incognito';
+import { Box } from '../box';
 
 export interface ViewBoxProps {
   label: string;
diff --git a/packages/ui/components/ui/tx/view/value/index.test.tsx b/packages/ui/components/ui/value/index.test.tsx
similarity index 100%
rename from packages/ui/components/ui/tx/view/value/index.test.tsx
rename to packages/ui/components/ui/value/index.test.tsx
diff --git a/packages/ui/components/ui/tx/view/value/index.tsx b/packages/ui/components/ui/value/index.tsx
similarity index 100%
rename from packages/ui/components/ui/tx/view/value/index.tsx
rename to packages/ui/components/ui/value/index.tsx
diff --git a/packages/ui/components/ui/value/value.stories.tsx b/packages/ui/components/ui/value/value.stories.tsx
new file mode 100644
index 0000000000..f4f4bba28c
--- /dev/null
+++ b/packages/ui/components/ui/value/value.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ValueViewComponent } from '.';
+import {
+  Metadata,
+  ValueView,
+} from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
+import { Amount } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/num/v1/num_pb';
+
+const meta: Meta<typeof ValueViewComponent> = {
+  component: ValueViewComponent,
+  title: 'ValueViewComponent',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof ValueViewComponent>;
+
+const EXAMPLE_METADATA = new Metadata({
+  base: 'upenumbra',
+  display: 'penumbra',
+  symbol: 'UM',
+  images: [
+    {
+      svg: 'https://raw.githubusercontent.com/prax-wallet/registry/main/images/um.svg',
+    },
+  ],
+});
+
+const EXAMPLE_VALUE = new ValueView({
+  valueView: {
+    case: 'knownAssetId',
+    value: {
+      amount: new Amount({
+        lo: 17000000n,
+      }),
+      metadata: EXAMPLE_METADATA,
+    },
+  },
+});
+
+export const Basic: Story = {
+  args: {
+    view: EXAMPLE_VALUE,
+  },
+};
+
+export const NoValue: Story = {
+  args: {
+    view: EXAMPLE_VALUE,
+    showValue: false,
+  },
+};
+
+export const NoIcon: Story = {
+  args: {
+    view: EXAMPLE_VALUE,
+    showIcon: false,
+  },
+};
+
+export const NoDenom: Story = {
+  args: {
+    view: EXAMPLE_VALUE,
+    showDenom: false,
+  },
+};
diff --git a/packages/ui/components/ui/tx/view/value/value.tsx b/packages/ui/components/ui/value/value.tsx
similarity index 93%
rename from packages/ui/components/ui/tx/view/value/value.tsx
rename to packages/ui/components/ui/value/value.tsx
index 86ace11789..78917687f3 100644
--- a/packages/ui/components/ui/tx/view/value/value.tsx
+++ b/packages/ui/components/ui/value/value.tsx
@@ -1,7 +1,7 @@
 import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
 import { AssetIcon } from '../asset-icon';
-import { Pill } from '../../../pill';
-import { cn } from '../../../../../lib/utils';
+import { Pill } from '../pill';
+import { cn } from '../../../lib/utils';
 
 interface ValueComponentProps {
   formattedAmount: string;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 5f9e2b040a..68375e45b3 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,14 +1,13 @@
 {
   "name": "@repo/ui",
   "version": "5.0.0",
-  "private": true,
   "license": "(MIT OR Apache-2.0)",
   "type": "module",
   "engine": {
     "node": ">=22"
   },
   "scripts": {
-    "build-storybook": "storybook build",
+    "build": "tsc --build && tsc-alias",
     "lint": "eslint components lib",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run",
@@ -21,12 +20,8 @@
     "styles"
   ],
   "exports": {
-    "./components/ui/*": "./components/ui/*.tsx",
-    "./components/ui/dutch-auction-component": "./components/ui/dutch-auction-component/index.tsx",
-    "./components/ui/identicon": "./components/ui/identicon/index.tsx",
-    "./components/ui/slider": "./components/ui/slider/index.tsx",
-    "./components/ui/tx/view/asset-icon": "./components/ui/tx/view/asset-icon/index.tsx",
-    "./components/ui/tx/view/value": "./components/ui/tx/view/value/index.tsx",
+    "./components/ui/icons/*": "./components/ui/icons/*.tsx",
+    "./components/ui/*": "./components/ui/*/index.tsx",
     "./lib/toast/*": "./lib/toast/*.ts",
     "./lib/toast/transaction-toast": "./lib/toast/transaction-toast.tsx",
     "./lib/utils": "./lib/utils.ts",
@@ -35,29 +30,13 @@
   },
   "publishConfig": {
     "exports": {
-      "./components/ui/*": {
-        "default": "./dist/components/ui/*.js",
-        "types": "./dist/components/ui/*.d.ts"
-      },
-      "./components/ui/dutch-auction-component": {
-        "default": "./dist/components/ui/dutch-auction-component/index.js",
-        "types": "./dist/components/ui/dutch-auction-component/index.d.ts"
-      },
-      "./components/ui/identicon": {
-        "default": "./dist/components/ui/identicon/index.js",
-        "types": "./dist/components/ui/identicon/index.d.ts"
+      "./components/ui/icons/*": {
+        "default": "./dist/components/ui/icons/*.js",
+        "types": "./dist/components/ui/icons/*.d.ts"
       },
-      "./components/ui/slider": {
-        "default": "./dist/components/ui/slider/index.js",
-        "types": "./dist/components/ui/slider/index.d.ts"
-      },
-      "./components/ui/tx/view/asset-icon": {
-        "default": "./dist/components/ui/tx/view/asset-icon/index.js",
-        "types": "./dist/components/ui/tx/view/asset-icon/index.d.ts"
-      },
-      "./components/ui/tx/view/value": {
-        "default": "./dist/components/ui/tx/view/value/index.js",
-        "types": "./dist/components/ui/tx/view/value/index.d.ts"
+      "./components/ui/*": {
+        "default": "./dist/components/ui/*/index.js",
+        "types": "./dist/components/ui/*/index.d.ts"
       },
       "./lib/toast/*": {
         "default": "./dist/lib/toast/*.js",
@@ -125,6 +104,9 @@
     "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
+    "@penumbra-zone/getters": "workspace:*",
+    "@penumbra-zone/perspective": "workspace:*",
+    "@repo/tailwind-config": "workspace:*",
     "@storybook/addon-essentials": "^8.1.1",
     "@storybook/addon-interactions": "^8.1.1",
     "@storybook/addon-links": "^8.1.1",
@@ -145,9 +127,6 @@
   "peerDependencies": {
     "@buf/penumbra-zone_penumbra.bufbuild_es": "1.10.0-20240616005217-ca45ca80333e.1",
     "@bufbuild/protobuf": "^1.10.0",
-    "@penumbra-zone/getters": "workspace:*",
-    "@penumbra-zone/perspective": "workspace:*",
-    "@repo/tailwind-config": "workspace:*",
     "postcss": "^8.4.38",
     "react": "^18.3.1",
     "tailwindcss": "^3.4.3"
diff --git a/packages/ui/readme.md b/packages/ui/readme.md
new file mode 100644
index 0000000000..a070677792
--- /dev/null
+++ b/packages/ui/readme.md
@@ -0,0 +1,28 @@
+# Penumbra UI
+
+This package contains the UI components for the Penumbra web.
+
+## Set up
+
+First, install the library:
+
+```bash
+npm i @penumbra-zone/ui
+```
+
+Then, configure the Tailwind in your project. Edit `tailwind.config.js`:
+
+```js
+export default {
+  content: [
+    // Parses the classes of the UI components
+    './node_modules/@penumbra-zone/ui/**/*.js',
+  ],
+};
+```
+
+Finally, import the library CSS to the entry point of your app:
+
+```js
+import '@repo/ui/styles/globals.css';
+```
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index c16819a147..1e3a1135a6 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,4 +1,11 @@
 {
   "extends": "@repo/tsconfig/vite.json",
-  "include": ["components", "lib", "tests-setup.ts"]
+  "include": ["components", "lib", "tests-setup.ts"],
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "noEmit": false,
+    "sourceMap": false,
+    "declarationMap": false
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7abe4bbcf6..fdd2d7344c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -641,12 +641,6 @@ importers:
       '@penumbra-zone/bech32m':
         specifier: workspace:*
         version: link:../bech32m
-      '@penumbra-zone/getters':
-        specifier: workspace:*
-        version: link:../getters
-      '@penumbra-zone/perspective':
-        specifier: workspace:*
-        version: link:../perspective
       '@penumbra-zone/types':
         specifier: workspace:*
         version: link:../types
@@ -695,9 +689,6 @@ importers:
       '@radix-ui/react-tooltip':
         specifier: ^1.0.7
         version: 1.0.7(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@repo/tailwind-config':
-        specifier: workspace:*
-        version: link:../tailwind-config
       '@testing-library/jest-dom':
         specifier: ^6.4.5
         version: 6.4.6(vitest@1.6.0(@types/node@20.14.4)(@vitest/browser@1.6.0(playwright@1.44.1)(vitest@1.6.0))(jsdom@24.1.0(bufferutil@4.0.8)(utf-8-validate@6.0.4))(terser@5.31.1))
@@ -786,6 +777,15 @@ importers:
         specifier: ^1.6.0
         version: 1.6.0
     devDependencies:
+      '@penumbra-zone/getters':
+        specifier: workspace:*
+        version: link:../getters
+      '@penumbra-zone/perspective':
+        specifier: workspace:*
+        version: link:../perspective
+      '@repo/tailwind-config':
+        specifier: workspace:*
+        version: link:../tailwind-config
       '@storybook/addon-essentials':
         specifier: ^8.1.1
         version: 8.1.10(@types/react-dom@18.3.0)(@types/react@18.3.3)(prettier@3.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)