Reusable

Reusable Components

1. Inputs Text Input: For entering plain text (e.g., name, email). Done Password Input: For entering secure text (e.g., passwords). Done Number Input: For numeric values with min and max validation. Textarea: For multi-line input. Done Search Input: Includes a search icon and clear functionality. Done

2. Selects Dropdown Select: For choosing a single value from a list. Multi-Select: For choosing multiple options from a list. Autocomplete/Combobox: Dropdown with typeahead support.

3. Buttons Primary Button: For main actions (e.g., Submit). Secondary Button: For less important actions. Icon Button: Button with just an icon (e.g., close, search). Loading Button: Button with a loading spinner.

4. Checkboxes & Radios Checkbox: For boolean selection (e.g., "I agree to terms"). Checkbox Group: Group of checkboxes for multi-select. Radio Button: For selecting one option from a group. Radio Group: Group of related radio buttons.

5. Switches & Toggles For binary on/off states (e.g., dark mode, settings).

6. Modals/Dialogs Basic Modal: Popup with a close button. Confirmation Modal: For confirming actions (e.g., "Are you sure?"). Form Modal: Modal with a form inside.

7. Cards Basic Card: For displaying grouped content. Interactive Card: Clickable cards with hover effects. Media Card: Includes an image or video.

8. Alerts/Notifications Alert: For important messages (success, error, warning, info). Toast Notification: Temporary, dismissable messages.

9. Tables Basic Table: Displays tabular data. Data Table: Includes features like sorting, filtering, and pagination.

10. Tabs For organizing content in separate panes.

11. Breadcrumbs For navigation context (e.g., Home > Products > Shoes).

12. Navigation Components Navbar: For site-wide navigation. Sidebar: For app navigation or filters. Pagination: For navigating through pages.

13. Loaders Spinner: A simple loading animation. Skeleton Loader: Placeholder UI for loading states.

14. Tooltips For providing additional information on hover or focus.

15. Avatars For user profile pictures or placeholders.

16. Forms Form Wrapper: Handles form state, validation, and submission. Field Components: Reusable form fields like TextField, SelectField, CheckboxField.

17. Typography Text: For body text with consistent styles. Heading: H1–H6 with consistent styles. Link: Styled anchor tags for navigation.

18. Images Responsive Image: Automatically adjusts to container size. Lazy Loaded Image: Loads images as they appear in the viewport.

19. Icons Reusable icon component that supports multiple sizes, colors, and types (e.g., SVG or font-based).

20. Date/Time Components Date Picker: For selecting dates. Time Picker: For selecting times. DateTime Picker: Combines both.

21. File Uploads File Input: For uploading files. Drag & Drop Upload: For intuitive file uploads.

22. Progress Indicators Progress Bar: Shows percentage of completion. Circular Progress: Circular version of a progress indicator.

23. Chips/Tags For displaying categories, labels, or user selections.

24. Accordions Expandable/collapsible sections for showing/hiding content.

25. Stepper For multi-step processes (e.g., onboarding wizards).