{"id":19369976,"url":"https://github.com/vinyl-davyl/vinyl-component-blocks","last_synced_at":"2025-04-23T15:31:47.693Z","repository":{"id":234355082,"uuid":"788162763","full_name":"Vinyl-Davyl/vinyl-component-blocks","owner":"Vinyl-Davyl","description":"🧱 Reusable, Modular and Styled UI Component Library. Stop repeating work, install, call, use and modify.","archived":false,"fork":false,"pushed_at":"2024-05-06T06:20:04.000Z","size":1570,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T17:11:10.184Z","etag":null,"topics":["accessibility","authorization","component-library","components","components-library","design","design-system","library","typescript","ui","ui-components","ui-library"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vinyl-component-blocks","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Vinyl-Davyl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-17T22:32:49.000Z","updated_at":"2024-08-27T17:03:54.000Z","dependencies_parsed_at":"2024-05-04T03:21:16.005Z","dependency_job_id":null,"html_url":"https://github.com/Vinyl-Davyl/vinyl-component-blocks","commit_stats":null,"previous_names":["vinyl-davyl/vinyl-component-blocks"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vinyl-Davyl%2Fvinyl-component-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vinyl-Davyl%2Fvinyl-component-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vinyl-Davyl%2Fvinyl-component-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vinyl-Davyl%2Fvinyl-component-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Vinyl-Davyl","download_url":"https://codeload.github.com/Vinyl-Davyl/vinyl-component-blocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250460471,"owners_count":21434253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","authorization","component-library","components","components-library","design","design-system","library","typescript","ui","ui-components","ui-library"],"created_at":"2024-11-10T08:13:54.730Z","updated_at":"2025-04-23T15:31:47.304Z","avatar_url":"https://github.com/Vinyl-Davyl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vinyl-component-blocks\"\u003e\n     \u003cimg src=\"./src/assets/vc-logo.png\" alt=\"VC logo\" width=\"100\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eVinyl Component Blocks ⚡️\u003c/h1\u003e\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"Bundle Size (Brotli)\" src=\"https://badgen.net/bundlephobia/brotli/@vinyl-component-blocks?color=blue\"\u003e\n\u003cimg alt=\"Version\" src=\"https://img.shields.io/badge/version-1.1.7-orange.svg?cacheSeconds=2592000\" /\u003e\n  \u003cimg alt=\"License\" src=\"https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat\"\u003e\n\u003cimg alt=\"Code Coverage\" src=\"https://img.shields.io/coveralls/Vinyl-Davyl/vinyl-component-blocks?style=flat\u0026color=lightblue\"\u003e\n\u003ca href=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/blob/main/CONTRIBUTING.md\"\u003e\n  \u003cimg alt=\"Contribution Guidelines\" src=\"https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://vinyldavyl.xyz\"\u003e\n  \u003cimg alt=\"Website\" src=\"https://img.shields.io/badge/Author-vinyldavyl.xyz-brightgreen.svg?style=flat\"\u003e\n\u003c/a\u003e\n\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n   Vinyl Component Blocks is a UI component library designed to help you quickly build beautiful and functional user interfaces for your web applications. This library provides a collection of reusable and customizable React components that cover a wide range of UI elements.\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n## Introduction\n\nOffering a set of commonly used components that are designed to be easy to use, highly customizable, and visually appealing. Whether you're building a simple login form, a complex dashboard interface or seeking inspiration while building components in your development process, Vinyl Component(VC) Blocks has the basic components you need to create a polished user experience.\n\n\u003cbr /\u003e\n\n## Installation and Setup 🧱\n\nYou can install Vinyl Component Blocks via npm or yarn:\n\n```bash\nnpm install vinyl-component-blocks\n```\n\nor\n\n```bash\nyarn add vinyl-component-blocks\n```\n\n## Usage\n\nOnce installed, you can import the components you need from Vinyl Component Blocks and use them in your React application:\n\n```jsx\nimport React from \"react\";\nimport {\n  Button,\n  FormControl,\n  Link,\n  Search,\n  Select,\n  Skeleton,\n  Spinner,\n  TextInput,\n  Typography,\n  Avatar,\n  Card,\n  Modal,\n  Header,\n} from \"vinyl-component-blocks\";\n```\n\n### Demo Example Combining Components\n\n```jsx\nimport React from \"react\";\nimport { Button, Card, Avatar } from \"vinyl-component-blocks\";\n\nconst DemoComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cCard backgroundColor=\"#f0f0f0\" padding=\"20px\"\u003e\n      \u003cAvatar imageSrc=\"https://example.com/avatar.jpg\" /\u003e\n      \u003ch2\u003eJohn Doe\u003c/h2\u003e\n      \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit.\u003c/p\u003e\n      \u003cButton type=\"primary\" size=\"medium\"\u003e\n        Read More\n      \u003c/Button\u003e\n    \u003c/Card\u003e\n  \u003c/div\u003e\n);\n\nexport default DemoComponent;\n```\n\n\u003cbr /\u003e\n\n- Providing a hands-on experience with the Vinyl Component Blocks library, showcasing the versatility and functionality of each component. Key components here include the `Header` and `Login` UI components.\n\n\u003cbr /\u003e\n\n```jsx\nimport React from \"react\";\nimport { Button, Card, Avatar, Header, Login } from \"vinyl-component-blocks\";\n\nconst DemoComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cHeader\n      user={{ name: \"John Doe\" }}\n      onLogout={() =\u003e console.log(\"Logged out\")}\n    /\u003e\n    \u003cCard backgroundColor=\"#f0f0f0\" padding=\"20px\"\u003e\n      \u003cAvatar imageSrc=\"https://example.com/avatar.jpg\" /\u003e\n      \u003ch2\u003eJohn Doe\u003c/h2\u003e\n      \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit.\u003c/p\u003e\n      \u003cButton type=\"primary\" size=\"medium\"\u003e\n        Read More\n      \u003c/Button\u003e\n    \u003c/Card\u003e\n    \u003cLogin\n      onLogin={() =\u003e console.log(\"Logged in\")}\n      onCreateAccount={() =\u003e console.log(\"Creating account\")}\n    /\u003e\n  \u003c/div\u003e\n);\n\nexport default DemoComponent;\n```\n\n## Components\n\n### Button\n\n| Prop      | Type        | Description                                                 |\n| --------- | ----------- | ----------------------------------------------------------- |\n| type      | string      | Button type (`default`, `danger`, `ghost`, `secondary` )    |\n| size      | string      | Button size (`default`, `large`, `small`)                   |\n| disabled  | boolean     | Disable button                                              |\n| onClick   | function    | Click event handler                                         |\n| children  | ReactNode   | Button content                                              |\n| icon      | ElementType | Icon component to display alongside the button text         |\n| className | string      | Additional CSS classes for styling                          |\n| loading   | boolean     | Specify whether the button should display a loading spinner |\n| href      | string      | URL for the button if it should act as a link               |\n| as        | ElementType | HTML element type for the button                            |\n| to        | string      | Destination path for the link if using the 'as' prop        |\n| ...rest   | any         | Additional props for customization                          |\n\n\u003cimg width=\"703\" alt=\"Screenshot 2024-05-04 051425\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/be915362-55ee-4f06-a75c-3bf86565c887\"\u003e\n\u003cimg width=\"709\" alt=\"Screenshot 2024-05-04 051538\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/ebbe903a-0e8c-4220-8cb9-7b5ca086567b\"\u003e\n\n### FormControl\n\n| Prop       | Type      | Description                        |\n| ---------- | --------- | ---------------------------------- |\n| label      | string    | Label for the form control         |\n| htmlFor    | string    | ID of the form control element     |\n| error      | string    | Error message to display           |\n| hint       | string    | Hint message to display            |\n| disabled   | boolean   | Disable the form control           |\n| className  | string    | Additional CSS classes for styling |\n| children   | ReactNode | Form control element               |\n| onBlur     | function  | Blur event handler                 |\n| onFocus    | function  | Focus event handler                |\n| forceLabel | boolean   | Force label to always show         |\n| ...rest    | any       | Additional props for customization |\n\n\u003cimg width=\"713\" alt=\"Screenshot 2024-05-04 051640\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/b09bd284-de4e-400f-9360-ac62b406cc34\"\u003e\n\u003cimg width=\"711\" alt=\"Screenshot 2024-05-04 051657\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/f2ddf69b-badd-4fa5-aea0-bd728c6552e4\"\u003e\n\n### Link\n\n| Prop      | Type        | Description                        |\n| --------- | ----------- | ---------------------------------- |\n| disabled  | boolean     | Disable the link                   |\n| className | string      | Additional CSS classes for styling |\n| children  | ReactNode   | Link text                          |\n| as        | ElementType | HTML element type (default is `a`) |\n| href      | string      | Link URL                           |\n| ...rest   | any         | Additional props for customization |\n\n\u003cimg width=\"709\" alt=\"Screenshot 2024-05-04 051835\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/31425da4-2bf0-4dfd-bd08-ca0b75609880\"\u003e\n\n### Search\n\n| Prop        | Type          | Description                                            |\n| ----------- | ------------- | ------------------------------------------------------ |\n| className   | string        | Additional CSS classes for styling                     |\n| size        | ComponentSize | Size of the search input (`default`, `small`, `large`) |\n| width       | string        | Width of the search input                              |\n| value       | string        | Current value of the search input                      |\n| onChange    | function      | Change event handler for the search input              |\n| placeholder | string        | Placeholder text for the search input                  |\n\n\u003cimg width=\"726\" alt=\"Screenshot 2024-05-04 052414\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/3091d9b3-faa6-43e6-82a1-328156445fbc\"\u003e\n\n### Select\n\n| Prop        | Type           | Description                                            |\n| ----------- | -------------- | ------------------------------------------------------ |\n| className   | string         | Additional CSS classes for styling                     |\n| size        | ComponentSize  | Size of the select input (`default`, `small`, `large`) |\n| disabled    | boolean        | Disable the select input                               |\n| error       | boolean        | Indicate error state                                   |\n| width       | string         | Width of the select input                              |\n| option      | SelectOption   | Selected option                                        |\n| listOptions | SelectOption[] | Array of options for the select input                  |\n| onChange    | function       | Change event handler for the select input              |\n| placeholder | string         | Placeholder text for the select input                  |\n\n\u003cimg width=\"713\" alt=\"Screenshot 2024-05-04 052459\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/de72ccae-e20a-48cf-8c95-c81c7672a179\"\u003e\n\u003cimg width=\"722\" alt=\"Screenshot 2024-05-04 051719\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/b835337c-6ca1-4c79-a9ca-f697c0de89a5\"\u003e\n\u003cimg width=\"718\" alt=\"Screenshot 2024-05-04 052626\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/5bcfbb59-267d-46ed-89a5-9873e66ff2b1\"\u003e\n\u003cimg width=\"528\" alt=\"Screenshot 2024-05-04 052525\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/00b5275d-c3b6-4e2b-bf1a-27cda16c3244\"\u003e\n\n### Skeleton\n\n| Prop         | Type   | Description                           |\n| ------------ | ------ | ------------------------------------- |\n| width        | number | Width of the skeleton element         |\n| height       | number | Height of the skeleton element        |\n| className    | string | Additional CSS classes for styling    |\n| borderRadius | string | Border radius of the skeleton element |\n\n\u003cimg width=\"714\" alt=\"Screenshot 2024-05-04 052700\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/5064b769-8ce0-4a1f-b3be-edee01aee7a6\"\u003e\n\n### Spinner\n\n| Prop      | Type    | Description                        |\n| --------- | ------- | ---------------------------------- |\n| size      | number  | Size of the spinner                |\n| className | string  | Additional CSS classes for styling |\n| light     | boolean | Use light spinner variant          |\n\n\u003cimg width=\"714\" alt=\"Screenshot 2024-05-04 052722\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/ddadcf1e-3938-48b0-b1dd-df2047827130\"\u003e\n\n### TextInput\n\n| Prop        | Type          | Description                                     |\n| ----------- | ------------- | ----------------------------------------------- |\n| icon        | ElementType   | Icon component to display                       |\n| size        | ComponentSize | Size of the input (`default`, `small`, `large`) |\n| disabled    | boolean       | Disable the input                               |\n| error       | boolean       | Indicate error state                            |\n| value       | string        | Current value of the input                      |\n| onChange    | function      | Change event handler for the input              |\n| placeholder | string        | Placeholder text for the input                  |\n| width       | string        | Width of the input                              |\n| readonly    | boolean       | Make the input read-only                        |\n| clearable   | boolean       | Allow clearing the input                        |\n| ...rest     | any           | Additional props for customization              |\n\n\u003cimg width=\"709\" alt=\"Screenshot 2024-05-04 052741\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/b5ec0064-62a6-4289-9be9-efbe3e246123\"\u003e\n\u003cimg width=\"709\" alt=\"Screenshot 2024-05-04 052835\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/101bc450-70c2-45d1-a820-7728a8b18c4d\"\u003e\n\u003cimg width=\"712\" alt=\"Screenshot 2024-05-04 052811\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/68a934ae-6ae6-4f2f-bc74-0a42630b5a01\"\u003e\n\n### Typography\n\n| Prop      | Type      | Description                                |\n| --------- | --------- | ------------------------------------------ |\n| variant   | string    | Typography variant (`h1`, `h2`, `h3`)      |\n| align     | string    | Text alignment (`center`, `right`, `left`) |\n| className | string    | Additional CSS classes for styling         |\n| children  | ReactNode | Text content                               |\n\n\u003cimg width=\"709\" alt=\"Screenshot 2024-05-04 052916\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/be9e6ff4-d72c-4a76-8442-a829efbe269c\"\u003e\n\n### Avatar\n\n| Prop     | Type   | Description                     |\n| -------- | ------ | ------------------------------- |\n| imageSrc | string | Source URL for the avatar image |\n\n\u003cimg width=\"710\" alt=\"Screenshot 2024-05-04 051356\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/14f46b64-06af-4660-b73f-39d0fa412fa2\"\u003e\n\n### Card\n\n| Prop            | Type      | Description                                |\n| --------------- | --------- | ------------------------------------------ |\n| backgroundColor | string    | Background color of the card               |\n| children        | ReactNode | Content to be displayed within the card    |\n| padding         | string    | Padding around the content inside the card |\n\n\u003cimg width=\"708\" alt=\"Screenshot 2024-05-04 051605\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/0627a6fa-ab8b-4a44-bc97-106bf3c780dd\"\u003e\n\n### Modal\n\n| Prop     | Type      | Description                              |\n| -------- | --------- | ---------------------------------------- |\n| children | ReactNode | Content to be displayed within the modal |\n\n\u003cimg width=\"721\" alt=\"Screenshot 2024-05-04 052356\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/c01646a2-ef8d-47b0-b939-98a2a887184a\"\u003e\n\n### Header\n\n| Prop            | Type     | Description                             |\n| --------------- | -------- | --------------------------------------- |\n| user            | User     | User object                             |\n| onLogin         | function | Event handler for login action          |\n| onLogout        | function | Event handler for logout action         |\n| onCreateAccount | function | Event handler for create account action |\n\n\u003cimg width=\"708\" alt=\"Screenshot 2024-05-04 051800\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/558a31c9-9c15-453e-b565-b02c574eef88\"\u003e\n\u003cimg width=\"724\" alt=\"Screenshot 2024-05-04 051817\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/0302e7b3-78d0-4b8a-b906-36526d864432\"\u003e\n\n### Login\n\n| Prop          | Type     | Description                              |\n| ------------- | -------- | ---------------------------------------- |\n| onSubmit      | function | Event handler for form submission        |\n| initialValues | object   | Initial values for the form fields       |\n| loading       | boolean  | Specify whether to display loading state |\n| registerLink  | string   | Link for user registration               |\n\u003cimg width=\"699\" alt=\"Screenshot 2024-05-04 051925\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/e652d3f8-d2e3-464d-8712-9ead0549ba95\"\u003e\n\u003cimg width=\"708\" alt=\"Screenshot 2024-05-04 051949\" src=\"https://github.com/Vinyl-Davyl/vinyl-component-blocks/assets/68241801/0b82287e-fb57-4c2b-be86-6994d0a5794e\"\u003e\n\n\n\n## External Resources and Dependencies 🌐\n\nThe Vinyl Component Blocks library relies on the following external resources and dependencies:\n\n- **Styled Components**: Utilized for customizable styling of components. CSS-in-JS library.\n\n- **React**: Serves as the core of the Vinyl Component Blocks, providing the necessary infrastructure for building user interfaces in JavaScript.\n\n- **TypeScript**: Vinyl Component Blocks is super strictly typed. TypeScript as a strict syntactical superset of JavaScript adds static typing to the library. It enhances developer productivity and code quality.\n\n- **Email Validator**: Used for validating emails, for the input-component most specifically. Email Validator is a dependency that helps ensure that the entered email addresses conform to standard email format rules, enhancing the reliability and accuracy of user input validation.\n\n## Demo Examples 🛠️\n\n### Customizing TextInput Component\n\n```jsx\nimport React from \"react\";\nimport { TextInput } from \"vinyl-component-blocks\";\n\nconst CustomTextInput = () =\u003e (\n  \u003cTextInput\n    className=\"custom-text-input\"\n    icon={YourIconComponent}\n    size=\"large\"\n    disabled={false}\n    error={false}\n    value=\"Hello\"\n    onChange={(e) =\u003e console.log(e.target.value)}\n    placeholder=\"Enter text here\"\n    width=\"200px\"\n    readonly={false}\n    clearable={true}\n  /\u003e\n);\n\nexport default CustomTextInput;\n```\n\n### Demo Example, Simple Login UI\n\n```jsx\nimport React from \"react\";\nimport { Header, Login } from \"vinyl-component-blocks\";\n\nconst HeaderWithLogin = () =\u003e (\n  \u003cdiv\u003e\n    \u003cHeader\n      user={{ name: \"John Doe\" }}\n      onLogout={() =\u003e console.log(\"Logged out\")}\n    /\u003e\n    \u003cLogin\n      onLogin={() =\u003e console.log(\"Logged in\")}\n      onCreateAccount={() =\u003e console.log(\"Creating account\")}\n    /\u003e\n  \u003c/div\u003e\n);\n\nexport default HeaderWithLogin;\n```\n\n### Customizing Components with Custom CSS Styles ✨\n\nCustomizing components with custom CSS styles allows you to tailor the appearance of UI components to match the specific design requirements of your project. Applying custom CSS classes to components, you can override default styles and apply unique visual enhancements. This approach offers flexibility and control over the presentation of components.\n\n#### Customizing Card Component\n\n```jsx\nimport React from \"react\";\nimport { Card } from \"vinyl-component-blocks\";\nimport \"./custom-styles.css\";\n\nconst CustomCard = () =\u003e (\n  \u003cCard\n    backgroundColor=\"#f0f0f0\"\n    padding=\"20px\"\n    className=\"custom-card\" // Custom CSS class for styling\n  \u003e\n    \u003ch2\u003eThis is a Custom Card\u003c/h2\u003e\n    \u003cp\u003e\n      Stop reinventing the wheel! Our well-documented component library empowers\n      you to concentrate on building unique features and functionalities.\n    \u003c/p\u003e\n  \u003c/Card\u003e\n);\n\nexport default CustomCard;\n```\n\n#### Customizing TextInput Component\n\n```jsx\nimport React from \"react\";\nimport { TextInput } from \"vinyl-component-blocks\";\nimport \"./custom-styles.css\";\n\nconst CustomTextInput = () =\u003e (\n  \u003cTextInput\n    className=\"custom-text-input\" // Custom CSS class for styling\n    icon={YourIconComponent}\n    size=\"large\"\n    disabled={false}\n    error={false}\n    value=\"Hello\"\n    onChange={(e) =\u003e console.log(e.target.value)}\n    placeholder=\"Enter text here\"\n    width=\"200px\"\n    readonly={false}\n    clearable={true}\n  /\u003e\n);\n\nexport default CustomTextInput;\n```\n\nIn the `custom-styles.css` file:\n\n```css\n/* custom-styles.css */\n.custom-card {\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n  border-radius: 12px;\n}\n\n.custom-text-input {\n  border: 2px solid #cccccc;\n  border-radius: 8px;\n}\n```\n\n## Contributing\n\n### Adding New Components\n\nContributions from developers who feel the need to expand the library with new components or features. Whether you've identified a potential component, have an idea for a new feature, or want to enhance existing functionality, your contributions are valuable to the community.\n\nIf you find something that piques your interest or if the project has inspired you, feel free to contribute by submitting pull requests(PRs). Your contributions help improve the library for everyone. Don't forget to leave a star ⭐ on GitHub to show your support!\n\n## Conclusion\n\nVinyl Component Blocks offers a comprehensive collection of UI components that are easy to use and highly customizable. Say goodbye to design inconsistencies.\n\nSo, stop reinventing the wheel! Our well-documented component library empowers you to create, clone and build unique component features and functionalities to your taste.\n\nStop repeating work! Install, call, use, modify.\n`npm install vinyl-component-blocks`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinyl-davyl%2Fvinyl-component-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinyl-davyl%2Fvinyl-component-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinyl-davyl%2Fvinyl-component-blocks/lists"}