<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Debasish Sahoo</title>
    <description>The latest articles on Forem by Debasish Sahoo (@debasish_sahoo_06ec7a9333).</description>
    <link>https://forem.com/debasish_sahoo_06ec7a9333</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3878723%2F9895239e-5e76-4ff0-aa24-f0f49ff7f809.png</url>
      <title>Forem: Debasish Sahoo</title>
      <link>https://forem.com/debasish_sahoo_06ec7a9333</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/debasish_sahoo_06ec7a9333"/>
    <language>en</language>
    <item>
      <title>I built an Angular component library I always wished existed: install only what you need, with zero bloat.</title>
      <dc:creator>Debasish Sahoo</dc:creator>
      <pubDate>Tue, 14 Apr 2026 14:05:01 +0000</pubDate>
      <link>https://forem.com/debasish_sahoo_06ec7a9333/i-built-an-angular-component-library-i-always-wished-existed-install-only-what-you-need-with-zero-1k6n</link>
      <guid>https://forem.com/debasish_sahoo_06ec7a9333/i-built-an-angular-component-library-i-always-wished-existed-install-only-what-you-need-with-zero-1k6n</guid>
      <description>&lt;p&gt;Every Angular component library I've used made me install a massive package just to get a modal and a table. You pull in one thing and suddenly your bundle has 40 components you'll never touch, a design system you'll fight against, and CSS specificity wars that make you question your career choices.&lt;/p&gt;

&lt;p&gt;I always wanted a library where you just &lt;code&gt;npm install @bloc-ui/modal&lt;/code&gt; and get a modal. That's it. No peer dependencies dragging in the entire kitchen. No design opinions you didn't ask for. Just structure, behavior, and accessibility. You bring your own styles.&lt;/p&gt;

&lt;p&gt;So I built &lt;strong&gt;&lt;a href="https://ui.bloc-verse.com/" rel="noopener noreferrer"&gt;Bloc UI&lt;/a&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Every component is its own package or a secondary entry point. You install exactly what you use, nothing more. Tree-shaking actually works because there's nothing to shake. You never pulled it in to begin with.&lt;/p&gt;

&lt;p&gt;On the CSS side, every color goes through CSS custom properties with neutral grey fallbacks, so it works out of the box but you can skin it however you want. All visual styles sit inside &lt;code&gt;:where()&lt;/code&gt; + &lt;code&gt;@layer&lt;/code&gt; (zero specificity), so your classes, Tailwind utilities, or design tokens always win. No &lt;code&gt;!important&lt;/code&gt; hacks. Components inject their own CSS layer order at runtime, so there's no config on your end. Just install and import.&lt;/p&gt;

&lt;p&gt;Checkbox, toggle, radio, date picker, and autocomplete all implement &lt;code&gt;ControlValueAccessor&lt;/code&gt;. Works with Tailwind v4.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What's in (20+ components):&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Stable: Button, Checkbox, Input, Radio, Spinner, Toggle, Modal, Table, Toast, Date Picker, Tabs, Tooltip, Alert, Autocomplete, Virtual Scroll, Accordion, Pagination, Select, Slider, Badge, Progress, Skeleton, Textarea, Text Highlight&lt;/p&gt;

&lt;p&gt;Experimental: Layout, Video Player&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Install:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# All-in-one&lt;/span&gt;
npm &lt;span class="nb"&gt;install&lt;/span&gt; @bloc-ui/kit

&lt;span class="c"&gt;# Or pick what you need&lt;/span&gt;
npm &lt;span class="nb"&gt;install&lt;/span&gt; @bloc-ui/core @bloc-ui/modal @bloc-ui/table
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Live docs &amp;amp; demos: &lt;a href="https://ui.bloc-verse.com/" rel="noopener noreferrer"&gt;https://ui.bloc-verse.com/&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;GitHub: &lt;a href="https://github.com/debasish1996/BLOC-UI" rel="noopener noreferrer"&gt;https://github.com/debasish1996/BLOC-UI&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Try it in StackBlitz: &lt;a href="https://stackblitz.com/github/debasish1996/BLOC-UI" rel="noopener noreferrer"&gt;https://stackblitz.com/github/debasish1996/BLOC-UI&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;npm: &lt;a href="https://www.npmjs.com/package/@bloc-ui/kit" rel="noopener noreferrer"&gt;https://www.npmjs.com/package/@bloc-ui/kit&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;MIT licensed, solo-maintained. If this is the kind of thing you've been looking for too, a star on GitHub would really mean a lot.&lt;/p&gt;

&lt;p&gt;Would love to hear your thoughts, especially around the API design and what components you'd like to see next.&lt;/p&gt;

</description>
      <category>angular</category>
      <category>opensource</category>
      <category>webdev</category>
      <category>tailwindcss</category>
    </item>
  </channel>
</rss>
