Welcome to FancyUI (FUI), a state-of-the-art UI library meticulously crafted for React and Next.js projects. While currently under active development, FUI is dedicated to providing a sleek, modern, and highly customizable set of components. Built with TypeScript and Styled Components, FUI is designed to integrate seamlessly and offer a rich set of functionalities to elevate your application's user interface.
FUI is currently a masterpiece in the making. Our team is working diligently to ensure that every component, feature, and line of code meets the highest standards of quality and innovation. While we're putting in the hours to make FUI really, really fancy, we appreciate your patience and excitement for the upcoming release.
Important: FUI is currently undergoing a major architectural migration from Styled Components to Tailwind CSS. This migration brings improved performance, smaller bundle sizes, and better developer experience while maintaining full design system compatibility.
📋 For detailed migration information, see: MIGRATION-TAILWIND.md
What this means for you:
- New components will use Tailwind CSS with "Tw" suffix (e.g.,
FancyBoxTw) - Existing components continue to work unchanged during transition
- Full feature parity maintained between styled-components and Tailwind versions
- Design system remains identical - same colors, spacing, typography, and patterns
- Zero breaking changes for current implementations
Current Migration Status:
- ✅ Core Tailwind configuration and theme system
- ✅ Migration utilities and bridge functions
- ✅ First component:
FancyBoxTwwith size settings - 🔄 Ongoing: Component-by-component migration
- 📋 Planned: Complete styled-components deprecation path
- StoryBook: https://fui.cool/
- Discord: https://discord.gg/HEXMuxq29M
- NPM: https://www.npmjs.com/package/fui-fancyui
Discover in Storybook: FancyUI's Storybook is your essential resource for diving into our UI library. It offers:
- Live Component Demos: Experiment with components in real-time to understand their flexibility.
- Setup Guidance: Detailed instructions for tailoring FancyUI to your project's needs.
- Customization Tips: Learn to customize the look and feel using Styled Components.
- Usage Best Practices: Elevate your UI with our design and performance tips.
For a detailed exploration, visit FancyUI Storybook. Whether you're integrating components or seeking design inspiration, our Storybook has everything you need for a seamless experience.
- Comprehensive Documentation: Each component in FUI is being meticulously documented in our Storybook. Upon release, you'll be able to dive into the details of each component and see how they can fit into your project.
- React & Next.js Compatibility: FUI is being crafted with ReactTS and Styled Components, making it the perfect companion for projects leveraging the React and Next.js ecosystems.
- Atomic Design Principles: We're building FUI with atomic design principles, ensuring you can mix, match, and customize components to fit your unique design needs, all while ensuring consistency and scalability.
-
Explore the Storybook:
- Once released, run
npm run storybookto launch the Storybook interface. - Discover how to set up and utilize FUI components in your project.
- Browse through interactive examples and detailed documentation.
- Once released, run
-
Developer Guide:
- Fork & Clone: Fork the FUI repository and clone it locally.
- Branch Out: Create a branch for your feature or fix.
- Develop: Make your changes, adhering to project standards.
- Test: Run
npm run predeployto ensure quality. - Pull Request: Submit a PR with your improvements.
For a detailed guide on contributing to FancyUI, check out our Complete Developer Guide.
We appreciate your interest and patience as we craft FancyUI to be not just fancy, but really, really fancy. Your anticipation and potential contributions are what drive us to deliver a product that we can all be proud of. So, thank you for standing by as we put in the work to make FancyUI a groundbreaking UI library!