Customizations

The Arts Oven UI Component Library provides various customization options across its components, allowing you to tailor them to fit your design needs. Below are common customization instructions that apply to all components in the library.

Customization Using CSS Variables

Many components support customization through CSS variables. You can override these variables in your CSS to achieve your desired styles.

Define CSS Variables

In your main CSS file or within a <style> tag, define the CSS variables you wish to customize. For example:

:root {
  --component-background-color: #f8f9fa; /* Default background color */
  --component-border-radius: 8px; /* Default border radius */
  --component-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Default shadow */
}

Apply CSS Variables to Components

Each component will typically use these variables in its styling. For example, you can apply the variables like this:

.component {
  background-color: var(--component-background-color);
  border-radius: var(--component-border-radius);
  box-shadow: var(--component-shadow);
}

Customization Using Tailwind CSS Utility Classes

You can also customize components using Tailwind CSS utility classes directly in your HTML. This allows for quick and responsive adjustments.

<div class="bg-gray-200 rounded-lg shadow-md p-4">
  <!-- Component content -->
</div>

Responsive Design Customization

To ensure your components look great on all devices, utilize Tailwind’s responsive utility classes:

<div class="bg-gray-200 rounded-lg p-4 md:p-6 lg:p-8">
  <!-- Component content -->
</div>

In this example, padding will adjust based on the screen size.

Conclusion

By leveraging CSS variables and Tailwind CSS utility classes, you can easily customize the appearance of components in the Arts Oven UI Component Library. This flexibility allows you to create visually appealing and responsive designs tailored to your specific requirements. For more detailed information on individual components and their customization options, refer to the respective component documentation pages.