Tamil Design System

Tamil-first React components, design tokens, and agent guidance for building accessible Tamil interfaces.

The package contains only the reusable component layer: UI primitives, Tamil typography helpers, language preference state, and the design rules agents should follow.

Repository: https://github.com/selva-toi/Tamil_Design_System

Install

npm install @tamildesignsystem/react

Add styles

In your app CSS, import Tailwind first, scan the package output, then import Tamil UI styles.

For a common Next.js src/app/globals.css file:

@import "tailwindcss";
@source "../../node_modules/@tamildesignsystem/react/dist";
@import "@tamildesignsystem/react/styles.css";

If your CSS file is at app/globals.css in the project root, use:

@source "../node_modules/@tamildesignsystem/react/dist";

Adjust the @source path when your CSS file lives somewhere else.

Use components

import { Button, Card, CardContent, CardHeader, CardTitle } from "@tamildesignsystem/react";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="font-tamil tamil-heading">தமிழ் சேவை</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>தொடங்கு</Button>
      </CardContent>
    </Card>
  );
}

Fonts

Tamil UI expects a Tamil-capable font. For Next.js, load Noto Sans Tamil and expose it as --font-noto-sans-tamil.

import { Noto_Sans_Tamil } from "next/font/google";

const notoTamil = Noto_Sans_Tamil({
  subsets: ["tamil"],
  variable: "--font-noto-sans-tamil",
});

Then add the font variable to your root layout class.

Language tabs

Tabs automatically persists language choice when it sees Tamil/English tab values:

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@tamildesignsystem/react";

export function LanguageExample() {
  return (
    <Tabs defaultValue="tamil">
      <TabsList>
        <TabsTrigger value="tamil">தமிழ்</TabsTrigger>
        <TabsTrigger value="english">English</TabsTrigger>
      </TabsList>
      <TabsContent value="tamil">தமிழ் உள்ளடக்கம்</TabsContent>
      <TabsContent value="english">English content</TabsContent>
    </Tabs>
  );
}

Short values ta and en are also supported.

Templates

The package also includes Tamil-first starter templates for public-service products. They use the same primitives, tokens, radii, typography helpers, and responsive layout rules as the component library.

import {
  RationShopDashboardTemplate,
  TNGovLandingTemplate,
} from "@tamildesignsystem/react";

export function PublicServiceHome() {
  return <TNGovLandingTemplate baseHref="/services" />;
}

export function ShopHome() {
  return <RationShopDashboardTemplate baseHref="/ration-shop" />;
}

Templates are intentionally framework-neutral React components. Replace the demo data with real service, stock, receipt, and support data from your app before production use.

Agent skill

The package includes a reusable agent skill at:

skills/tamil-ui-design/SKILL.md

Use it when asking an AI coding agent to build Tamil-first UI. It covers Tamil typography, mobile checks, component rules, accessibility, and layout safety.