⚡ React Santy UI

A futuristic React component library built exclusively on SantyCss utility classes. Zero custom CSS. 20+ components. Full theme customisation via CSS variables.

Components

| Component | Category | Description | |---|---|---| | Button / ButtonGroup | Action | Variants, sizes, loading, icon support | | Accordion | Disclosure | Single/multi-open collapsible panels | | Modal | Overlay | Accessible dialog with multiple sizes | | Carousel | Display | Auto-play, dots, arrows, custom slides | | HeroBanner | Layout | Full-page hero with badge, title, CTA | | Navbar | Navigation | Dark/glass, sticky, responsive | | Card / StatCard | Display | Flat, raised, outline, dashboard stats | | Badge | Display | Colour variants with dot indicator | | Alert | Feedback | Dismissible inline alerts | | Notification | Feedback | Toast-style notification banners | | ToastProvider / useToast | Feedback | Global toast notifications | | Tabs | Navigation | Underline & pill variants | | Dropdown | Navigation | Click-activated menus with sections | | Progress | Feedback | Colour, striped, animated bars | | Spinner | Feedback | Size & colour variants | | Avatar / AvatarGroup | Display | Image + initials with auto-colour | | Input / Textarea / Select | Form | Full form controls with validation | | Toggle / Checkbox | Form | Styled toggles and checkboxes | | RangeSlider | Form | Styled range input | | Table | Data | Sortable, striped, bordered | | Breadcrumb | Navigation | Slash, dot, arrow separators | | Pagination | Navigation | Full page navigation | | Chip | Display | Colour variants with removable support | | Tooltip | Overlay | 4-position hover tooltips | | Steps / StepWizard | Navigation | Linear step indicator + guided wizard | | Drawer | Overlay | Slide-in side panel |

Installation

npm install react-santy-ui santycss

Quick Start

// 1. Import the library (styles auto-included)
import { Button, Modal, Accordion, HeroBanner } from 'react-santy-ui'

// 2. Wrap your app with ToastProvider if you use toasts
import { ToastProvider } from 'react-santy-ui'

function App() {
  return (
    <ToastProvider position="top-right">
      <HeroBanner
        badge="🚀 New"
        title="Hello World"
        subtitle="Built with React Santy UI"
        actions={<Button variant="primary" size="lg">Get Started</Button>}
      />
    </ToastProvider>
  )
}

Theme Customisation

Override SantyCss CSS variables in your global stylesheet:

:root {
  --santy-primary:      #00d4ff;   /* Main accent colour */
  --santy-secondary:    #7c3aed;   /* Secondary colour */
  --santy-success:      #00ff88;
  --santy-danger:       #ff3366;
  --santy-radius:       12px;
  --santy-radius-lg:    20px;
}

Component API Reference

<Button />

| Prop | Type | Default | Description | |---|---|---|---| | variant | primary | secondary | success | danger | warning | outline | ghost | primary | Visual style | | size | sm | md | lg | xl | md | Button size | | loading | boolean | false | Shows spinner, disables button | | disabled | boolean | false | Disables the button | | full | boolean | false | Full-width | | icon | ReactNode | — | Icon to display | | iconPosition | left | right | left | Icon position |

<Accordion />

| Prop | Type | Default | Description | |---|---|---|---| | items | { title, content }[] | [] | Accordion items | | flush | boolean | false | Remove outer border | | allowMultiple | boolean | false | Allow multiple panels open |

<Modal />

| Prop | Type | Default | Description | |---|---|---|---| | isOpen | boolean | — | Controls visibility | | onClose | () => void | — | Called on close | | title | ReactNode | — | Modal title | | size | sm | md | lg | xl | full | md | Modal size | | footer | ReactNode | — | Footer slot | | closeOnOverlay | boolean | true | Close on overlay click |

<Carousel />

| Prop | Type | Default | Description | |---|---|---|---| | slides | ReactNode[] | [] | Slide content (or image URLs) | | autoPlay | boolean | false | Auto advance slides | | interval | number | 4000 | Auto-play interval (ms) | | showDots | boolean | true | Show dot indicators | | showArrows | boolean | true | Show prev/next arrows | | height | string | '360px' | Carousel height |

<HeroBanner />

| Prop | Type | Default | Description | |---|---|---|---| | title | ReactNode | — | Main heading | | subtitle | ReactNode | — | Sub-heading | | description | string | — | Body text | | badge | ReactNode | — | Top badge | | actions | ReactNode | — | CTA buttons | | size | sm | md | lg | full | full | Section height | | align | left | center | right | center | Content alignment |

useToast()

const toast = useToast()

toast.add({
  type: 'success',   // 'info' | 'success' | 'warning' | 'error'
  title: 'Saved!',
  message: 'Your changes were saved.',
  duration: 4000,    // ms, set to 0 to persist
})

Dark Mode

Add the .dark class to <html> or <body> to activate SantyCss dark mode styles:

<html class="dark">

Or toggle programmatically:

document.documentElement.classList.toggle('dark')

Links

• Live Demo
• SantyCss Docs
• npm Package
• GitHub

License

MIT © Santy Chintu