OverviewSetupComponentsContributingFull documentation
Components
62
Actions
ButtonToggleToggle Group
Inputs
CalendarCheckboxColor PickerCurrency InputDate Time PickerOptional Time PickerFormForm Required IndicatorInputInput OTPLabelRadio GroupSelectSliderSwitchTextareaTime Picker Input
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuHover CardPopoverSheetTooltip
Navigation
BreadcrumbCommandQuick Command CenterMenubarNavbarNavigation MenuPaginationSidebarTabs
Feedback
AlertAvatarBadgeProgressSkeletonSonnerSticky Bottom BarToastToaster
Data
ChartDiff ViewerTable
Layout
AccordionAspect RatioCardCarouselCollapsibleResizableScroll AreaSeparator
Typography
Code BlockKbdMarkdown
Advanced
Report Problem Dialog
AboutContactPricingApps
  • Learning Resources
  • Blog

    Read our latest articles and updates.

  • Changelog

    Stay up to date with our latest product updates and improvements.

  • Careers

    Join our team and help us build the future of Tuturuuu.

  • Partners

    Explore partnership opportunities with Tuturuuu.

  • Contributors

    Meet the people who make Tuturuuu possible.

  • Security

    Learn about our security practices and commitments.

  • Random Generator

    Generate secure IDs, tokens, API keys, and passwords locally in your browser.

  • Branding

    Get Tuturuuu's branding assets and guidelines.

  • UI

    Browse the Tuturuuu UI component library.

  • Documentation

    Find detailed documentation and guides.

Setup

Set up Tuturuuu UI

Install and wire the shared package for product apps, then follow the contributor workflow when the library changes.

Public package setup

Use the package from product apps by installing the shared package, loading global CSS once, and importing components by subpath.

1

Install packages

Install `@tuturuuu/ui` and `@tuturuuu/icons` with the owning app package manager.

2

Load global styles

Import `@tuturuuu/ui/globals.css` once at the app root so tokens and base styles are available.

3

Use subpath imports

Import components from public subpaths such as `@tuturuuu/ui/button`.

4

Use theme tokens

Use existing design tokens and dynamic color utilities instead of hard-coded hue classes.

terminal
bun add @tuturuuu/ui @tuturuuu/icons

import '@tuturuuu/ui/globals.css';

Package imports

Import every primitive from its public subpath. Keep workspace apps behind the same package boundary as external consumers.

components/example.tsx
import { Button } from '@tuturuuu/ui/button';
import { Dialog, DialogContent } from '@tuturuuu/ui/dialog';
import { Search } from '@tuturuuu/icons';

Contributor setup

Internal maintainers should update the docs route, registry, messages, and tests together.

1

Add metadata

Add component docs metadata in the category split that owns the component.

2

Add preview coverage

Use a live preview for safe primitives and a pattern preview for complex app shells.

3

Verify exports

Check the package export map before documenting a new public import path.

4

Add tests

Update integrity tests, route render tests, and focused preview tests before final checks.

validation
bun --cwd apps/web test 'src/app/[locale]/ui/component-docs.test.ts'
bun --cwd apps/web type-check

Search components

Jump to any component.

logo
Tuturuuu