COMPFEST 17 Halcyon Design System

Halcyon Design System

Halcyon Design System is a design system created main COMPFEST 17 projects. The design system provides a set of reusable components, styles, and guidelines based on ShadCN to ensure consistency and efficiency in the design and development process.

Getting Started

To add Halcyon Design System to your project, use this command:

npm install compfest-halcyon

or

yarn add compfest-halcyon

or

pnpm add compfest-halcyon

Usage

To use Halcyon Design System in your project, import the components and styles as needed. For example:

import { Button } from 'compfest-halcyon';

Components

Halcyon Design System provides a set of components that can be used in your project. The components are designed to be reusable and customizable. Here are some of the components available in Halcyon Design System:

src/
├── components
│   ├── context
│   │   └── theme-provider.tsx
│   ├── elements
│   │   ├── Calendar
│   │   │   └── index.tsx
│   │   ├── Chips
│   │   │   ├── index.tsx
│   │   │   └── interface.ts
│   │   ├── ContactPerson
│   │   │   └── index.tsx
│   │   ├── Countdown
│   │   │   ├── index.tsx
│   │   │   └── interface.ts
│   │   ├── Disclosure
│   │   │   └── index.tsx
│   │   ├── Dropzone
│   │   │   ├── index.tsx
│   │   │   └── interface.ts
│   │   ├── FAQ
│   │   │   ├── index.tsx
│   │   │   └── interface.ts
│   │   ├── Footer
│   │   │   ├── constant.ts
│   │   │   └── index.tsx
│   │   ├── Loader
│   │   │   └── index.tsx
│   │   ├── Modals
│   │   │   ├── index.tsx
│   │   │   └── interface.ts
│   │   ├── Notes
│   │   │   ├── index.tsx
│   │   │   └── interface.ts
│   │   ├── ProgressBar
│   │   │   └── index.tsx
│   │   ├── Stack
│   │   │   ├── index.tsx
│   │   │   └── interface.ts
│   │   ├── SVG
│   │   │   └── ChevronDown.tsx
│   │   ├── Testimonial
│   │   │   ├── index.tsx
│   │   │   ├── interface.ts
│   │   │   └── TestimonyButton.tsx
│   │   ├── TextOverflow
│   │   │   └── index.tsx
│   │   └── Timeline
│   │       ├── index.tsx
│   │       └── interface.ts
│   ├── icons
│   │   ├── Calendar.tsx
│   │   ├── Chevron.tsx
│   │   ├── Clock.tsx
│   │   ├── Facebook.tsx
│   │   ├── Instagram.tsx
│   │   ├── interface.ts
│   │   ├── Line.tsx
│   │   ├── Linkedin.tsx
│   │   ├── Maps.tsx
│   │   ├── Medium.tsx
│   │   ├── Person.tsx
│   │   ├── Twitter.tsx
│   │   ├── WhatsApp.tsx
│   │   ├── X.tsx
│   │   └── Youtube.tsx
│   └── ui
│       ├── accordion.tsx
│       ├── alert.tsx
│       ├── button.tsx
│       ├── card.tsx
│       ├── checkbox.tsx
│       ├── dialog.tsx
│       ├── dropdown-menu.tsx
│       ├── form.tsx
│       ├── image.tsx
│       ├── input.tsx
│       ├── label.tsx
│       ├── navigation-menu.tsx
│       ├── popover.tsx
│       ├── radio-group.tsx
│       ├── scroll-area.tsx
│       ├── select.tsx
│       ├── sheet.tsx
│       ├── skeleton.tsx
│       ├── sonner.tsx
│       ├── tabs.tsx
│       ├── tip-cards.tsx
│       ├── toaster.tsx
│       ├── toast.tsx
│       └── tooltip.tsx
├── hooks
│   └── use-toast.ts
├── lib
│   ├── ui
│   │   └── primitive
│   │       ├── asset.ts
│   │       └── utils.tsx
│   └── utils.ts

Credits

1. ShadCN: https://ui.shadcn.com/
2. Tailwind CSS: https://tailwindcss.com/
3. Radix UI: https://www.radix-ui.com/
4. TanStack: https://tanstack.com/
5. Sonner: https://sonner.dev/