A beautiful collection of animated React components and design elements built with TypeScript. Perfect for adding stunning visual elements to your web applications.
Inspired by xamini.io - Bringing beautiful designs to the open source community ✨
Dazzling Designs was born from a passion to make beautiful, professional design components accessible to every developer, completely free. Inspired by the stunning work at xamini.io, we believe that great design should be available to everyone, regardless of budget or resources.
We're building a community-driven library where developers can:
- 🎨 Access beautiful, production-ready components for free
- 🤝 Contribute their own designs to help others
- 🌟 Inspire and be inspired by the community
- 🚀 Build amazing applications without design constraints
Because we believe in the power of collaboration and community. When developers share their designs, everyone wins. Your next project could inspire someone else's breakthrough, and their contribution might be exactly what you need for your next feature.
Together, we're stronger than any individual designer or company.
- 🎨 Beautiful Animations: Smooth, eye-catching animations that enhance user experience
- 🎯 TypeScript Support: Full TypeScript support for better development experience
- 📱 Responsive Design: Mobile-first approach with scalable components
- 🎨 Multiple Color Schemes: Pre-built color palettes for different themes
- 📚 Storybook Integration: Interactive documentation and component playground
- 🚀 Production Ready: Optimized builds with Rollup bundling
An animated network visualization component with floating nodes and connection lines.
import { NetworkNodes } from 'dazzling-designs';
<NetworkNodes
size={500}
palette="ocean"
/>Props:
size: Component size in pixels (default: 500)palette: Color scheme ('default', 'dark', 'light', 'ocean', 'sunset', 'forest')className: Custom CSS classstyle: Custom inline styles
A beautiful PC visualization component that displays content in a browser-like interface.
import { PC } from 'dazzling-designs';
<PC
size={500}
palette="dark"
showDefaultContent={true}
>
{/* Custom content here */}
</PC>Props:
size: Component size in pixels (280-800, default: 320)palette: Color scheme ('default', 'dark', 'light', 'ocean', 'sunset', 'forest')showDefaultContent: Show built-in code example (default: true)children: Custom content to display in the browser windowclassName: Custom CSS classstyle: Custom inline styles
npm install dazzling-designsimport React from 'react';
import { NetworkNodes, PC } from 'dazzling-designs';
function App() {
return (
<div>
<h1>My Awesome App</h1>
{/* Network visualization */}
<NetworkNodes size={400} palette="ocean" />
{/* PC with custom content */}
<PC size={500} palette="dark" showDefaultContent={false}>
<div>Hello, World! 🌍</div>
</PC>
</div>
);
}- default: Modern blue and green theme
- dark: Dark mode with white accents
- light: Light mode with dark accents
- ocean: Deep ocean blues
- sunset: Warm reds, oranges, and yellows
- forest: Natural greens and browns
- default: Classic black and white
- dark: White PC with dark accents
- light: Black PC with light accents
- ocean: Deep blue ocean theme
- sunset: Warm sunset colors
- forest: Natural forest theme
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/yourusername/dazzling-designs.git
cd dazzling-designs
# Install dependencies
npm install
# Start development server
npm run storybook
# Build the library
npm run build
# Run tests
npm testdazzling-designs/
├── src/
│ ├── components/
│ │ ├── NetworkNodes/
│ │ │ ├── NetworkNodes.tsx
│ │ │ ├── NetworkNodes.css
│ │ │ ├── NetworkNodes.stories.tsx
│ │ │ └── colorSchemes.ts
│ │ └── PC/
│ │ ├── PC.tsx
│ │ ├── PC.css
│ │ ├── PC.stories.tsx
│ │ └── colorSchemes.ts
│ ├── types/
│ └── index.ts
├── storybook-static/
├── dist/
└── package.json
View all components and their variations in our interactive Storybook:
npm run storybookVisit http://localhost:6006 to explore components, test different props, and see live examples.
- Connect Repository: Link your GitHub repository to Digital Ocean App Platform
- Build Command:
npm run deploy - Run Command:
nginx -g 'daemon off;' - Output Directory:
/usr/share/nginx/html
# Build the image
docker build -t dazzling-designs .
# Run the container
docker run -p 8080:80 dazzling-designs# Build for production
npm run deploy
# Deploy dist/ and storybook-static/ to your web serverWe believe every developer has something beautiful to share! Whether you're a design expert or just getting started, your contributions make this library better for everyone.
- New Components: Share your unique design creations
- Color Schemes: Add new themes and palettes
- Animations: Create smooth, engaging interactions
- Documentation: Help others understand and use the library
- Bug Fixes: Improve reliability and performance
- Ideas: Suggest new features or improvements
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Design your component with love and attention to detail
- Test thoroughly to ensure it works for everyone
- Document your creation with clear examples
- Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request and share your story!
- Design with Heart: Create components you'd be proud to use
- Think of Others: Ensure your designs are accessible and responsive
- Follow Standards: Use TypeScript best practices and existing patterns
- Test Everything: Add comprehensive tests and Storybook stories
- Document Clearly: Help others understand and use your creation
- Be Kind: Respect and encourage fellow contributors
- Share Knowledge: Help others learn and grow
- Celebrate Success: Recognize and appreciate great contributions
- Stay Inspired: Draw inspiration from the community around you
This project is licensed under the MIT License - see the LICENSE file for details.
Every component in this library represents someone's creativity, passion, and willingness to share. When you use Dazzling Designs, you're not just getting beautiful components—you're becoming part of a movement that believes great design should be accessible to everyone.
We're building more than a component library—we're building a community of creators who believe in:
- Collaboration over competition: When we work together, everyone wins
- Sharing over hoarding: Your designs can inspire thousands of developers
- Community over individualism: We're stronger together than apart
- Creativity over constraints: Break free from design limitations
Every contributor has a story. Maybe you're:
- A designer who wants to give back to the developer community
- A developer who discovered a beautiful way to solve a problem
- Someone who believes great design shouldn't cost money
- A creator who wants to inspire others
Whatever your story, we want to hear it. Share your designs, share your journey, and help us build something amazing together.
- Inspired by: xamini.io - Thank you for showing us what's possible
- Built with: React - The foundation of our components
- Styled with: CSS - Bringing beauty to life
- Bundled with: Rollup - Making it all work together
- Documented with: Storybook - Sharing our creations
- Tested with: Jest - Ensuring quality for everyone
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: your.email@example.com
You have the power to make the web more beautiful. Every component you create, every design you share, every contribution you make—it all adds up to something incredible.
- Install the library:
npm install dazzling-designs - Explore the components: Check out our Storybook
- Create something beautiful: Use our components in your projects
- Share your designs: Contribute back to the community
- Inspire others: Show the world what's possible
Great design shouldn't be locked behind paywalls or company walls. It should be free, accessible, and available to every developer who wants to create something beautiful.
Together, we're building a future where amazing design is available to everyone. Join us in making the web a more beautiful, more inspiring place.
Made with ❤️ by the Dazzling Designs team and inspired by the amazing work at xamini.io
Let's create something dazzling together! ✨