\n\n# @artstorefronts/ui\n\nA collection of customizable React components built with TypeScript, Tailwind CSS, and Storybook. The components have been designed to be lightweight and easy to integrate into React projects.\n\n## Requirements\n\nBefore installing and using this library, ensure that your project meets the following requirements:\n\n- React: Version 19.1.2 or higher\n- Tailwind CSS: Version 3.0 or higher\n- Framer Motion: Version 11.0 or higher\n\n## Installation\n\nTo install the library, use npm or yarn:\n\n```bash\n# Using npm\nnpm install @artstorefronts/ui framer-motion\n\n# Using yarn\nyarn add @artstorefronts/ui framer-motion\n```\n\n## Import CSS\n\nAdd the following import to your project (usually in index.tsx or App.tsx):\n\n```\nimport '@artstorefronts/ui/dist/index.css';\n```\n\n### Install Tailwind CSS\n\nYou must also have Tailwind CSS installed in your project. If you don't have it yet, you can install it by following these [these instructions](https://tailwindcss.com/docs/installation).\n\n## Usage\n\nOnce the library is installed, you can start using the components in your project. Here's an example of how to use a component:\n\n```javascript\nimport { Button } from \"@artstorefronts/ui\";\n\nconst App = () => (\n
\n \n
\n);\n\nexport default App;\n```\n\n## Components\n\n- **Accordion**\n - A vertically stacked set of interactive headings that each reveal a section of content.\n- **Alert**\n - Displays a callout for user attention.\n- **Alert Dialog**\n - A modal dialog that interrupts the user with important content and expects a response.\n- **Aspect Ratio**\n - Displays content within a desired ratio.\n- **Avatar**\n - An image element with a fallback for representing the user.\n- **Badge**\n - A visual indicator for counting or labeling items.\n- **Button**\n - An interactive element that triggers a specific action when clicked.\n- **Calendar**\n - A date picker component to select a single or range of dates.\n- **Card**\n - A flexible content container with multiple layouts and variations.\n- **Checkbox**\n - A square box that can be checked or unchecked to represent a binary option.\n- **Collapsible**\n - A container that can show or hide its content when clicked.\n- **Command**\n - A text-based command palette that helps users perform actions quickly.\n- **Context Menu**\n - A floating menu triggered by a right-click that provides additional options.\n- **Dialog**\n - A modal window that overlays on top of the main content, usually for user interaction.\n- **Dropdown Menu**\n - A toggleable menu that provides a list of options.\n- **Form**\n - A set of controls to collect and validate user input.\n- **Hover Card**\n - A floating card that appears when hovering over an element.\n- **Input**\n - A field for users to enter text.\n- **Label**\n - A text label that provides context for a form control.\n- **Menubar**\n - A horizontal menu of items that appear on the top of an application.\n- **Navigation Menu**\n - A vertical or horizontal menu to navigate through sections of an application.\n- **Popover**\n - A floating card that appears when a user interacts with an element, usually containing more information or options.\n- **Progress**\n - A visual representation of a task's progress.\n- **Radio Group**\n - A set of related radio buttons, where only one option can be selected at a time.\n- **Rating**\n - A clickable star rating component for selecting and displaying ratings from 1 to 5.\n- **Scroll Area**\n - A container that allows content to be scrollable if it exceeds the visible area.\n- **Select**\n - A dropdown list of options where the user can select one.\n- **Separator**\n - A horizontal or vertical line that groups or separates content.\n- **Sheet**\n - A modal-like component that slides from the side of the screen, used for menus or sidebars.\n- **Skeleton**\n - A placeholder that mimics the shape of the content that is loading.\n- **Slider**\n - A control for selecting a value by sliding a handle along a track.\n- **Switch**\n - A toggle switch that allows the user to choose between two states.\n- **Table**\n - A grid of rows and columns to display data.\n- **Tabs**\n - A set of layered sections of content, each associated with a tab.\n- **Textarea**\n - A multi-line text input field.\n- **Toast**\n - A brief message that appears temporarily at the edge of the screen to inform the user.\n- **Toggle**\n - A button that can be switched between two states.\n- **Tooltip**\n - A floating label that briefly appears when a user hovers over or focuses on an element.\n\n## Customization\n\nThe components in this library are fully customizable through [Tailwind CSS](https://tailwindcss.com/docs) utility classes. You can also extend or override the default styles using your own Tailwind configuration.\n\n## Documentation\n\n### Storybook\n\nFor a live demonstration and interactive documentation of the components, check out our public [Storybook](https://art-storefronts.github.io/artstorefronts-ui).\n\n### Advanced Usage\n\nThe components are based on [Shadcn](https://ui.shadcn.com). For detailed documentation and usage examples of the original components, please visit the [Shadcn documentation](https://ui.shadcn.com/docs).\n\n## Development\n\n### Add new components\n\n1. Create a component in the `src/components/ui` directory\n - Name the component something like `component.tsx`\n2. Create a Storybook story in the `src/stories` directory\n - Name the story something like `component.stories.tsx`\n\n### Update existing components\n\n1. Modify the component\n2. Create/update existing Storybook stories to include the new functionality\n\n### Run Storybook\n\nTo run Storybook and view your new component:\n\n1. Run `yarn storybook`\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for more details.\n","readmeFilename":"README.md"}
![](\"docs/asf-logo.png\"){kind=logo}
![](\"https://i.imgur.com/p53fPWg.png\")