Skip to main content

@repo/components

UI components built on shadcn-svelte with custom additions.

Usage​

<script lang="ts">
  import { Button, Card, Dialog } from '@repo/components'
</script>

shadcn-svelte Components​

All standard shadcn-svelte components are included:

Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Command, ContextMenu, Dialog, Drawer, DropdownMenu, Form, HoverCard, Input, InputOTP, Label, Menubar, NavigationMenu, Pagination, Popover, Progress, RadioGroup, RangeCalendar, Resizable, ScrollArea, Select, Separator, Sheet, Skeleton, Slider, Sonner, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, Tooltip

Custom Components​

Headers​

Page headers for different contexts:

import { DetailHeader, InsertHeader } from '@repo/components'

<!-- Detail page with optional delete -->
<DetailHeader title="User" deleteForm={canDelete && deleteUserForm} />

<!-- Insert/create page -->
<InsertHeader title="New User" />

Application sidebar with navigation:

import { AppSidebar, Sidebar } from '@repo/components'

<Sidebar.Provider>
  <AppSidebar header={organizationMenu} menu={menu} user={user} />
  <Sidebar.Inset>
    {@render children()}
  </Sidebar.Inset>
</Sidebar.Provider>

Buttons​

import { ConfirmationButton, CopyButton } from '@repo/components'

<!-- Button with confirmation dialog -->
<ConfirmationButton onConfirm={handleDelete}>Delete</ConfirmationButton>

<!-- Copy text to clipboard -->
<CopyButton text={apiKey} />

Auto-generated breadcrumbs from page data:

import { AutomaticBreadcrumbs } from '@repo/components'

<AutomaticBreadcrumbs pageTitles={page.data.breadcrumbs} />

Styling​

Customize button variants via StyleProvider:

<!-- routes/+layout.svelte -->
<script lang="ts">
  import { StyleProvider } from '@repo/components'
  import { buttonVariants } from '$lib/library/styling'
</script>

<StyleProvider.Root {buttonVariants}>
  {@render children?.()}
</StyleProvider.Root>