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 - 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 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.

Milestones

• Component Implementation
  • DateTimeInput
  • Input
  • FileInput
  • ImageInput
  • Form
  • Textarea
  • Accordion
  • Alert
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Card
  • Checkbox
  • Context Menu
  • Data Table
  • Dialog
  • Drawer
  • Dropdown Menu
  • Label
  • Menubar
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Skeleton
  • Slider
  • Switch
  • Table
  • Tabs
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
• CLI
  • Add
  • List
  • Search

Building local development environment

# 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
  • src/commands - command class declaration
  • src/components - React component used by CLI via ink
  • src/helpers - utility functions that helps CLI
  • const.ts - constant & small value builder (like URL) & types & interfaces
  • public.ts - will be exported