@tinloof/ds

A design system package built with React, TypeScript, and Tailwind CSS.

Usage

Import components in your project:

import { Button, Input, Skeleton } from "@tinloof/ds";

Tailwind CSS Setup

The ideal setup is to import the Tailwind config in your own CSS file:

@import "@tinloof/ds/config.css";

/* Your global styles where you can use @apply tw-class-here and extend the Tailwind theme */

This allows you to:

• Use @apply with design system utilities
• Extend the Tailwind theme
• Customize the design system to fit your project

Standalone CSS (Without Tailwind)

If you don't want or can't use Tailwind in your project, you can import the compiled CSS directly:

import "@tinloof/ds/styles.css";

This provides all the compiled styles without requiring Tailwind CSS in your project.

Local Development

1. Install dependencies

bun install

2. Install yalc globally

If not done yet, install yalc globally:

bun add -g yalc

3. Link the package

bun run link

This will publish the package to yalc and link it to the dev project.

4. Run dev mode

bun run dev

This will watch for changes and automatically rebuild and push updates to the dev project.

5. Start the dev server (in another terminal)

cd dev
bun run dev

Now you can make changes to components and see them live in the dev project!

Unlinking

When you're done with local development:

bun run unlink

Building

Create a production build:

bun run build

This will generate:

• ESM and CJS JavaScript bundles in ./dist
• Compiled and minified CSS in ./dist/styles.css
• TypeScript declaration files in ./dist

Scripts

• bun run dev - Development build with watch mode and automatic yalc push
• bun run build - Production build
• bun run link - Setup yalc link with dev project
• bun run unlink - Remove yalc link from dev project

Project Structure

• src/ - Source files (TypeScript/React components and CSS)
• dist/ - Built output (generated, not committed)
• dev/ - Local test React project
• build.ts - Custom build script

Requirements

• Bun v1.3.5 or later
• React 19.2.4 or later (peer dependency)
• TypeScript 5.x (peer dependency)
• yalc (for local development)