park-ui

Original source / Raw SKILL.md

---
name: park-ui
description: Use Park UI components in portal. Check this skill before implementing UI to find the right component.
---

# Park UI Components

Components live in `apps/portal/src/components/ui/`.

## Examples

**Read the demo files for working examples:**

```
apps/portal/src/components/dev/ui/sections/
├── forms.tsx           # Input, Field, Select, Combobox, Switch, NumberInput
├── overlays.tsx        # Tooltip, Dialog, Drawer, Popover, Menu
├── navigation.tsx      # Link, Tabs, Accordion, Collapsible, Expandable
├── feedback.tsx        # Loader, Skeleton
├── data-display.tsx    # Code, Kbd, Table, Card, Badge, Avatar
├── actions.tsx         # Button, IconButton
├── tokens.tsx          # Typography, Colors, Icon, Group, AbsoluteCenter
├── charts.tsx          # Chart components (Area, Bar, Line, Pie)
├── i18n.tsx            # Internationalization examples
├── simulate.tsx        # Simulation UI examples
├── spec-picker.tsx     # Spec picker examples
└── distributed-nodes.tsx # Distributed computing examples
```

## Component Lookup

| Component        | When to Use                                | Installed |
| ---------------- | ------------------------------------------ | --------- |
| `AbsoluteCenter` | Center content in relative parent          | YES       |
| `Accordion`      | Collapsible sections, FAQ lists            | YES       |
| `Alert`          | Important messages, warnings, errors       | YES       |
| `Avatar`         | User profile images, initials              | YES       |
| `Badge`          | Status indicators, tags, counts            | YES       |
| `Breadcrumb`     | Navigation hierarchy, page location        | YES       |
| `Button`         | User actions, form submissions             | YES       |
| `Card`           | Content containers, list items             | YES       |
| `Carousel`       | Image galleries, slideshows                | NO        |
| `Checkbox`       | Multi-select options, boolean in forms     | YES       |
| `Clipboard`      | Copy to clipboard functionality            | NO        |
| `Code`           | Inline code snippets                       | YES       |
| `Collapsible`    | Show/hide single section                   | YES       |
| `ColorPicker`    | Color selection input                      | NO        |
| `Combobox`       | Searchable dropdown, autocomplete          | YES       |
| `Command`        | Command palette, search interface          | YES       |
| `CopyButton`     | Copy text to clipboard                     | YES       |
| `DatePicker`     | Date/time selection                        | NO        |
| `Dialog`         | Modal windows, confirmations               | YES       |
| `Drawer`         | Side panels, mobile nav                    | YES       |
| `Editable`       | Inline text editing                        | NO        |
| `Empty`          | Empty state placeholder                    | YES       |
| `ErrorBox`       | Error display container                    | YES       |
| `Expandable`     | Click-to-expand images/diagrams fullscreen | YES       |
| `Field`          | Form field wrapper (label, error, hint)    | YES       |
| `Fieldset`       | Group related form fields                  | NO        |
| `FileUpload`     | File input, drag-and-drop uploads          | NO        |
| `Group`          | Group elements with consistent spacing     | YES       |
| `Heading`        | Section titles (h1-h6)                     | YES       |
| `HelpText`       | Helper text for form fields                | YES       |
| `HoverCard`      | Rich content on hover                      | YES       |
| `Icon`           | Icon wrapper with sizing                   | YES       |
| `IconButton`     | Button with only icon, no text             | YES       |
| `Image`          | Optimized image display                    | YES       |
| `Input`          | Text input fields                          | YES       |
| `InputAddon`     | Input prefix/suffix (icons, units)         | NO        |
| `InputGroup`     | Grouped inputs with addons                 | NO        |
| `Kbd`            | Keyboard shortcut display                  | YES       |
| `Link`           | Navigation links                           | YES       |
| `Loader`         | Loading states (flask animation)           | YES       |
| `Menu`           | Dropdown menus, context menus              | YES       |
| `NumberInput`    | Numeric input with +/- buttons             | YES       |
| `Pagination`     | Page navigation for lists                  | NO        |
| `PinInput`       | OTP/PIN code entry                         | YES       |
| `Popover`        | Floating content on click                  | YES       |
| `Progress`       | Progress bars, completion indicators       | YES       |
| `RadioCardGroup` | Card-style radio buttons                   | YES       |
| `RadioGroup`     | Single-select options                      | YES       |
| `RatingGroup`    | Star ratings, feedback                     | NO        |
| `ScrollArea`     | Custom scrollable containers               | NO        |
| `SecretValue`    | Hidden/masked sensitive values             | YES       |
| `SegmentGroup`   | Segmented control buttons                  | NO        |
| `Select`         | Dropdown selection                         | YES       |
| `Skeleton`       | Loading placeholders                       | YES       |
| `Slider`         | Range input, volume controls               | YES       |
| `Spinner`        | Simple spinning loader                     | NO        |
| `Splitter`       | Resizable panels                           | NO        |
| `StatCard`       | Statistics display card                    | YES       |
| `Steps`          | Step-by-step progress indicator            | YES       |
| `Switch`         | Boolean toggles                            | YES       |
| `Table`          | Tabular data                               | YES       |
| `Tabs`           | Tab navigation                             | YES       |
| `TagsInput`      | Multiple tag entry                         | NO        |
| `Text`           | Body text with variants                    | YES       |
| `Textarea`       | Multi-line text input                      | YES       |
| `Toast`          | Temporary notifications                    | NO        |
| `ToggleGroup`    | Multi-select button group                  | NO        |
| `Tooltip`        | Hover hints                                | YES       |

## Chart Components

| Component           | When to Use                |
| ------------------- | -------------------------- |
| `AnalysisChart`     | Analysis visualization     |
| `AreaChart`         | Area/stacked area charts   |
| `BarChart`          | Bar/column charts          |
| `Chart`             | Base chart component       |
| `DistributionChart` | Distribution visualization |
| `LineChart`         | Line/trend charts          |
| `PieChart`          | Pie/donut charts           |
| `StatBadge`         | Badge with statistic       |

## Import

```tsx
import { Button, Badge, Input, Text, Tooltip } from "@/components/ui";
import { Card, Dialog, Select, Menu, Tabs } from "@/components/ui";
import { AreaChart, BarChart, LineChart, PieChart } from "@/components/ui";
```