5rahim5rahim
11

Chalk UI

screenshot of Chalk UI
nextjs
react
tailwind
radix-ui

Open-source React component library, styled with TailwindCSS.

GithubDemo

Overview

Chalk UI is a reusable and customizable set of Tailwind components that comes with a CLI (Command Line Interface). It provides a wide range of components for building user interfaces, along with documentation and a CLI tool for easy installation and maintenance.

Features

  • Alert: Display informative messages to users.
  • Avatar: Show user profile pictures or icons.
  • Badge: Highlight important information or statuses.
  • Page Header: Create headers for different pages.
  • Button: Add interactive buttons for user actions.
  • Close Button: Allow users to close or dismiss elements.
  • Icon Button: Use icons as interactive buttons.
  • Skeleton: Display temporary loading placeholders for content.
  • Calendar: Show a calendar for date-related operations.
  • Modal: Create pop-up windows for additional content.
  • Drawer: Slide out side menus for navigation or options.
  • Loading Spinner: Indicate loading or processing actions to users.
  • Loading Overlay: Show loading states over a specific area.
  • Accordion: Display collapsible content sections.
  • DropdownMenu: Show a list of options when clicking a button.
  • Popover: Create pop-up tooltips or information boxes.
  • NavigationTabs: Display tabbed navigation elements.
  • TabPanels: Show different panels based on selected tabs.
  • Tooltip: Provide additional information on hover.
  • Breadcrumbs: Show a navigational path of the current page.
  • Typography: Use predefined text styles and formatting.
  • Banner: Display visually appealing banners or promotional messages.
  • Charts: Create interactive charts and data visualizations.
  • Stats: Show numeric statistics or metrics.
  • Pagination: Split content into multiple pages for easier navigation.
  • Toast: Display temporary messages or notifications.
  • Timeline: Present events or milestones in chronological order.
  • Paper: Create containers with a bordered or shadowed look.
  • Card: Display information or feature sets within a card layout.
  • Navbar: Create navigation headers for websites or applications.
  • VerticalNav: Show a vertical menu for navigation options.
  • HorizontalNav: Display a horizontal menu for navigation options.
  • AppLayout: Define the overall layout structure of an application.
  • Header: Create the header section of a page or application.
  • Sidebar: Show a side panel for additional content or menu options.
  • Content: Define the main content area of a page or application.
  • Section: Divide content into sections for better organization.
  • DataGrid: Display data in a tabular format with sorting and filtering options.
  • Form: Create input forms for user data entry.
  • Text Input: Allow users to type single-line text.
  • Textarea: Enable multi-line text input.
  • Number Input: Accept numerical values from users.
  • Address Input: Capture address information from users.
  • Price Input: Input field for monetary values.
  • Phone Number Input: Accept phone number input from users.
  • Multi Select Input: Allow users to select multiple options from a list.
  • Combobox: Combine dropdowns and text inputs for enhanced selection.
  • Switch: Allow users to toggle between two states.
  • Checkbox: Enable users to select or deselect options.
  • Checkbox Group: Present multiple related checkboxes together.
  • Select: Show a dropdown menu for single option selection.
  • Radio Group: Present multiple related radio buttons together.
  • Date Picker: Allow users to select dates from a calendar.
  • Date Range Picker: Enable users to select a range of dates.
  • Time Input: Accept time values from users.
  • Color Picker: Allow users to choose colors.
  • File Input/Dropzone: Enable file uploads or drag-and-drop functionality.
  • Typesafe Form: Provide type safety and validation for form inputs.
  • Image Grid Input: Allow users to select images in a grid layout.
  • Transfer List: Enable users to move items between two lists.
  • JSON Input: Accept JSON input from users.
  • i18n (For certain components): Provide internationalization support.
  • English: Support for the English language.
  • French: Support for the French language.
  • Tests: Unit and integration tests for the components.

Summary

Chalk UI is a powerful and versatile collection of Tailwind components that can be customized and reused to build user interfaces. With its extensive list of components and the convenience of a CLI tool for easy installation and maintenance, Chalk UI provides developers with a robust foundation for creating visually appealing and functional web applications. Whether you need simple buttons and forms or complex data grids and navigation menus, Chalk UI has got you covered.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

radix-ui
Radix UI

Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.

react-hook-form
React Hook Form

React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.