Goblin UI is a lightweight and straightforward React UI library tailored for the React-Tailwind ecosystem. It is built with React, Vite, TypeScript, and Tailwind CSS to provide a seamless development experience. This library is designed with a specific philosophy—offering predefined components with minimal customization choices. The aim is to streamline development by reducing the decision-making process associated with creating components with varying styles.
Opinionated Approach: Goblin UI adopts an opinionated stance, providing a curated set of React components with a deliberate lack of extensive customization options. This intentional limitation aims to simplify the development process, preventing users from getting bogged down in endless styling choices.
Note: Users leveraging this library will still need to install React, Vite, and Tailwind CSS separately if they wish to incorporate these technologies into their own custom components. Goblin UI offers React components with a predetermined level of flexibility, allowing developers to focus on building without the complexities of extensive styling decisions.
Checkout the detailed in-depth documentation.
- Simple and lightweight React components
- Built with Vite, TypeScript, and Tailwind CSS
- Seamless integration with React-Tailwind ecosystem
Explore the components live on Chromatic.
npm install goblin-uior
yarn add goblin-uiimport { Button } from "goblin-ui";
import "goblin-ui/dist/style.css"; // Import it once in the root of your repo.
const App = () => {
return <Button>Click me</Button>;
};start: Run Storybook for component developmentbuild: Build the librarylint: Lint the code using ESLintbuild:storybook: Build Storybook for deploymentchromatic: Deploy and test components on Chromatic
lib/: Library source codestories/: Storybook storiesdist/: Distribution files
Feel free to contribute to Goblin UI by opening issues or submitting pull requests. Your feedback and contributions are highly appreciated.
Goblin UI is licensed under the MIT License - see the LICENSE.md file for details.