tidal-ui

A React component library built with Vite, TypeScript, Tailwind CSS v4, and Storybook.

What is included

• Reusable UI components:
  • Button
  • WhaleButton (audio button)
• Storybook docs with autodocs and theme switching
• Library bundling via Vite
• Type definitions via TypeScript

Tech stack

• React 19
• TypeScript 5
• Vite 6
• Tailwind CSS v4
• Storybook 8

Getting started

1. Install dependencies

bun install

You can also use npm:

npm install

2. Start local playground

bun run dev

3. Run Storybook docs

bun run docs

Build the library

bun run build

This produces bundled files and type declarations in dist/.

Use this package in another app

After publishing to npm, consumers can install:

npm install tidal-ui

Then import components:

import { Button, WhaleButton } from 'tidal-ui'

Example:

import whaleAmbience from './assets/whale-ambience-do.mp3'
import { Button, WhaleButton } from 'tidal-ui'

export function Demo() {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <WhaleButton label="Play whale sounds" audioSrc={whaleAmbience} />
      <Button label="Solid button" />
      <Button label="Ghost button" tone="ghost" />
    </div>
  )
}