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.

Layout

Card

Preview Card, copy setup snippets, review examples, and inspect API exports for @tuturuuu/ui/card.

Live preview@tuturuuu/ui/cardView in docs

Preview

A contained preview using the same shared primitive exported by the package.

Installation

Install the shared UI package, import global styles once, then import the component from its public subpath.

terminal
bun add @tuturuuu/ui
manual step
import '@tuturuuu/ui/globals.css';
manual step
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@tuturuuu/ui/card';

Usage

Copy the default usage snippet and adapt labels, state, and event handlers to the product surface.

usage.tsx
import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';

<Card>
  <CardHeader><CardTitle>Workspace</CardTitle></CardHeader>
  <CardContent>Summary content</CardContent>
</Card>

Examples

Examples reuse the registry snippets so the docs stay aligned with the component catalog.

Default

A minimal implementation using the current registry snippet.

card.tsx
import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';

<Card>
  <CardHeader><CardTitle>Workspace</CardTitle></CardHeader>
  <CardContent>Summary content</CardContent>
</Card>

Composition

Use the grouped exports when the primitive has slots, triggers, content regions, or providers.

card.tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@tuturuuu/ui/card';

Package import

Import through the public package path so workspace and external apps share the same contract.

card.tsx
// Public package import
import { Card } from '@tuturuuu/ui/card';

// Workspace apps should keep importing through the package boundary.

API reference

The public exports currently available from this component entry.

NameKindDescription
CardComponentCard is exported from @tuturuuu/ui/card. Inspect the source for component-specific props and composition details.
CardHeaderComponentCardHeader is exported from @tuturuuu/ui/card. Inspect the source for component-specific props and composition details.
CardTitleComponentCardTitle is exported from @tuturuuu/ui/card. Inspect the source for component-specific props and composition details.
CardDescriptionComponentCardDescription is exported from @tuturuuu/ui/card. Inspect the source for component-specific props and composition details.
CardContentComponentCardContent is exported from @tuturuuu/ui/card. Inspect the source for component-specific props and composition details.
CardFooterComponentCardFooter is exported from @tuturuuu/ui/card. Inspect the source for component-specific props and composition details.

Customization

Common props, states, and composition points to review before using this component.

HeaderContentFooter

Related components

Continue through nearby primitives in the same category.

Accordion

A Layout component from @tuturuuu/ui/accordion.

@tuturuuu/ui/accordion

Aspect Ratio

A Layout component from @tuturuuu/ui/aspect-ratio.

@tuturuuu/ui/aspect-ratio

Carousel

A Layout component from @tuturuuu/ui/carousel.

@tuturuuu/ui/carousel
PreviousAspect RatioNextCarousel
On this page
PreviewInstallationUsageExamplesAPI referenceCustomizationRelated

Search components

Jump to any component.

logo
Tuturuuu