crown elements
Crown Elements is a collection of reusable and customizable web components designed to simplify front-end development and enhance user interface consistency across web applications.
Installation
Note: Crown Elements is currently in development and not yet available for installation.
Once the project is completed, you'll be able to install Crown Elements via npm:
npm install @crownelements/coreOr include it directly in your HTML:
<script
type="module"
src="https://unpkg.com/@crownelements/core@0.0.1/dist/crownelements/crownelements.esm.js"
></script>Usage
Crown Elements can be used in any web application, regardless of the framework or library you're using. Here's an example of how to use the crown-button component in a simple HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Crown Elements Example</title>
</head>
<body>
<crown-button>Click me</crown-button>
<script src="https://unpkg.com/@crownelements/core@0.0.1/dist/core/core.esm.js"></script>
</body>
</html>Components in Progress
Crown Elements is actively being developed, and the following components are planned to be included:
Basic Elements
- Buttons: Standard, Icon, Floating Action Button (FAB), Toggle
- Inputs: Text, Number, Password, Email, File, Date, Time, Color Picker
- Form Controls: Checkboxes, Radio Buttons, Switches, Range Sliders
- Dropdowns: Simple Dropdown, Multi-Select, Searchable Dropdown
- Labels and Tags: For categorization or markup
- Icons: A variety of commonly used icons
- Loaders and Spinners: For indicating loading states
- Progress Bars: Determinate, Indeterminate, Circular
- Tooltips: For additional information display
- Badges: For notifications, counts
- Typography: Headings, Paragraphs, Text Utilities
Navigation
- Menus: Sidebar, Context Menu, Breadcrumb, Pagination
- Tabs: Standard Tabs, Scrollable, Vertical
- Accordions: For collapsible content areas
- Navigation Bars: Top bar, Bottom Navigation
- Steppers: Horizontal, Vertical, Linear, Non-linear
Data Display
- Tables: Basic, Sortable, Filterable, Expandable
- Lists: Simple List, Nested List, Interactive
- Cards: Basic, Image Cards, Interactive
- Modals: Dialogs, Popups, Lightboxes
- Toasts and Snackbars: For transient messages
- Timelines: For chronological data display
- Chips: For compact elements representation
- Data Grid: Advanced grid system
- Avatar: User or character representation
- Image Gallery: Grid, Carousel
Feedback & Messages
- Alerts: For warnings, errors, information, and success messages
- Popovers: For floating dialog boxes
- Confirmation Dialogs: For critical action confirmations
Layout Components
- Grid System: Responsive grid layout
- Dividers: Horizontal, Vertical
- Spacer: For adding space between components
- Panels: For grouping content
- Scroll Container: For custom scroll areas
Interactive Components
- Date and Time Pickers: Calendar, Time Selection
- Tree View: For hierarchical data
- Rating Component: For user ratings
- Autocomplete: For predictive text inputs
- Drag and Drop Interface: For interactive element repositioning
- Expandable Search Bar
Utility Components
- Clipboard Copy: For copying text to clipboard
- Data Export: CSV, Excel export for tables
- Internationalization: Language switcher
- Theme Switcher: Light/Dark mode, Color themes
Specialized Components
- Maps: Interactive maps integration
- Charts and Graphs: Line, Bar, Pie, Doughnut, Radar
- Audio/Video Players: Custom media players
- File Uploaders: Drag and drop, file queue
- WYSIWYG Editor: Rich text editor
- Markdown Editor: For markdown input
- Code Editor: Syntax-highlighted text areas
- E-commerce Components: Product cards, Shopping cart
- Social Media Share Buttons
- Password Strength Meter
Accessibility Components
- Skip Links: For navigation without a mouse
- Screen Reader Only Content
Advanced/Composite Components
- Dashboards: Pre-built layouts for dashboards
- Form Wizard: Multi-step forms
- Landing Page Templates
- Login/Signup Forms: With validation
- Profile Page Layout
Experimental/Fun Components
- Parallax Scrolling Elements
- Animated Charts and Graphs
- 3D Elements
Mobile Specific
- Bottom Sheets
- Swipeable Views
License
Crown Elements is released under the MIT License. See the LICENSE file for details.