Utilities

cn()

Merges Tailwind CSS classes using clsx + tailwind-merge. Handles conditional classes and deduplicates conflicting utilities.

import { cn } from '@repo/components'

cn('px-4 py-2', 'px-6')
// => 'py-2 px-6'

cn('text-red-500', isActive && 'text-blue-500')
// => 'text-blue-500' when isActive is true

Use cn() whenever you need to merge or conditionally apply Tailwind classes in component props.

FlexRender

Dynamic renderer that handles Svelte components, snippets, and async (lazy-loaded) components. Primarily used by the data table system but available for any dynamic rendering need.

<script lang="ts">
  import { FlexRender } from '@repo/components'
</script>

<FlexRender.Root content={someContent} />

Rendering modes

FlexRender.Root inspects the content prop and renders accordingly:

Content type	Behavior
RenderComponentConfig	Renders a Svelte component with props
RenderSnippetConfig	Renders a Svelte snippet
RenderAsyncComponentConfig	Awaits and renders a lazy component
Primitive (string, number)	Rendered as-is

Helpers

import { FlexRender } from '@repo/components'

// Wrap a component for FlexRender
FlexRender.renderComponent(MyComponent, { someProp: 'value' })

// Wrap a snippet for FlexRender
FlexRender.renderSnippet(mySnippet, { param: 'value' })

// Lazy-load a component
FlexRender.renderAsyncComponent(
  () => import('./HeavyComponent.svelte'),
  { someProp: 'value' }
)