Skip to content

README.md

Latest commit

 

History

History
159 lines (125 loc) · 4.58 KB

README.md

File metadata and controls

159 lines (125 loc) · 4.58 KB
Raw

daenggle-ui

npm version npm downloads Storybook MIT License

UI component library for DaenggleJeju — a pet-friendly travel service built with Next.js and vanilla-extract.

View Storybook →

Installation

npm install daenggle-ui
# or
pnpm add daenggle-ui
# or
yarn add daenggle-ui

Peer Dependencies

This package requires the following peer dependencies:

npm install next react react-dom vaul
Package Version
next >= 14.0.0
react >= 18.0.0
react-dom >= 18.0.0
vaul >= 1.0.0

Quick Start

import { Button, Header, BottomSheet } from "daenggle-ui";

export default function Page() {
  return (
    <>
      <Header title="DaenggleJeju" />
      <Button
        size="medium"
        status="primary"
        text="Explore"
        onClick={() => {}}
      />
    </>
  );
}

Note: This library uses vanilla-extract for styling. Styles are zero-runtime and compile to static CSS at build time.

Components

Browse the full interactive component showcase in Storybook.

Atoms

Fundamental, single-purpose UI building blocks.

Component Description
AvatarPicker Profile image selector
BottomSheet Slide-up bottom sheet panel
Button Primary action button
LoginButton Social login button
Location Location indicator button
AiProfileHeader AI chat profile header
ChatInput Chat message input field
MessageBox Chat message bubble
ThinkingBubble AI thinking state indicator
TopicSelector Topic selection UI
Chip Tag chip
ChipKeyword Keyword chip
ChipMapList Map list chip
DangleCard Dangle content card
DangleItem Dangle list item
DanglePlace Place card
DanglePlay Playable content card
DangleReview Review card
DangleVideo Video card
Dropdown Select dropdown
EmptyState Empty / zero-data placeholder
Fab Floating action button
FilterChip Toggleable filter chip
FilterChipExpand Expandable filter chip
Header Page header
LoadingSpinner Loading indicator
Modal Dialog modal
NavBar Bottom navigation bar
NoticeBox Informational notice box
Pagination Page navigation
ProfileCard User profile card
ProgressCircle Circular progress indicator
RadioGroup Radio button group
SearchField Search input
SegmentedControl Segmented tab control
SelectField Select input field
ShortsBottomInfo Shorts video bottom info overlay
Skeleton Loading skeleton placeholder
Tabs Tab navigation
TextField Text input field
Tooltip Tooltip
TopBar Top action bar

Molecules

Composed components built from atoms, with specific interaction logic.

Component Description
Carousel Image / card slider
FilterSection Grouped filter chip set
Grid Responsive grid layout
MapFloatingButtons Floating button group over map
SearchHeader Header with integrated search
ShortsOverlay Shorts video overlay
WelcomeOverlay Onboarding welcome overlay

Requirements

  • React 18+
  • Next.js 14+
  • Node.js 18+

This library is designed and optimized for Next.js App Router. It may work in other React environments, but is not officially supported.

Tech Stack
Styling vanilla-extract — zero-runtime CSS-in-TypeScript
Carousel embla-carousel-react
Bottom Sheet vaul
Icons react-icons

License

MIT © DaenggleJeju