plynx

Plynx UI

A modern React dashboard UI kit with a flexible theming system

npm · GitHub

Features

• 15+ Components — Button, Input, Card, Sidebar, Header, Modal, Tabs, and more
• 3 Curated Themes — Minimal, Dark, Professional — each fully styled, no extra config
• Flexible Theming — Switch themes at runtime via React Context
• TypeScript First — All components and tokens fully typed
• Tailwind CSS — Utility-first styling with CSS variable design tokens
• Storybook Docs — Interactive component showcase with live theme switching

Installation

npm install plynx

Quick Start

// main.tsx
import { ThemeProvider, baseTheme, darkTheme, professionalTheme } from 'plynx'
import 'plynx/styles'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <ThemeProvider
    initialTheme={baseTheme}
    themes={[baseTheme, darkTheme, professionalTheme]}
  >
    <App />
  </ThemeProvider>
)

// App.tsx
import { Button, Card, Input } from 'plynx'

export function App() {
  return (
    <Card header="Welcome">
      <Input label="Email" placeholder="[e-mail]" type="email" />
      <Button className="mt-4">Get started</Button>
    </Card>
  )
}

Themes

Theme	Description
baseTheme	Clean, minimal with light neutral tones
darkTheme	Dark mode variant with light text
professionalTheme	Navy-toned corporate theme with tighter radius

Switch themes at runtime:

import { useTheme } from 'plynx'

function ThemeToggle() {
  const { setTheme, currentTheme } = useTheme()
  return (
    <button onClick={() => setTheme(currentTheme.name === 'dark' ? 'base' : 'dark')}>
      Toggle dark mode
    </button>
  )
}

Components

Core

Component	Description
Button	Variants: primary, secondary, outline, ghost · Sizes: sm, md, lg
Input	With label, error state, and help text
Card	With header, footer, and elevated variant

Layout

Component	Description
DashboardLayout	Full page shell: sidebar + header + content
Sidebar	Collapsible navigation panel with logo, footer, and built-in toggle
Header	Top bar with title, breadcrumbs, and actions
PageContent	Scrollable main content area

Navigation

Component	Description
NavItem	Navigation link with active state, icon, badge, and collapsed tooltip
NavGroup	Collapsible labeled section with hierarchy lines

Hooks

Hook	Description
useSidebarContext	Returns { collapsed: boolean } — safe to call outside Sidebar (defaults to false)

Feedback & Interaction

Component	Description
Badge	Status indicators with success / warning / error / info
Alert	Dismissable feedback messages
Modal	Accessible overlay dialog
Tabs	Content switcher with keyboard support
Dropdown	Floating menu triggered by a button
Tooltip	Hover label with directional positioning

Sidebar

Sidebar manages its own collapsed state and exposes it via SidebarContext. Child NavItem and NavGroup components read this context automatically — no wiring required.

import { Sidebar, NavItem, NavGroup } from 'plynx'
import { LayoutDashboard, Settings } from 'lucide-react'

<Sidebar logo={<strong>Plynx</strong>} footer={<span>[e-mail]</span>}>
  <NavGroup label="Main">
    <NavItem label="Dashboard" href="/" icon={<LayoutDashboard size={16} />} isActive />
    <NavItem label="Settings" href="/settings" icon={<Settings size={16} />} badge={3} />
  </NavGroup>
</Sidebar>

Collapsed state — when the user clicks the built-in toggle button, the sidebar narrows to icon-only mode (w-16). In this state:

• NavItem shows only the icon (or a 2-letter initial if no icon is provided) and renders a portal-based tooltip on hover
• NavGroup hides its label and expand/collapse button, rendering only its children
• The footer slot is hidden

useSidebarContext — read the collapsed state anywhere inside the tree:

import { useSidebarContext } from 'plynx'

function MyNavItem() {
  const { collapsed } = useSidebarContext()
  return <span>{collapsed ? '…' : 'Full label'}</span>
}

NavGroup — collapsible by default (starts open). Click the label row to toggle. Shows a left-border hierarchy line when expanded.

<NavGroup label="Settings" className="mt-4">
  <NavItem label="Profile" href="/profile" icon={<User size={16} />} />
  <NavItem label="Security" href="/security" icon={<Shield size={16} />} />
</NavGroup>

Peer dependency — lucide-react is a peer dependency. Install it alongside plynx if you use Lucide icons in nav items:

npm install lucide-react

License

MIT