Components Overview

TikShip includes 15+ pre-built, production-ready UI components. All components are built with TypeScript, fully typed, and support theming.

Component Categories

Form Components

Essential form inputs and controls.

• Button - Versatile button with variants and loading states
• Input - Text input with label, error, and icon support
• DateTimePicker - Date and time selection
• ImageUpload - Image upload with drag-and-drop

Learn more →

Display Components

Components for displaying content and data.

• Card - Content container with title and footer
• Alert - Important messages with severity levels
• StatusBadge - Status indicators with variants
• StatsCard - Display key metrics and statistics
• Toast - Temporary notification messages

Learn more →

Data Components

Components for displaying and managing data.

• Table - Data table with sorting
• Pagination - Navigate through pages
• Modal - Dialog for displaying content

Learn more →

Utility Components

Utility components for common functionality.

• LanguageSelector - Switch between languages
• ThemeSelector - Switch between themes

Learn more →

Quick Start

All components are located in src/components/ui/ and can be imported directly:

import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Modal } from '@/components/ui/Modal'

Storybook

All components are developed in Storybook for isolated testing and documentation.

npm run storybook

Visit http://localhost:6006 to browse all components with interactive examples.

Best Practices

Import Components

Always use the @/ alias:

// ✅ Good
import { Button } from '@/components/ui/Button'

// ❌ Bad
import { Button } from '../../../components/ui/Button'

Combine Classes

Use the cn utility to combine classes:

import { cn } from '@/lib/utils/common'

<Button className={cn('custom-class', isActive && 'active')} />

Type Safety

All components are fully typed:

import type { ButtonProps } from '@/components/ui/Button'

const props: ButtonProps = {
  variant: 'primary',
  size: 'md',
}