Preview

Integration management

Browse, connect, and monitor third-party integrations from one surface.

Integration Marketplace compositions use Card, Grid, Badge, Button, Dialog, Sidebar, Chip/ChipGroup, and Input for integration lifecycle management.

6

integration categories

4

connection states

3

setup steps

Best for: SaaS platform integration marketplaces and admin configuration panels.
Pairs with: Onboarding Wizard, Audit Log, Settings pages.

Included patterns

• Card grid with status badges

• Category filtering with ChipGroup

• Detail dialog with setup steps

• Health monitoring dashboard

Variants

Integration card grid

Browsable grid of available integrations with status badges.

Category filter sidebar

Sidebar with category chips for filtering integrations.

Detail modal

Dialog with integration description, setup steps, and permissions.

Connection status dashboard

Overview of connected integrations with health indicators.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { AppBar, Card, DescriptionList, Fieldset, Heading, PageHeader, PageLayout, Sidebar, Stack, Table, Text } from '@dryui/ui';
</script>
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>Integration management</AppBar.Title>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root style="height: 100%;">
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Item active href="#">Available</Sidebar.Item>
            <Sidebar.Item href="#">Connected</Sidebar.Item>
            <Sidebar.Item href="#">Categories</Sidebar.Item>
            <Sidebar.Item href="#">Status</Sidebar.Item>
            <Sidebar.Item href="#">Settings</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Browse, connect, and monitor third-party integrations from one surface.</PageHeader.Title>
          <PageHeader.Description>Integration Marketplace compositions use Card, Grid, Badge, Button, Dialog, Sidebar, Chip/ChipGroup, and Input for integration lifecycle management.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>6</Heading>
          <Text as="p">integration categories</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">connection states</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">setup steps</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>SaaS platform integration marketplaces and admin configuration panels.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Pairs with</DescriptionList.Term>
        <DescriptionList.Description>Onboarding Wizard, Audit Log, Settings pages.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Card grid with status badges</Text>
        <Text as="p">• Category filtering with ChipGroup</Text>
        <Text as="p">• Detail dialog with setup steps</Text>
        <Text as="p">• Health monitoring dashboard</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>