UI Components

Component library built with Shadcn/UI and Tailwind CSS

UI Components

ShipKit uses a comprehensive UI component library built with Shadcn/UI and Tailwind CSS. The components are designed to be accessible, customizable, and maintainable.

Overview

The UI system provides:

  • Reusable components
  • Consistent styling
  • Accessibility features
  • Responsive design
  • Interactive elements
  • Visual effects

Core Components

Button

import { Button } from "@/components/ui/button"

// Default button
<Button>Click me</Button>

// Button variants
<Button variant="default">Default</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Button sizes
<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon">Icon</Button>

Input

import { Input } from "@/components/ui/input"

// Default input
<Input type="text" placeholder="Enter text" />

// Input with label
<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>

Dialog

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>
        This is a dialog description.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Interactive Components

Feedback Dialog

import { FeedbackDialog } from "@/components/ui/feedback-dialog"

<FeedbackDialog>
  <Button>Send Feedback</Button>
</FeedbackDialog>

Global Search

import { GlobalSearch } from "@/components/ui/global-search"

<GlobalSearch />

User Menu

import { UserMenu } from "@/components/ui/user-menu"

<UserMenu user={user} />

Visual Effects

Animated Components

import { AnimatedTestimonials } from "@/components/ui/animated-testimonials"
import { TextHoverEffect } from "@/components/ui/text-hover-effect"
import { SparklesText } from "@/components/ui/sparkles-text"

<AnimatedTestimonials items={testimonials} />
<TextHoverEffect text="Hover me" />
<SparklesText>✨ Sparkly Text ✨</SparklesText>

Loading States

import { Loading } from "@/components/ui/loading"
import { Skeleton } from "@/components/ui/skeleton"

<Loading />
<Skeleton className="h-4 w-[250px]" />

Navigation Components

Breadcrumb Navigation

import { BreadcrumbNav } from "@/components/ui/breadcrumb-nav"

<BreadcrumbNav items={[
  { label: "Home", href: "/" },
  { label: "Products", href: "/products" },
  { label: "Details", href: "/products/details" },
]} />

Sidebar Navigation

import { Sidebar } from "@/components/ui/sidebar"
import { SidebarNav } from "@/components/ui/sidebar-nav"

<Sidebar>
  <SidebarNav items={navigationItems} />
</Sidebar>

Form Components

Form Elements

import { Form } from "@/components/ui/form"
import { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup } from "@/components/ui/radio-group"
import { Select } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

<Form>
  <Checkbox />
  <RadioGroup />
  <Select />
  <Textarea />
</Form>

Date and Time

import { Calendar } from "@/components/ui/calendar"
import { DateRangePicker } from "@/components/ui/date-range-picker"
import { TimeInput } from "@/components/ui/time-input"

<Calendar />
<DateRangePicker />
<TimeInput />

Data Display

Tables

import { Table } from "@/components/ui/table"
import { DataTable } from "@/components/ui/data-table"

<Table>
  <TableHeader>...</TableHeader>
  <TableBody>...</TableBody>
</Table>

<DataTable columns={columns} data={data} />

Charts and Visualizations

import { Chart } from "@/components/ui/chart"

<Chart data={chartData} />

Feedback Components

Toast Notifications

import { Toaster } from "@/components/ui/toaster"
import { toast } from "@/components/ui/use-toast"

<Toaster />
toast({
  title: "Success",
  description: "Operation completed successfully",
})

Progress Indicators

import { Progress } from "@/components/ui/progress"

<Progress value={60} />

Best Practices

  1. Component Usage

    • Import components from @/components/ui
    • Use TypeScript for type safety
    • Follow accessibility guidelines
    • Maintain consistent styling

  2. Customization

    • Use Tailwind classes for styling
    • Extend component variants
    • Create custom themes
    • Follow design system

  3. Performance

    • Lazy load components
    • Optimize bundle size
    • Use suspense boundaries
    • Monitor render cycles

  4. Accessibility

    • Include ARIA labels
    • Support keyboard navigation
    • Test with screen readers
    • Follow WCAG guidelines

Development Guidelines

  1. Component Structure

    // Component template
export const Component = ({
  className,
  ...props
}: ComponentProps) => {
  return (
    <div className={cn("base-styles", className)} {...props}>
      {/* Component content */}
    </div>
  )
}

  2. Styling Approach

    // Using class-variance-authority
const styles = cva("base-styles", {
  variants: {
    size: {
      sm: "text-sm",
      md: "text-base",
      lg: "text-lg",
    },
  },
  defaultVariants: {
    size: "md",
  },
})

  3. State Management

    // Using React hooks
const [state, setState] = useState(initialState)
const value = useMemo(() => computeValue(state), [state])

Notes

  • Components are built with accessibility in mind
  • All components support dark mode
  • Custom components extend Shadcn/UI base
  • Visual effects are optimized for performance
  • Components are server-side rendering compatible
  • Documentation is auto-generated from source