Meet our beautiful web documentation.
# PSW-UI > Build your components in isolation **There are a lot of component libraries out there, but why it install so many things?** ## Introduction > Beautifully designed, easily copy & pastable, fully customizable - that means it only depends on few dependencies. This is **UI kit**, a collection of re-usable components that you can copy and paste into your apps. This UI kit is inspired by [shadcn/ui](https://ui.shadcn.com/) - but it is more customizable. **More customizable?** shadcn/ui depends on a lot of packages to provide functionality to its components. Radix UI, React DayPicker, Embla Carousel... I'm not saying it's a bad thing. But when you depends on a lot of package - you easily mess up your package.json, and you can't even edit a single feature. The only thing you can customize is **style**. If there's a bug that needs to be fixed quickly, or a feature that doesn't work the way you want it to, you'll want to tweak it to your liking. This is where relying on a lot of packages can be poison. PSW/UI solves this - by **NOT** depending on any other packages than framework like React, TailwindCSS, and tailwind-merge. You can just copy it, and all functionality is contained in a single file. ## Roadmap First of all, this project is alpha. You can see a lot of components are missing, and some component is buggy. I'm working with this priority: 1. Adding new component, with stable features. 2. Fixing bugs with existing components. 3. Make it looks nice. Also, there is a [Github README](https://github.com/pswui/ui) for component implementation plans. You can see what component is implemented, or planned to be implemented. If you have any ideas or suggestions, please let me know in [Github Issues](https://github.com/pswui/ui/issues). ## Milestones - Component Implementation - [ ] DateTimeInput - [x] Input - [ ] FileInput - [ ] ImageInput - [ ] Form - [ ] Textarea - [ ] Accordion - [ ] Alert - [ ] Avatar - [ ] Badge - [ ] Breadcrumb - [x] Button - [ ] Card - [x] Checkbox - [ ] Context Menu - [ ] Data Table - [x] Dialog - [x] Drawer - [ ] Dropdown Menu - [x] Label - [ ] Menubar - [ ] Navigation Menu - [ ] Pagination - [x] Popover - [ ] Progress - [ ] Radio Group - [ ] Scroll Area - [ ] Select - [ ] Separator - [ ] Skeleton - [ ] Slider - [x] Switch - [ ] Table - [x] Tabs - [x] Toast - [ ] Toggle - [ ] Toggle Group - [x] Tooltip - CLI - [x] Add - [x] List - [x] Search ## Building local development environment ```bash # Corepack - Yarn 4.2.2 corepack enable # Install Packages yarn install # Script running in workspace yarn react dev # `yarn dev` in react workspace yarn cli build # `yarn build` in cli workspace ``` ## Project Structure * `registry.json` - for CLI component registry * `packages/react` - React components * `components` - component files & directories * `lib` - shared utility used by component * `src` - small test area * `packages/cli` - CLI package using [oclif](https://oclif.io) * `src/commands` - command class declaration * `src/components` - React component used by CLI via [ink](https://www.npmjs.com/package/ink) * `src/helpers` - utility functions that helps CLI * `const.ts` - constant & small value builder (like URL) & types & interfaces * `public.ts` - will be exported