Devlog 18

Changes

Final touches

I updated some stuff in the home page and all updated the link component a little bit, published v1.1.1 to npm cli package

Readme

Wrote a lot of stuff in my readme and gave details on how to use and things like that

Devlog 17

Changelog

New accordion component

This was the toughest so i needed the help of ol’ google for this component. Its a small title which expands into content when you click on it. A pretty simple component. not that bad

Devlog 16

Changes

New ‘switch’ component

I then created a toggle switch component it was a little tough bet then, once i used react’s useState function, it all came to work!

Devlog 15

Changelog

New component

So i created another component called ‘card’ Its a simple card that can show information. It also supports an action in the header like a button or link or anything!

Card docs

With this new docs system i just had to write a little bit of docs as i simplified the process

Devlog 14

Changes

Better docs system

After all of this i decided that it took too much time for me to create docs and almost everything was the same only the properties table and the code block was different so i created a new .ts file with all the data and made 1 single file to display all of them

Devlog 13

Changes

Input component!

So after the callout i decided to make my own text input component as i was so bored of the dumb default html input component. It looked disgusting. I struggled a little bit while styling it as i was also adding a small tweak and was allowing users to also show a lucide icon in the side.

Input docs

Then, as i was making the component i also went ahead and wrote the docs for it!

Devlog 12

Changes

New component: callout

I created a new component called ‘callout’. Just a small info box kind of thingy and added some color variants to it so you can choose between red, blue, green and yellow colors

Callout docs

Meanwhile i also followed my standard procedure and created the documentation for the callout component

Devlog 11

Changes

Components page and documentation page

I added some links to the components page and the documentation page leading to the specific component docs

Badge component!!

Then i created a whole new component called a ‘badge’ it kinda looks cool tbh

Devlog 10

Changes

More documentation

Created the documentation for the link and code block components

Codeblock ui

Made the window like ui be optional i.e, dispay the 3 dots on the top left corner optionally

Devlog 9

Changes

Reimagined codeblock

So i took inspiration from the code in my homepage and used the similar code to get a codeblock like that.

Button docs done!

Then i made a nice layout on the button docs page and it looks professional now!

Devlog 8:

Changes:

Documentation optimization

I tried my best to optimize the documentation structure but no matter what i did it was sooo tough and i had to go with the normal way. I now have to create a separate file for each component with its own docs.

Codeblock component

So when i was writing down docs for my button component i decided to display my own codeblock component with a copy button and function

Bugs and issues with the cli package

Meanwhile whn i was writing the code for the documentation for the button i realized that i needed to publish my cli code to npm! So i did that but the commands were not working. I debuggged and debugged until i found out that the error was that it was looking for a wrong file name. I fixed that and my code is officially now on npm heres the command for a button
npx modui-uikit@latest add button
same for the link and codeblock!

Ui fixes in the documentation page

I fixed some overflow stuff and all tailwind issues in the page

Devlog 7:

Changes

Documentation layout

I created a separate layout for the documentation page with the sidebar so that it appears on all /documentation/xyz pages. This was a lil crazy because even though i knew how it was supposed to work, some dumb css issue came up so i had to experiment through the fixes

Docs page

I made a page.tsx for the docs to appear and it was difficult because i wanted it to me automatic and i did not need to create pages and pages of documentation myself. So i did some trial and error on the page and tried to integrate the data from my components json file

The toughest thing i did : Preview

So the toughest thing i made was the preview component that shows the preview of my component. I tried many wasy to keep it optimized like i tried to keep one single component and do some stuff, but it did not work because each component needed their own parameters so i had to do it the recursive way by creating a component and rendering the individual components conditionally

Devlog 6

Changes

Sidebar population

So i wrote a script in my scripts folder that runs each time i run my project that reads the file names of the files in my /components folder and writers them down in a json file. Then in the sidebar, i wrore some lines to map and show all elements found in the json file!

Devlog 5

Changes:

Components page

I worked on the components page with a cool window like container to showcase the components i currently only have 2 components, but i need to find an efficient way to showcase the components because i cant manually keep adding them

Devlog 4

Changes:

Navbar setting:

i made the navbar as a separate component and then used that in the main layout so it is visible in all pages. This was done for easy work for me as i dont need to copy and paste the navbar code in all pages

Sidebar:

I worked a little bit on the /documentation page where i added a small sidebar with the components listed.

Devlog 3

Changelog

Link component

So i was working on the homepage when i realized that i had to actually link the buttons to some page so i as usual wanted to create my own component for that called It was surprising that i could actually get it right and i used it! The component works!

Devlog 2

Changes:

I worked a lot on the home page to showcase my components and…. I used me own button component in the homepage! It looks new and minimal I really liked it a lot it took a long time because im really good at that aesthetic ui stuff so yeah but it looks super cool.

I started by creating a simple button component with some variants, i just made it like that button from shadcn. But that is not the focus. The main aim of this project for me was to make a cli command that installs the component. So i used commander, chalk and fs-extra with the help of powerful google to come up with some script that creates a file with some code.