Flexoki Shadcn UI

Integrate Flexoki Colors with Shadcn/UI Components

This project provides a straightforward way to apply the acclaimed Flexoki color scheme to your shadcn/ui components. It offers predefined CSS variables for both light and dark modes, ensuring a cohesive and visually appealing design across your application. Enhance your UI with this meticulously crafted color palette, designed for clarity and aesthetic harmony, and easily integrate it into your Tailwind CSS configuration for seamless theming of common UI elements.

Features:

• Light Mode Color Palette: Comprehensive CSS custom properties (--background, --foreground, --card, etc.) for a Flexoki-based light theme.
• Dark Mode Color Palette: Dedicated CSS custom properties under the .dark class for a Flexoki-based dark theme.
• Core Component Theming: Variables cover essential UI states like primary, secondary, destructive, accent, and muted colors.
• Interactive Element Styling: Defines colors for borders (--border), input fields (--input), and focus rings (--ring).
• Extended Semantic Colors: Includes primary and secondary HSL variables for red, orange, yellow, green, cyan, blue, purple, and magenta (e.g., --red-primary, --red-secondary).
• Tailwind CSS Integration: Demonstrates how to extend Tailwind's color palette using the defined HSL CSS variables for easy class-based application.
• Global Border Radius: Specifies a default border radius variable (--radius: 0.5rem) for consistent rounded corners.

Summary:

Apply the elegant Flexoki color scheme to your shadcn/ui projects with this set of CSS variables and Tailwind CSS configuration. It simplifies theming for both light and dark modes by providing a full suite of color definitions for standard UI components and an extended color palette. This enables developers to quickly achieve a polished and consistent look and feel, leveraging the strengths of both Flexoki and shadcn/ui for their applications.