@shinydocs/ui

✨ React UI component library built with Tailwind CSS ✨

These React UI components are designed from Shinydocs UI, our internal design system. We use them to build simple, intuitive and beautiful user experiences across our web products.

Features

• 🐱‍🚀 Over 35 beautifully designed, accessible React UI components
• 🦜 Custom hooks for managing theme, watching media queries, etc.
• 🔠 Full support for localization
• 🔗 Link integration with the routing library of your choice
• 🌞 Light & dark mode designs
• 🛸 Seamless integration with existing Tailwind CSS projects

Usage

First, install the package from npm:

npm install -D @shinydocs/ui @shinydocs/tailwind-config

Then, in your application's Tailwind CSS config, extend your content array with the path to Shinydocs UI. This will ensure all Tailwind utilities required by the library are generated.

Make sure to also include the @shinydocs/tailwind-config plugin.

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: ["@shinydocs/tailwind-config"],
  content: ["./node_modules/@shinydocs/ui/dist/**/*.js"],
  theme: {
    extend: {},
  },
};

Setting up your application

This project provides a general context provider to handle global aspects like light and dark theme.

import { Provider } from "@shinydocs/ui";
import * as React from "react";

export function MyApp() {
  return <Provider>...</Provider>;
}

You can import React components, hooks, and TypeScript types from the top-level module:

import { Button, useTheme, type ButtonProps } from "@shinydocs/ui";

Changelog

This project adheres to Semantic Versioning. Please refer to the CHANGELOG.md for detailed changes and migration instructions.