Discover Park UI: Effortlessly Styled Components for Ark UI

Introduction

Park UI is a cutting-edge styled component library built on the robust Ark UI framework. It provides developers with pre-designed components, allowing them to integrate stunning elements into their projects effortlessly. Unlike Ark UI, which comes without styles, Park UI offers beautifully crafted defaults that are highly customizable.

Key Differences

• Ark UI: Headless, requires users to add their own styles.
• Park UI: Comes with default styles, easily customizable.

Park UI is compatible with various JavaScript frameworks, including React, Vue, and Solid, and supports both Tailwind CSS and Panda CSS, making it a versatile choice for developers.

Quick Start Guide

To get started with Park UI, follow these simple steps:

# Install the CLI
npx @park-ui/cli init

# Add components
npx @park-ui/cli add button
npx @park-ui/cli add dialog
npx @park-ui/cli add select

Button Variants

The Button component offers several variants to fit different design needs:

import { Button } from "~/components/ui/button";

export function Buttons() {
  return (
    <div className="flex gap-3">
      <Button>Primary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
      <Button size="sm">Small</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

Card Component

The Card component is perfect for showcasing detailed content with a structured layout:

import { Card } from "~/components/ui/card";
import { Button } from "~/components/ui/button";

export function PricingCard() {
  return (
    <Card.Root className="max-w-sm">
      <Card.Header>
        <Card.Title>Pro Plan</Card.Title>
        <Card.Description>Everything you need to scale</Card.Description>
      </Card.Header>
      <Card.Body>
        <span className="text-4xl font-bold">$29</span>
        <span className="text-gray-500">/month</span>
        <ul className="mt-4 space-y-2">
          <li>Unlimited projects</li>
          <li>Priority support</li>
          <li>Advanced analytics</li>
        </ul>
      </Card.Body>
      <Card.Footer>
        <Button className="w-full">Get Started</Button>
      </Card.Footer>
    </Card.Root>
  );
}

Unique Components

One of the standout features of Park UI is its Date Picker component, which isn't available in the shadcn/ui library:

import { DatePicker } from "~/components/ui/date-picker";

export function BookingDate() {
  return (
    <DatePicker.Root>
      <DatePicker.Label>Select Date</DatePicker.Label>
      <DatePicker.Control>
        <DatePicker.Input />
        <DatePicker.Trigger>Pick</DatePicker.Trigger>
      </DatePicker.Control>
      <DatePicker.Positioner>
        <DatePicker.Content>
          <DatePicker.View view="day">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>Title</DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableHead>
                <DatePicker.TableRow>
                  {/* Day headers */}
                </DatePicker.TableRow>
              </DatePicker.TableHead>
              <DatePicker.TableBody>
                {/* Day cells */}
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.View>
        </DatePicker.Content>
      </DatePicker.Positioner>
    </DatePicker.Root>
  );
}

Park UI vs. shadcn/ui

Available Components

Park UI offers an extensive collection of over 40 pre-styled components, including:

• Accordion
• Alert
• Avatar
• Badge
• Button
• Card
• Carousel
• Checkbox
• Clipboard
• Code
• Collapsible
• Color Picker
• Combobox
• Date Picker
• Dialog
• Drawer
• Editable
• Field
• File Upload
• Hover Card
• Icon
• Input
• Menu
• Number Input
• Pagination
• Pin Input
• Popover
• Progress
• Radio Group
• Rating Group
• Segment Group
• Select
• Skeleton
• Slider
• Splitter
• Switch
• Table
• Tabs
• Tags Input
• Textarea
• Toast
• Toggle Group
• Tooltip
• Tree View