Astro

Install and configure Astro.

To use @wds-ui in your project, you need to follow the following steps:

Create project

Start by creating a new React project using astro:

npm create astro@latest

Add Tailwind and its configuration

Install tailwindcss and its peer dependencies and plugins, then generate your tailwind.config.js and postcss.config.js files:

npm install -D tailwindcss postcss autoprefixer tailwindcss-animate @tailwindcss/typography @tailwindcss/aspect-ratio && npx tailwindcss init -p


/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "./node_modules/@wds-ui/**/*.{js,jsx,ts,tsx,html}",
  ],
   darkMode: "class",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      sc

Style System

Easily improve your app’s look with the @wds-ui style system. It gives you full control over themes, making your app look great and professional.

Add the following Tailwind directives and rules to your CSS (src/style.css)



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

@layer utilities {
.prose {
@apply text-foreground;
--tw-prose-body: var(--foreground);
--tw-prose-headings: var(--foreground);

    --tw-prose-links: var(--primary);
    --tw-prose-bold: var(--foreground);
    --tw-prose-counters: var(--

Theming

Add the following script in the end of your layout file:



<script is:inline>
	const getThemePreference = () => {
		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
			return localStorage.getItem('theme');
		}
		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
	};
	const isDark = getThemePrefe

Install @astrojs/react

Run the following from your project directory and follow the prompts:

npx astro add react

That’s it

You can now use @wds-ui components in your project.

more react components