TON Design System

https://ton.org/en/brand-assets

Package size

Repository size

Main idea

Atomic CSS

.atom {
  @apply ... (tw-classes)
}

Usage

Atomic Components using Declarative components with Raw Framework

import { tags } from './package/raw'

const { div, button } = tags;

export const Button = () => {
  return (
    div(
      { className='px-2 py-2 h-full flex' }, 
      button(
        { class: "custom-classname", variant="default" }, 
        'Cross-platform button (default)'
      )
    );
};

More examples

• Examples of usages within ton-design-system/registry
• Example of usage with next-typescript
• Example of usage with rn-typescript

Use CLI

Quick start

1. Copy component from Github - npx "@designervoid/ton-design-system"@"latest" cli -g
2. Init Tailwind npx "@designervoid/ton-design-system"@"latest" cli -t
3. Init TDS npx "@designervoid/ton-design-system"@"latest" cli -tds

License

MIT