Ship internal tools in hours, not weeks. Real auth, users, jobs, audit logs, and cohesive UI included. Early access $249 $499 → [Get it now]

How to build a calendar in Angular

Building a custom calendar in Angular is a common requirement for applications involving scheduling, booking, or event management.
With over 25 years of experience in software development and as the creator of CoreUI, I’ve designed and implemented numerous calendar systems ranging from simple date pickers to complex resource schedulers.
The most efficient and modern approach involves leveraging TypeScript’s Date object to calculate month structures and using CSS Grid for a responsive, accessible layout.
While building from scratch is great for learning, for enterprise-grade applications, using a battle-tested library like CoreUI can save weeks of development time.

Read More…

How to build a Kanban board in Angular

Building a functional and performant Kanban board in Angular is a common requirement for project management and CRM applications. With over 25 years of experience in software development and as the creator of CoreUI, I have built dozens of drag-and-drop interfaces for enterprise-grade dashboards. The most efficient and modern solution is to leverage the @angular/cdk/drag-drop module, which handles the complex physics and accessibility of moving items between lists. By combining this with CoreUI components, you can create a board that is both highly functional and visually polished.

Read More…

How to build an e-commerce cart in Angular

Building a robust e-commerce cart is a fundamental requirement for any online storefront, yet managing state effectively across multiple components can often become complex. With over 25 years of experience in software development and as the creator of CoreUI, I have architected numerous enterprise-level e-commerce systems using Angular since its early versions. From my expertise, the most efficient and modern solution for Angular applications is to leverage a singleton service combined with Angular Signals for reactive state management. This approach ensures that your cart data is synchronized across the entire application without the overhead of heavy state management libraries.

Read More…

How to customize CoreUI theme in React

Customizing a UI framework to match your brand’s unique identity is a critical step in professional web development. With over 25 years of experience in software development and as the creator of CoreUI, I have designed our React components to be highly flexible and easy to theme. The most efficient and modern way to customize the CoreUI theme in React is by overriding Sass variables before compilation or using CSS custom properties (variables) for runtime adjustments. This approach ensures that your changes are consistent across all components while maintaining the performance and reliability of the library.

Read More…

How to extend CoreUI components in React

Extending components is a fundamental requirement when building a consistent design system or a large-scale enterprise application. With over 25 years of experience in software development and as the creator of CoreUI, I’ve designed our React components to be inherently flexible and easy to wrap. The most efficient and modern solution to extend CoreUI components is to use the “Wrapper Pattern,” which involves creating a custom functional component that spreads its props onto the underlying CoreUI primitive. This approach ensures you maintain full access to the original API while adding your own custom styles, default behaviors, or business logic.

Read More…

How to integrate CoreUI with React for enterprise apps

Building enterprise-level applications requires a robust architecture, consistent UI, and scalable components that can handle complex data flows. With over 25 years of experience in software development and as the creator of CoreUI, I have designed our React library specifically to meet these professional requirements. Since 2014, I have focused on refining React and Node.js ecosystems to ensure they meet the rigorous standards of corporate environments. Integrating CoreUI with React provides a battle-tested foundation that simplifies state management and UI consistency across large teams.

Read More…

How to use CoreUI Pro with React

Setting up a high-performance enterprise dashboard requires advanced components like Smart Tables and Multi-Selects that go beyond basic UI kits. As the creator of CoreUI and with over 25 years of software development experience, I’ve designed the Pro version to eliminate the overhead of building complex data-heavy interfaces from scratch. The most efficient and modern solution to use CoreUI Pro with React is to install the @coreui/react-pro package and integrate its enterprise-ready components into your project structure. This approach ensures you receive the latest updates and premium support directly through your standard development workflow.

Read More…

How to type forwardRef in React with TypeScript

Accessing a child component’s DOM node or instance is a frequent requirement in React development, yet doing so safely in TypeScript often leads to complex compiler errors.
With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented thousands of typed components that require precise ref handling for accessibility and animation.
The most efficient and modern way to solve this is by leveraging the React.forwardRef generic types, specifically React.forwardRef<T, P>.
This approach ensures that both your props and the forwarded ref are strictly typed, preventing runtime errors and providing a seamless developer experience in large-scale applications.

Read More…

How to build a dashboard in React

Building a dashboard in React requires a layout with a sidebar and header, lazy-loaded routes for each section, and data visualization components that load data asynchronously. As the creator of CoreUI — an open-source UI framework used by over 500,000 developers — I designed the React dashboard template architecture that powers thousands of production admin panels. The key pattern is a layout wrapper component that renders the sidebar, header, and a content area with <Outlet />, combined with React Router’s lazy() for code splitting. This ensures the initial bundle is small and each dashboard section loads only when visited.

Read More…

How to build a notes app in Angular

A notes app combines CRUD operations, real-time search filtering, and rich text display in an intuitive interface that teaches essential Angular patterns. As the creator of CoreUI with Angular development experience since 2014, I use this project structure in CoreUI Angular templates as the starting point for more complex content management features. The architecture uses a reactive service with BehaviorSubject for state, the async pipe for memory-safe subscriptions, and combineLatest to derive the filtered list from both the notes array and the search query. This reactive approach avoids imperative subscription management and keeps the component template simple.

Read More…