Utilities

Helper components for conditional rendering, translations, and theming.

Utility components for common patterns like conditional rendering, internationalization, and theme management.

If

Conditional rendering component with type inference.

import { If } from '@kit/ui/if';

{/* Basic usage */}
<If condition={isLoading} fallback={<Content />}>
  <Spinner />
</If>
{/* With type inference */}
<If condition={error}>
  {(err) => <ErrorMessage error={err} />}
</If>
{/* Render prop pattern */}
<If condition={user}>
  {(user) => <UserProfile user={user} />}
</If>

Trans

Translation component for internationalization.

import { Trans } from '@kit/ui/trans';

{/* Simple translation */}
<Trans i18nKey="common.welcome" />
{/* With variables */}
<Trans
  i18nKey="user.greeting"
  values={{ name: user.name }}
/>
{/* With default text */}
<Trans
  i18nKey="common.submit"
  defaults="Submit"
/>
{/* Rich text with components */}
<Trans
  i18nKey="terms.agreement"
  components={{
    TermsLink: <a href="/terms" className="underline" />,
    PrivacyLink: <a href="/privacy" className="underline" />,
  }}
/>

Lazy Render

Lazy load content when visible using IntersectionObserver.

import { LazyRender } from '@kit/ui/lazy-render';

<LazyRender>
  <HeavyComponent />
</LazyRender>
{/* With options */}
<LazyRender
  threshold={0.5}
  rootMargin="100px"
  onVisible={() => console.log('Component visible')}
>
  <ExpensiveChart />
</LazyRender>

Error Boundary

Catch and handle React errors.

import { ErrorBoundary } from '@kit/ui/error-boundary';

<ErrorBoundary
  fallback={
    <Alert variant="destructive">
      <AlertTitle>Something went wrong</AlertTitle>
      <AlertDescription>
        Please refresh the page.
      </AlertDescription>
    </Alert>
  }
>
  <ComponentThatMightError />
</ErrorBoundary>

Stepper

Multi-step progress indicator.

import { Stepper } from '@kit/ui/stepper';

<Stepper
  steps={['Account', 'Profile', 'Review']}
  currentStep={1}
/>
{/* Numbers variant */}
<Stepper
  steps={['Step 1', 'Step 2', 'Step 3']}
  currentStep={2}
  variant="numbers"
/>
{/* Dots variant */}
<Stepper
  steps={['', '', '', '']}
  currentStep={0}
  variant="dots"
/>

Mode Toggle

Dark/light theme switcher.

import { ModeToggle } from '@kit/ui/mode-toggle';

<ModeToggle />

import { SubMenuModeToggle } from '@kit/ui/mode-toggle';

<SubMenuModeToggle />

Theme Preference Card

import { ThemePreferenceCard } from '@kit/ui/mode-toggle';

<ThemePreferenceCard currentTheme="system" />

Displays cards for Light, Dark, and System theme options. The currentTheme prop sets the initial theme value.

GDPR cookie consent banner.

import { CookieBanner, useCookieConsent } from '@kit/ui/cookie-banner';

<CookieBanner />

const { status, accept, reject, clear } = useCookieConsent();
// status: 'unknown' | 'accepted' | 'rejected'

Language Selector

Language/locale switcher.

import { LanguageSelector, LanguagePreferenceCard } from '@kit/ui/language-selector';

import { useRouter, usePathname } from '@kit/i18n/navigation';
const router = useRouter();
const pathname = usePathname();
<LanguageSelector
  locales={['en', 'de', 'es']}
  router={router}
  pathname={pathname}
/>

Language Preference Card

Card UI for language selection in settings pages.

<LanguagePreferenceCard
  locales={['en', 'de', 'es']}
  router={router}
  pathname={pathname}
/>

cn Utility

Class name merging utility.

import { cn } from '@kit/ui/utils';

<div className={cn(
  'base-classes',
  isActive && 'active-classes',
  className
)}>
  Content
</div>

Next: Marketing →