Panara UI is a bold, 3D-elevated component library built on shadcn/ui + Tailwind CSS. Install components directly into your project using the shadcn CLI — no npm package needed. Each component is yours to customize.

npx shadcn@latest add https://ui.panara.studio/r/panara-button.json

Add this to your components.json so you can use short names:

{
  "registries": {
    "@panara": {
      "url": "https://ui.panara.studio/r/{name}.json"
    }
  }
}

Then install any component with:

npx shadcn@latest add @panara/panara-button
npx shadcn@latest add @panara/panara-card
npx shadcn@latest add @panara/panara-input

npx shadcn@latest add @panara/panara-theme-provider  # Required: theme system
npx shadcn@latest add @panara/panara-button           # 3D elevated button
npx shadcn@latest add @panara/panara-tilted-button    # Tilted geometry button
npx shadcn@latest add @panara/panara-card             # 3D elevated card
npx shadcn@latest add @panara/panara-input            # Formatted input field
npx shadcn@latest add @panara/panara-checkbox         # 3D checkbox
npx shadcn@latest add @panara/panara-toggle           # Toggle switch
npx shadcn@latest add @panara/panara-badge            # Status badge
npx shadcn@latest add @panara/panara-typography       # Text hierarchy
npx shadcn@latest add @panara/panara-dropdown         # Select dropdown

Add these styles to your globals.css for 3D press animations and shimmer:

/* Panara 3D press animation */
.neo-elevated-btn:active .neo-face,
.neo-elevated-btn.active .neo-face {
  transform: translate3d(var(--neo-depth, 3px), var(--neo-depth, 3px), 0) !important;
}
.neo-elevated-btn:active .neo-edge-right,
.neo-elevated-btn.active .neo-edge-right {
  transform: translate3d(var(--neo-depth, 3px), var(--neo-depth, 3px), 0) skewY(45deg) !important;
}
.neo-elevated-btn:active .neo-edge-bottom,
.neo-elevated-btn.active .neo-edge-bottom {
  transform: translate3d(var(--neo-depth, 3px), var(--neo-depth, 3px), 0) skewX(45deg) !important;
}

/* Shimmer animation */
@keyframes neo-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

import { PanaraThemeProvider } from "@/components/ui/panara-theme-provider";
import { PanaraButton } from "@/components/ui/panara-button";

export default function App() {
  return (
    <PanaraThemeProvider defaultTheme="purple">
      <PanaraButton colorScheme="accent" size="lg">
        Get Started
      </PanaraButton>
    </PanaraThemeProvider>
  );
}

Panara UI supports 6 accent themes — Purple, Coral, Cyan, Emerald, Amber, and Magenta. Wrap your app in PanaraThemeProvider and use the usePanaraTheme hook to access and switch themes.

import { PanaraThemeProvider, usePanaraTheme } from "@/components/ui/panara-theme-provider";

function MyComponent() {
  const { theme, setTheme, colors } = usePanaraTheme();
  // colors.accent, colors.accentFg, colors.accentDark, colors.accentDarker
  return <div style={{ color: colors.accent }}>{theme}</div>;
}

3D-elevated button with multiple variants, sizes, and color schemes. The signature component of Panara UI.

npx shadcn@latest add @panara/panara-button

<PanaraButton colorScheme="accent" size="lg">
  Get Started
</PanaraButton>

<PanaraButton colorScheme="white" kind="flat">
  Secondary
</PanaraButton>

<PanaraButton colorScheme="accent" shimmer>
  Shimmer Effect
</PanaraButton>

A distinctive trapezoid-shaped button with tilted geometry and a depth plunk surface.

npx shadcn@latest add @panara/panara-tilted-button

<PanaraTiltedButton
  bg={colors.accent}
  color={colors.accentFg}
  plunkColor={colors.accentDark}
>
  Submit
</PanaraTiltedButton>

3D-elevated container with configurable edge colors and depth. Use as a layout primitive.

npx shadcn@latest add @panara/panara-card

<PanaraCard
  bg={colors.accent}
  edgeRight={colors.accentDark}
  edgeBottom={colors.accentDarker}
>
  <div className="p-6">Card content</div>
</PanaraCard>

Input field with built-in formatting for phone, currency, card, and date values. Sharp edges, accent focus highlight.

npx shadcn@latest add @panara/panara-input

<PanaraInput
  label="Phone"
  format="phone"
  accentColor={colors.accent}
  onValueChange={(raw) => console.log(raw)}
/>

3D-elevated checkbox with press animation and accent theming.

npx shadcn@latest add @panara/panara-checkbox

<PanaraCheckbox
  checked={checked}
  onChange={setChecked}
  label="Accept terms"
  accentColor={colors.accent}
/>

Flat toggle switch with smooth thumb animation and accent theming.

npx shadcn@latest add @panara/panara-toggle

<PanaraToggle
  checked={enabled}
  onChange={setEnabled}
  label="Notifications"
  accentColor={colors.accent}
/>

Status badge with preset variants and custom color support.

npx shadcn@latest add @panara/panara-badge

<PanaraBadge variant="success">Active</PanaraBadge>
<PanaraBadge variant="custom" bg="#FF6B6B" color="#fff">
  Custom
</PanaraBadge>

Text hierarchy with opacity-based styling. Maps to semantic HTML tags.

npx shadcn@latest add @panara/panara-typography

<PanaraTypography variant="h1" textOpacity={1}>
  Large Heading
</PanaraTypography>
<PanaraTypography variant="body" accent>
  Accented body text
</PanaraTypography>

Select dropdown with optional color dot indicators and click-outside detection.

npx shadcn@latest add @panara/panara-dropdown

<PanaraDropdown
  label="Language"
  placeholder="Select..."
  options={[
    { label: "English", value: "en" },
    { label: "Spanish", value: "es", color: "#FF6B6B" },
  ]}
  value={lang}
  onChange={setLang}
/>