@votekio/cyberpunk-ui

v0.1.3

Published

10 days ago

A 3D-styled UI component library built with TailwindCSS

Downloads

183

0High
0Medium
0Low

rintran720

react ui 3d components tailwindcss design-system

@votekio/cyberpunk-ui

3D-styled UI component library for React. Built with TailwindCSS, inspired by shadcn/ui but with a unique 3D look - depth, shadows, and press effects.

🌐 Live Demo • 📦 npm • 📖 GitHub • ☕ Buy Me a Coffee

Author

John Tran

If you find this useful, consider supporting the project!

✨ Features

🎨 3D Visual Effects - Realistic depth and shadow effects
🖱️ Interactive Feedback - Press animations and hover states
🌈 Multiple Variants - Primary, Secondary, Accent, Ghost, Danger, Glass
📏 Flexible Sizes - SM, MD, LG, XL, and Icon sizes
🎛️ Customizable Depth - Flat, Shallow, Normal, Deep options
✨ Glow Effects - Optional glow on hover
♿ Accessible - Keyboard navigation and focus states
🎨 CSS Variables - Customize colors via CSS variables
🖥️ SSR Support - Works with Next.js, Remix, Gatsby, etc.
📖 Storybook - Interactive documentation and playground

Components

| Component | Description | ------------------ | Button | Accordion | Dialog | Alert | TextField | TextArea | Badge | Card | Switch | Checkbox | Tabs | Select | Progress | Avatar | Skeleton | Tooltip | Slider | RadioGroup | Toast | DropdownMenu | Separator | Label | Toggle | Popover | Sheet | Collapsible | HoverCard | ScrollArea | AspectRatio | Breadcrumb | Command | Menubar | NavigationMenu | Table | Pagination | Calendar | DatePicker | TimePicker | TimezonePicker | DateTimePicker | Form | Grid | FileUpload | Rating | BarChart | LineChart | PieChart | AreaChart | ScatterChart | RadarChart | ComposedChart | GaugeChart | | ------------------------------------------- | | 3D buttons with press effects | | Collapsible sections | | Modal dialogs with portal | | Alert messages with icons | | Text inputs with 3D styling | | Multiline text inputs | | Status badges and labels | | Container cards with 3D effects | | Toggle switches | | Checkbox inputs | | Tab navigation | | Dropdown select menus | | Linear and circular progress indicators | | User avatars with status indicators | | Loading placeholders | | Hover tooltips | | Range sliders | | Radio button groups | | Toast notifications | | Context menus and dropdowns | | Visual dividers | | Form labels | | Toggle buttons | | Popover dialogs | | Side sheets and drawers | | Collapsible content sections | | Hover-triggered cards | | Custom scrollable areas | | Maintain aspect ratios | | Navigation breadcrumbs | | Command palette and search | | Application menu bars | | Navigation menus with dropdowns | | Data tables | | Page navigation | | Date calendar picker | | Date input with calendar | | Time selection with hours, minutes, seconds | | Timezone selection with offset display | | Combined date and time picker | | Form components and validation | | Responsive grid layout system | | File upload with drag & drop support | | Star rating component (1-5 stars) | | 3D bar charts with gradients | | Line charts with smooth curves | | Pie and donut charts | | Area charts with gradients | | Scatter plots for correlation analysis | | Radar/spider charts for comparisons | | Combined bar, line, and area charts | | Gauge/speedometer charts for metrics |

Getting Started

Install

npm install @votekio/cyberpunk-ui
# or
yarn add @votekio/cyberpunk-ui
# or
pnpm add @votekio/cyberpunk-ui

Setup TailwindCSS

Add to your tailwind.config.js:

module.exports = {
  content: [
    // ... your paths
    "./node_modules/@votekio/cyberpunk-ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest
};

Import Styles

import "@votekio/cyberpunk-ui/dist/styles.css";

Use Components

import { Button } from "@votekio/cyberpunk-ui";

function App() {
  return (
    <Button variant="primary" size="lg">
      Click Me!
    </Button>
  );
}

Color System

Uses CSS variables for colors. Set them directly in your CSS.

Using Theme Classes

Add class or data attribute to <html>:

<!-- Using class -->
<html class="theme-dark">
  <!-- Or data attribute -->
  <html data-theme="dark"></html>
</html>

Available Themes

theme-dark / data-theme="dark" - Dark (default)
theme-light / data-theme="light" - Light
theme-ocean / data-theme="ocean" - Cyan/teal
theme-sunset / data-theme="sunset" - Orange/pink
theme-forest / data-theme="forest" - Green

Customize Colors

Override CSS variables in your CSS:

/* Override single color */
:root {
  --color-primary-500: #ef4444;
}

/* Full color palette override */
:root {
  --color-primary-50: #fef2f2;
  --color-primary-100: #fee2e2;
  --color-primary-200: #fecaca;
  --color-primary-300: #fca5a5;
  --color-primary-400: #f87171;
  --color-primary-500: #ef4444;
  --color-primary-600: #dc2626;
  --color-primary-700: #b91c1c;
  --color-primary-800: #991b1b;
  --color-primary-900: #7f1d1d;
  --color-primary-950: #450a0a;

  --color-secondary-500: #8b5cf6;
  --color-accent-500: #14b8a6;
}

All colors are controlled via CSS variables - no JavaScript needed.

SSR Support

Works with Next.js, Remix, Gatsby, etc.

SSR Utilities

import {
  isBrowser,
  isServer,
  useIsMounted,
  useLocalStorage,
  useWindowSize,
  usePrefersDarkMode,
} from "@votekio/cyberpunk-ui";

// Check environment
if (isBrowser) {
  // client-side only
}

// Check if mounted
function MyComponent() {
  const isMounted = useIsMounted();

  if (!isMounted) return <Skeleton />;

  return <div>{window.innerWidth}</div>;
}

// Safe localStorage
const [value, setValue] = useLocalStorage("key", "default");

// Window size (SSR-safe)
const { width, height } = useWindowSize();

// Dark mode preference
const prefersDark = usePrefersDarkMode();

Next.js App Router

No special setup needed. Just import styles and use components. Colors are controlled via CSS variables.

Component Examples

Button

import { Button } from "@votekio/cyberpunk-ui";

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="accent">Accent</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="glass">Glass</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

// With icons
<Button leftIcon={<Icon />}>Download</Button>

// Loading state
<Button isLoading>Loading</Button>

TextField

import { TextField, TextArea } from "@votekio/cyberpunk-ui";

<TextField
  label="Email"
  placeholder="[email protected]"
  leftElement={<MailIcon />}
  helperText="We'll never share your email"
  fullWidth
/>

<TextField
  label="Password"
  error="Password is required"
  isRequired
/>

<TextArea
  label="Message"
  placeholder="Enter your message..."
  resize
/>

Dialog

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from "@votekio/cyberpunk-ui";

<Dialog>
  <DialogTrigger>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description here.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DialogClose>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>;

Alert

import { Alert, AlertTitle, AlertDescription } from "@votekio/cyberpunk-ui";

<Alert variant="info">
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>This is an info alert.</AlertDescription>
</Alert>

<Alert variant="success">
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>Operation completed.</AlertDescription>
</Alert>

<Alert variant="warning">
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>Please check your input.</AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Something went wrong.</AlertDescription>
</Alert>

Accordion

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@votekio/cyberpunk-ui";

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content for section 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>Content for section 2</AccordionContent>
  </AccordionItem>
</Accordion>;

Calendar & DatePicker

import { Calendar, DatePicker } from "@votekio/cyberpunk-ui";

// Calendar
<Calendar
  value={selectedDate}
  onChange={setSelectedDate}
  showNavigation
/>

// DatePicker
<DatePicker
  label="Select Date"
  value={date}
  onChange={setDate}
  placeholder="Pick a date"
/>

TimePicker, TimezonePicker & DateTimePicker

import { TimePicker, TimezonePicker, DateTimePicker } from "@votekio/cyberpunk-ui";

// TimePicker
<TimePicker
  label="Select Time"
  value={time}
  onChange={setTime}
  format="24h"
  showSeconds
/>

// TimezonePicker
<TimezonePicker
  label="Select Timezone"
  value={timezone}
  onChange={setTimezone}
  priorityTimezones={[
    { value: "America/New_York", label: "Eastern Time" },
    { value: "America/Los_Angeles", label: "Pacific Time" },
  ]}
/>

// DateTimePicker
<DateTimePicker
  label="Select Date & Time"
  value={dateTime}
  onChange={setDateTime}
  format="24h"
  showSeconds
/>

Grid

import { Grid, GridItem } from "@votekio/cyberpunk-ui";

<Grid cols={12} gap={4}>
  <GridItem colSpan={{ base: 12, md: 6, lg: 4 }}>
    <Card>Item 1</Card>
  </GridItem>
  <GridItem colSpan={{ base: 12, md: 6, lg: 4 }}>
    <Card>Item 2</Card>
  </GridItem>
  <GridItem colSpan={{ base: 12, md: 6, lg: 4 }}>
    <Card>Item 3</Card>
  </GridItem>
</Grid>;

FileUpload

import { FileUpload } from "@votekio/cyberpunk-ui";

<FileUpload
  label="Upload Files"
  value={files}
  onChange={setFiles}
  multiple
  accept="image/*"
  maxSize={5 * 1024 * 1024} // 5MB
  maxFiles={5}
/>;

Rating

import { Rating } from "@votekio/cyberpunk-ui";

<Rating
  value={rating}
  onChange={setRating}
  max={5}
  allowHalf
  color="primary"
  size="lg"
/>;

Form

import {
  Form,
  FormItem,
  FormLabel,
  FormMessage,
  FormField,
  TextField,
  Button,
} from "@votekio/cyberpunk-ui";

<Form onSubmit={handleSubmit}>
  <FormField name="email">
    <FormItem>
      <FormLabel>Email</FormLabel>
      <TextField type="email" placeholder="[email protected]" />
      <FormMessage />
    </FormItem>
  </FormField>
  <Button type="submit">Submit</Button>
</Form>;

Pagination

import { Pagination } from "@votekio/cyberpunk-ui";

<Pagination
  currentPage={1}
  totalPages={10}
  onPageChange={setPage}
  showFirstLast
  showPrevNext
/>;

Select

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@votekio/cyberpunk-ui";

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>;

DropdownMenu

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@votekio/cyberpunk-ui";

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>;

Charts

import { BarChart, LineChart, PieChart, AreaChart } from "@votekio/cyberpunk-ui";

// BarChart
<BarChart
  title="Sales Overview"
  data={[
    { label: "Jan", value: 120, color: "primary" },
    { label: "Feb", value: 190, color: "secondary" },
    { label: "Mar", value: 300, color: "accent" },
  ]}
  showGrid
  showLabels
/>

// LineChart
<LineChart
  title="User Growth"
  series={[
    {
      name: "Users",
      color: "primary",
      data: [
        { label: "Jan", value: 100 },
        { label: "Feb", value: 150 },
        { label: "Mar", value: 200 },
      ],
    },
  ]}
  showGrid
  showDots
  curve="smooth"
/>

// PieChart
<PieChart
  title="Market Share"
  data={[
    { label: "Desktop", value: 45, color: "primary" },
    { label: "Mobile", value: 30, color: "secondary" },
    { label: "Tablet", value: 15, color: "accent" },
  ]}
  showLabels
  showLegend
/>

// AreaChart
<AreaChart
  title="Revenue Trend"
  series={[
    {
      name: "Revenue",
      color: "primary",
      data: [
        { label: "Jan", value: 10000 },
        { label: "Feb", value: 15000 },
        { label: "Mar", value: 12000 },
      ],
    },
  ]}
  showGrid
  curve="smooth"
/>

ScatterChart

import { ScatterChart } from "@votekio/cyberpunk-ui";

<ScatterChart
  title="Sales vs Marketing"
  xAxisLabel="Marketing Spend"
  yAxisLabel="Sales"
  series={[
    {
      name: "Data",
      color: "primary",
      data: [
        { x: 1000, y: 5000 },
        { x: 2000, y: 8000 },
        { x: 3000, y: 12000 },
      ],
    },
  ]}
  showGrid
/>;

RadarChart

import { RadarChart } from "@votekio/cyberpunk-ui";

<RadarChart
  title="Performance Metrics"
  series={[
    {
      name: "Product A",
      color: "primary",
      data: [
        { label: "Speed", value: 80 },
        { label: "Quality", value: 90 },
        { label: "Price", value: 70 },
      ],
    },
  ]}
  showGrid
  showArea
/>;

ComposedChart

import { ComposedChart } from "@votekio/cyberpunk-ui";

<ComposedChart
  title="Revenue Analysis"
  data={[
    { label: "Jan", barValue: 12000, lineValue: 8000, areaValue: 4000 },
    { label: "Feb", barValue: 15000, lineValue: 9000, areaValue: 6000 },
  ]}
  showGrid
  barColor="primary"
  lineColor="secondary"
  areaColor="accent"
/>;

GaugeChart

import { GaugeChart } from "@votekio/cyberpunk-ui";

// Basic gauge
<GaugeChart
  title="CPU Usage"
  value={75}
  min={0}
  max={100}
  unit="%"
  color="primary"
/>

// Custom range
<GaugeChart
  title="Temperature"
  value={22}
  min={0}
  max={40}
  unit="°C"
  color="warning"
/>

// Full circle gauge
<GaugeChart
  title="Progress"
  value={270}
  min={0}
  max={360}
  type="full"
  color="success"
/>

Development

# Install
npm install

# Start Storybook
npm run dev

# Build library
npm run build

# Build Storybook
npm run build:storybook

Deployment

Deploy to Vercel

Project is set up to deploy Storybook to Vercel.

Option 1: Vercel CLI

npm i -g vercel
vercel

Option 2: Vercel Dashboard

Push to GitHub/GitLab/Bitbucket
Go to Vercel Dashboard
Add New Project
Import repo
Vercel auto-detects vercel.json
Deploy

vercel.json is configured with:

Build: npm run build:storybook
Output: storybook-static
Framework: Static Site

Manual Build

npm run build:storybook
# Output in storybook-static/

Publish to npm

Prerequisites

Create npm account at npmjs.com
Login: npm login

Build & Publish

# Build (copies CSS too)
npm run build

# Check output
ls dist/

# Publish (runs prepublishOnly automatically)
npm publish

# For scoped packages
npm publish --access public

Version Management

npm version patch   # 0.1.0 -> 0.1.1
npm version minor   # 0.1.0 -> 0.2.0
npm version major   # 0.1.0 -> 1.0.0

npm publish --access public

What Gets Published

Included:

dist/ - JS, TS defs, CSS
README.md
package.json

Excluded (via .npmignore):

src/
Storybook files
Dev configs
Tests

After Publishing

npm install @votekio/cyberpunk-ui

import { Button } from "@votekio/cyberpunk-ui";
import "@votekio/cyberpunk-ui/styles/globals.css";

Support

If this helped you, consider:

⭐ Star the repo
🐛 Report bugs or suggest features
💬 Share with others
☕ Buy me a coffee

Thanks! 🙏

License

Made with ❤️ by John Tran

☕ Buy Me a Coffee • 📖 Docs • 🐛 Report Bug

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@votekio/cyberpunk-ui

Author

✨ Features

Components

Getting Started

Install

Setup TailwindCSS

Import Styles

Use Components

Color System

Using Theme Classes

Available Themes

Customize Colors

SSR Support

SSR Utilities

Next.js App Router

Component Examples

Button

TextField

Dialog

Alert

Accordion

Calendar & DatePicker

TimePicker, TimezonePicker & DateTimePicker

Grid

FileUpload

Rating

Form

Pagination

Select

DropdownMenu

Charts

ScatterChart

RadarChart

ComposedChart

GaugeChart

Development

Deployment

Deploy to Vercel

Publish to npm

Support

License