Skip to main content

Quick Start

Basic Example​

Here's a simple example showing how to use some of these components:

import { ThemeProvider, Button, Input, Box } from "react-neumorphism";

function MyComponent() {
  return (
    <ThemeProvider mode="light">
      <Input placeholder="Enter text..." />
      <Button>Click me</Button>
    </ThemeProvider>
  );
}

Available Components​

Once you've set up the ThemeProvider, you can use any of the following neumorphic components:

  • Accordion: Collapsible content panels
  • Badge: Small status indicators
  • Box: Container with neumorphic styling
  • Button: Interactive buttons with neumorphic effects
  • Checkbox: Custom styled checkboxes
  • Dropdown: Select menus with neumorphic styling
  • IconBox: Icon containers with neumorphic effects
  • Input: Text input fields
  • Modal: Dialog boxes
  • Popover: Floating content containers
  • Progress: Progress indicators
  • Radio: Radio button inputs
  • Table: Data tables with neumorphic styling
  • Tabs: Tabbed interface
  • Textarea: Multi-line text inputs
  • Toast: Notification messages
  • Toggle: Switch components
  • Tooltip: Hover information displays
  • Typography: Text components with neumorphic styling

Each component is designed to work seamlessly with the neumorphic design system, providing consistent styling and interactions across your application.