BingBong UI

getting started

npm install bingbong-ui # or pnpm or yarn or whatever

add tailwind to your project

npx svelte-add@latest tailwindcss

edit tailwind.config.[js|cjs] to include the following:

import { fontFamily } from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config}*/
const config = {
	darkMode: ['class'],
	content: ['./src/**/*.{html,js,svelte,ts}', 'node_modules/bingbong-ui/**/*.{html,js,svelte,ts}'],
	theme: {
		container: {
			center: true,
			padding: '2rem',
			screens: {
				'2xl': '1400px'
			}
		},
		extend: {
			colors: {
				border: 'hsl(var(--border))',
				input: 'hsl(var(--input))',
				ring: 'hsl(var(--ring))',
				background: 'hsl(var(--background))',
				foreground: 'hsl(var(--foreground))',
				primary: {
					DEFAULT: 'hsl(var(--primary))',
					foreground: 'hsl(var(--primary-foreground))'
				},
				secondary: {
					DEFAULT: 'hsl(var(--secondary))',
					foreground: 'hsl(var(--secondary-foreground))'
				},
				destructive: {
					DEFAULT: 'hsl(var(--destructive))',
					foreground: 'hsl(var(--destructive-foreground))'
				},
				muted: {
					DEFAULT: 'hsl(var(--muted))',
					foreground: 'hsl(var(--muted-foreground))'
				},
				accent: {
					DEFAULT: 'hsl(var(--accent))',
					foreground: 'hsl(var(--accent-foreground))'
				},
				popover: {
					DEFAULT: 'hsl(var(--popover))',
					foreground: 'hsl(var(--popover-foreground))'
				},
				card: {
					DEFAULT: 'hsl(var(--card))',
					foreground: 'hsl(var(--card-foreground))'
				}
			},
			borderRadius: {
				lg: 'var(--radius)',
				md: 'calc(var(--radius) - 2px)',
				sm: 'calc(var(--radius) - 4px)'
			},
			fontFamily: {
				sans: [...fontFamily.sans]
			}
		}
	},

	plugins: []
};

module.exports = config;

edit app.postcss to include the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 224 71.4% 4.1%;

		--muted: 220 14.3% 95.9%;
		--muted-foreground: 220 8.9% 46.1%;

		--popover: 0 0% 100%;
		--popover-foreground: 224 71.4% 4.1%;

		--card: 0 0% 100%;
		--card-foreground: 224 71.4% 4.1%;

		--border: 220 13% 91%;
		--input: 220 13% 91%;

		--primary: 220.9 39.3% 11%;
		--primary-foreground: 210 20% 98%;

		--secondary: 220 14.3% 95.9%;
		--secondary-foreground: 220.9 39.3% 11%;

		--accent: 220 14.3% 95.9%;
		--accent-foreground: 220.9 39.3% 11%;

		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 210 20% 98%;

		--ring: 224 71.4% 4.1%;

		--radius: 0.5rem;
	}

	.dark {
		--background: 224 71.4% 4.1%;
		--foreground: 210 20% 98%;

		--muted: 215 27.9% 16.9%;
		--muted-foreground: 217.9 10.6% 64.9%;

		--popover: 224 71.4% 4.1%;
		--popover-foreground: 210 20% 98%;

		--card: 224 71.4% 4.1%;
		--card-foreground: 210 20% 98%;

		--border: 215 27.9% 16.9%;
		--input: 215 27.9% 16.9%;

		--primary: 210 20% 98%;
		--primary-foreground: 220.9 39.3% 11%;

		--secondary: 215 27.9% 16.9%;
		--secondary-foreground: 210 20% 98%;

		--accent: 215 27.9% 16.9%;
		--accent-foreground: 210 20% 98%;

		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 210 20% 98%;

		--ring: 216 12.2% 83.9%;
	}
}

@layer base {
	* {
		@apply border-border;
	}
	body {
		@apply bg-background text-foreground;
	}
}

import components into your project

<script lang="ts">
	import {
		Button,
		Dialog,
		DialogContent,
		DialogDescription,
		DialogHeader,
		DialogTitle,
		DialogTrigger
	} from 'bingbong-ui';
</script>

<Dialog>
	<DialogTrigger>
		<Button>Click Me</Button>
	</DialogTrigger>
	<DialogContent>
		<DialogHeader>
			<DialogTitle>BingBong</DialogTitle>
		</DialogHeader>
		<DialogDescription>
			<p>Dialog description</p>
		</DialogDescription>
	</DialogContent>
</Dialog>