Getting Started

Get up and running with Thrynd CSS in minutes. Pure CSS, zero runtime, works with any framework.

Installation

npm (Recommended)

Install Thrynd via npm for bundled applications:

npm install thrynd

Then import it in your JavaScript entry file:

// In your main.js, App.tsx, or entry file
import 'thrynd';

Or import in your CSS:

/* In your main CSS file */
@import 'thrynd';

CDN (Rapid Prototyping)

For quick prototypes, CodePen experiments, or static sites without a build step:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/thrynd@latest/dist/thrynd.min.css">

Quick Example

Create your first Thrynd component - a styled card with a button:

Hello World Card

Hello Thrynd!

This is your first Thrynd component. Beautiful defaults with zero configuration.

Theme Selection

Thrynd includes 6 complete themes. Switch themes by adding a class to your <body> or any container element:

<!-- Modern (default) - Clean, contemporary design -->
<body class="theme-modern">

<!-- Classic - Traditional elegance with serif fonts -->
<body class="theme-classic">

<!-- Minimal - Brutalist, focused simplicity -->
<body class="theme-minimal">

<!-- Neon - Cyberpunk aesthetic with electric colors -->
<body class="theme-neon">

<!-- Nature - Earthy, organic warmth -->
<body class="theme-nature">

<!-- Corporate - Professional and trustworthy -->
<body class="theme-corporate">

Switch themes dynamically with JavaScript:

// Switch to neon theme
document.body.className = 'theme-neon';

// Or toggle themes
function setTheme(theme) {
  document.body.className = `theme-${theme}`;
}

Pro Tip: Try switching themes using the theme switcher in the top navigation bar to see all themes in action!

Framework Integration

Thrynd is pure CSS with zero JavaScript dependencies. It works seamlessly with any framework:

React / Next.js

// In your App.tsx or layout.tsx
import 'thrynd';

function App() {
  return (
    <div className="theme-modern">
      <div className="container">
        <h1>Hello from React!</h1>
        <button className="btn-primary">Click me</button>
      </div>
    </div>
  )
}

Vue / Nuxt

<!-- In main.js or App.vue -->
<script setup>
import 'thrynd';
</script>

<template>
  <div class="theme-modern">
    <div class="container">
      <h1>Hello from Vue!</h1>
      <button class="btn-primary">Click me</button>
    </div>
  </div>
</template>

Svelte / SvelteKit

<!-- In +layout.svelte or App.svelte -->
<script>
  import 'thrynd';
</script>

<div class="theme-modern">
  <div class="container">
    <h1>Hello from Svelte!</h1>
    <button class="btn-primary">Click me</button>
  </div>
</div>

Astro

---
// In your layout or page
import 'thrynd';
---

<html lang="en">
  <body class="theme-modern">
    <div class="container">
      <h1>Hello from Astro!</h1>
      <button class="btn-primary">Click me</button>
    </div>
  </body>
</html>

Progressive Enhancement

Thrynd uses a three-level progressive enhancement system:

Level 1

Semantic HTML

Start with proper HTML structure. Base styles look good even without classes.

Level 2

Component Classes

Add component classes like btn-primary or card for styled components.

Level 3

Utility Classes

Fine-tune with utilities like mt-4, text-center, or flex.

You're all set! Continue to the Components section to explore all available components.

Next: Themes →