manga-ui-compents-abi

🎌 69 Comic Book Style UI Components for Manga/Webtoon platforms.

Built with React + TypeScript. Dark theme with blood-red accents.

Installation

npm install manga-ui-compents-abi

Usage

import { Button, Card, MangaPosterCard, useTheme } from 'manga-ui-compents-abi';
import 'manga-ui-compents-abi/styles';

function App() {
  return (
    <Card>
      <MangaPosterCard
        title="One Piece"
        coverImage="/covers/onepiece.jpg"
        rating={4.9}
        status="ongoing"
      />
      <Button variant="primary">Read Now</Button>
    </Card>
  );
}

Components (69)

Form Controls

Button Input TextArea Select Switch Checkbox Radio Slider ColorPicker Rating FileUpload

Feedback

Toast Tooltip Alert Progress Spinner Skeleton Popover NotificationCenter LoadingOverlay ConfirmDialog

Layout

Card Modal Divider Carousel StatsCard Calendar Drawer BottomSheet

Navigation

Navbar Footer Tabs Breadcrumb Pagination Stepper Dropdown Accordion ScrollToTop

Data Display

Table DataTable Badge Avatar Tag Timeline

Manga-Specific

MangaPosterCard ChapterList ReadingProgress CommentCard GenreChip SearchBar UserCard MangaDetailHeader FavoriteButton BookmarkButton ReaderToolbar PageCounter

Social

LikeButton ShareButton FollowButton

Utility

ReportModal EmptyState FilterPanel SortSelector FloatingActionButton LazyImage ImageViewer Marquee CookieConsent CountdownTimer

Theme

Light/Dark mode support with useTheme hook:

import { useTheme } from 'manga-ui-compents-abi';

function ThemeToggle() {
  const { toggleTheme, isDark } = useTheme();
  return <button onClick={toggleTheme}>{isDark ? '🌙' : '☀️'}</button>;
}

License

MIT © Yasin