prime-design-system

v1.0.0

Published

11 days ago

A premium, comprehensive **Neumorphic** component library for React, featuring 52 meticulously crafted UI components. Designed for modern web applications that demand a distinct, tactile, and highly interactive user experience.

0High
0Medium
0Low

primetechnology

Prime Design System

A premium, comprehensive Neumorphic component library for React, featuring 52 meticulously crafted UI components. Designed for modern web applications that demand a distinct, tactile, and highly interactive user experience.

Features

52 Complete Components: From basic buttons to complex interactive widgets (Calendars, Command Palettes, Resizable Panels, Trees).
True Neumorphism: Custom inset and outset box-shadow calculations for realistic depth.
Global Theme Support: Built-in Light and Dark modes.
10 Accent Colors: Magenta, Cyan, Lime, Orange, Blue, Purple, Red, Yellow, Green, and Teal.
Fully Accessible: Keyboard navigation, ARIA attributes, and semantic HTML.
TypeScript: First-class types for excellent developer experience.

Installation

Install the package via npm, yarn, or pnpm:

npm install prime-design-system

(Note: react and react-dom are required peer dependencies).

Setup

For the components to render correctly with neumorphic shadows and colors, you must import the global CSS file at the root of your application (e.g., main.tsx or App.tsx):

import 'prime-design-system/style.css';

Theming and Accents

The design system uses HTML data-* attributes to control themes and accent colors. Apply these to your root <html> or <body> tag:

<!-- Dark mode with Purple accent -->
<html data-theme="dark" data-accent="purple">

Available Themes:

dark (default)
light

Available Accents:

magenta, cyan, lime, orange, blue, purple, red, yellow, green, teal.

Usage Example

Import any of the 52 components directly from the package:

import { Button, Input, Card } from 'prime-design-system';

function App() {
  return (
    <Card style={{ padding: '2rem', maxWidth: '400px' }}>
      <h2>Login</h2>
      <Input placeholder="Username" />
      <Input type="password" placeholder="Password" style={{ marginTop: '1rem' }} />
      <Button variant="primary" style={{ marginTop: '1.5rem', width: '100%' }}>
        Sign In
      </Button>
    </Card>
  );
}

export default App;

Component List

Prime Design System includes the following components:

Layout & Containers: Card, Drawer, Modal, Popover, Resizable, ScrollArea, Tabs, Accordion, Divider

Inputs & Forms: Button, IconButton, SplitButton, Input, Textarea, Checkbox, Radio, Switch, Slider, RangeSlider, Select, Listbox, TagsInput, ColorPicker, DatePicker, TimePicker, Dropzone, Knob, Rating, TransferList

Navigation & Menus: Breadcrumbs, CommandMenu, ContextMenu, DropdownMenu, Menubar, SpeedDial, Pagination, Stepper

Data Display: Table, Tree, Timeline, Avatar, Badge, Carousel, Calendar

Feedback: Alert, Toast, Tooltip, HoverCard, ProgressBar, Spinner, Skeleton

Development

To view the components locally in Storybook:

Clone the repository.
Run npm install.
Run npm run storybook.
Open your browser at http://localhost:6006.

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme