Park UI Has Free Beautifully Styled Components Built on Ark UI — Here's What You Get

What if you want Ark UI's power but don't want to style everything from scratch? Park UI gives you beautiful defaults.

What is Park UI?

Park UI is a styled component library built on top of Ark UI. Think of it as the shadcn/ui equivalent for Ark UI — pre-styled, accessible components you can copy-paste into your project.

Key Difference

• Ark UI = headless (no styles, you bring your own)
• Park UI = styled (beautiful defaults, customizable)
• Works with React, Vue, and Solid
• Supports Tailwind CSS and Panda CSS

Quick Start

# 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

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

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>
  );
}

Date Picker (Not Available in shadcn/ui)

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

Feature	Park UI	shadcn/ui
Base	Ark UI (Zag.js)	Radix UI
React	Yes	Yes
Vue	Yes	No (community port)
Solid	Yes	No
CSS	Tailwind + Panda	Tailwind
Color Picker	Yes	No
Date Picker	Yes	Via react-day-picker
File Upload	Yes	No
Pin Input	Yes	Via input-otp
Copy-paste	Yes	Yes

Available Components

40+ pre-styled components: 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.

---

Need data for your UI dashboards? Check out my web scraping actors on Apify Store — structured data extraction from any website. For custom solutions, email [e-mail].